Three.JS实现三维场景


Posted in Javascript onDecember 30, 2018

最近在看一些Web3D的内容,觉得如果用纯openGLes写一个简单的3D场景太难了;不过还好,有很多现成的库可以使用。

(个人感觉):我知道的经常的是Three.JS和SceneJS。感觉Three.JS资料比较多,貌似好学一些吧;另一个是ScenenJS,感觉官方介绍比较好,适合做一些工程和医学上的模拟,实时性比较好,但是中文资料感觉比较少,不太好学习。我个人看的是Three.JS

学习中用到的一些工具和库:学习中用到一些库,也费了不少时间去整理,下载;
用到的工具:WebStorm,个人感觉还好,虽然说,开始学不建议IDE,但是起码有代码提示,会有函数的简单说明,起码知道你输入的代码(即使是照着教程抄)是否正确,如果智能提示有,那么至少说明你输入的代码是正确的。

sublimeText :一个文本工具,配置了也可以对代码有些提示,但是,提示功能不如专业IDE。速度很好;
工具不上传了,太大,可以自己去官网下载。

用到的库:

  • Three.JS(介绍可以搜索):
  • JQuery-1.9.0.JS:
  • JQuery-3.2.1.JS:
  • stats.JS:
  • dat.GUI.JS:
  • controlKit.JS:
  • SceneJS.js:

个人也是初学,工具用的是WebStorm,下面是three.JS的第一个例子,代码中添加了很详细的解释,照着写,仔细看看注释。学习的时候,个人建议把下载到库修改下名字,和你写的HTML文件统一放到一个文件夹中,这样像下面的例子中,添加引用的库就可以了,要不就要指定引用库的全路径。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Three.js 第一章学习</title>
<!--需要的基本JS库-->
  <script src="jquery19.js"></script>
  <script src="three.js"></script>
  <script src ="stats.js"></script>
  <script src = "dat.gui.js"></script>
  <script src = "controlKit.js"></script>
  <!--给body加入一个样式,边框为0(零,不显示边框);滚动条隐藏-->
  <style type="text/css">
    body{
      margin: 0;
      overflow: hidden;
    }
  </style>
</head>
<body>
<!--建立一个DIV,WebGL渲染的基本物体会在此处输出-->
<div id="WebGL-output">

</div>

<!--定义一个JQuery函数,所有的WebGL操作展示将在该函数中进行-->
<script type="text/javascript">
$(function () {
  <!--构建场景-->
  var scene = new THREE.Scene();
  <!--建立相机,查看场景,透视相机-->
  var camera = new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,0.1,1000);
  <!--构建渲染器,进行渲染-->
  var renderer = new THREE.WebGLRenderer();
  <!--渲染背景色,不知道为什么在此学习过程中,该函数setClearColorHex()老是提示错误?-->
  // renderer.setClearColorHex(0xEEEEEE);
  renderer.setClearColor(0xAAFFCC);
  <!--渲染尺寸-->
  renderer.setSize(window.innerWidth,window.innerHeight);

  <!--添加一个辅助坐标轴-->
  var axes = new THREE.AxisHelper(20);
  scene.add(axes);

  <!--构建一个平面,物体将会放置在这个平面上-->
  <!--平面尺寸,100x60,宽度方向平分几分,高度方向平分几分,如果参数最后2位不是(1,1),平面会显示为网格平面-->
  var planeGeometry = new THREE.PlaneGeometry(100,60,10,10);
  <!--平面材质,仅仅指定颜色 0xcccccc-->
  var planeMaterial = new THREE.MeshBasicMaterial({color:0xccaacc});
  <!--有尺寸和材质构建一个平面-->
  var plane = new THREE.Mesh(planeGeometry,planeMaterial);
  <!--把平面选择-90°,方便观察-->
  plane.rotation.x = -0.5*Math.PI;
  <!--指定平面的位置-->
  plane.position.x = 15;
  plane.position.y = 0;
  plane.position.z = 0;
  <!--把平面加入到场景中-->
  scene.add(plane);
  <!--建立物体,一个立方体,一个球体-->
  <!--建立一个立方体-->
  <!--指定立方体的几何尺寸,长宽高,不包括位置-->
  var cubeGeometry = new THREE.CubeGeometry(4,4,4);
  <!--指定立方体的材质,仅仅指定颜色:0xFF0000,是否使用线框模式显示:是-->
  var cubeMaterial = new THREE.MeshBasicMaterial({color:0xFF0000,wireframe:true});
  <!--以给定的几何尺寸和材质构建一个立方体-->
  var cube = new THREE.Mesh(cubeGeometry,cubeMaterial);
  <!--指定立方体的具体位置xyz-->
  cube.position.x =-4;
  cube.position.y =3;
  cube.position.z = 0;
  <!--把建立的立方体放入场景-->
   scene.add(cube);

  <!--建立一个球体sphere-->
  <!--指定球体的几何尺寸,不包括位置;最后2个参数感觉是指定网格密度-->
  var sphereGeometry = new THREE.SphereGeometry(4,50,50);
  <!--指定球体材质,仅仅指定颜色:0xFF0000,是否以线框形式显示:是-->
  var sphereMaterial = new THREE.MeshBasicMaterial({color:0xff0000,wireframe:true});
  <!--以给定的几何尺寸和材质,建立一个球体-->
  var sphere = new THREE.Mesh(sphereGeometry,sphereMaterial);
  <!--指定球体的位置 X Y Z-->
  sphere.position.x =20;
  sphere.position.y=4;
  sphere.position.z = 0;
  <!--把建立的球体加入到场景中-->
  scene.add(sphere);

  <!--指定相机的位置和方向,决定我们在场景中如何看,能看到什么-->
  camera.position.x = -30;
  camera.position.y = 40;
  camera.position.z = 30;
  camera.lookAt(scene.position);

  <!--利用JQuery查找到ID为WebGL-output的DIV,并把渲染到的东西输出到该DIV-->
  $("#WebGL-output").append(renderer.domElement);
  <!--利用渲染器以给定的相机去渲染场景-->
  renderer.render(scene,camera);
})  ;
</script>


</body>
</html>

效果:

Three.JS实现三维场景

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript字符串插入、删除、替换函数使用示例
Jul 25 Javascript
jQuery的选择器中的通配符使用介绍
Mar 20 Javascript
javascript每日必学之封装
Feb 23 Javascript
AngularJS基础 ng-selected 指令简单示例
Aug 03 Javascript
js style.display=block显示布局错乱问题的解决方法
Sep 21 Javascript
AngularJS 2.0入门权威指南
Oct 08 Javascript
Angular实现购物车计算示例代码
Feb 21 Javascript
JScript实现地址选择功能
Aug 15 Javascript
vue2.0+vue-dplayer实现hls播放的示例
Mar 02 Javascript
微信小程序授权登录解决方案的代码实例(含未通过授权解决方案)
May 10 Javascript
解决Idea、WebStorm下使用Vue cli脚手架项目无法使用Webpack别名的问题
Oct 11 Javascript
基于 Vue 的 Electron 项目搭建过程图文详解
Jul 22 Javascript
Three.js实现简单3D房间布局
Dec 30 #Javascript
JavaScript数组特性与实践应用深入详解
Dec 30 #Javascript
微信小程序实现通过双向滑动缩放图片大小的方法
Dec 30 #Javascript
微信小程序使用setData修改数组中单个对象的方法分析
Dec 30 #Javascript
微信小程序提交form操作示例
Dec 30 #Javascript
bootstrap下拉分页样式 带跳转页码
Dec 29 #Javascript
详解vue 兼容IE报错解决方案
Dec 29 #Javascript
You might like
暴雪前总裁遗憾:没尽早追赶Dota 取消星际争霸幽灵
2020/03/08 星际争霸
PHP+javascript液晶时钟
2006/10/09 PHP
PHP 配置open_basedir 让各虚拟站点独立运行
2009/11/12 PHP
PHP模板引擎Smarty中的保留变量用法分析
2016/04/11 PHP
thinkPHP中U方法加密传递参数功能示例
2018/05/29 PHP
js操作Xml(向服务器发送Xml,处理服务器返回的Xml)(IE下有效)
2009/01/30 Javascript
Javascript读取cookie函数代码
2010/10/16 Javascript
JS仿flash上传头像效果实现代码
2011/07/18 Javascript
Javascript代码在页面加载时的执行顺序介绍
2013/05/03 Javascript
倒记时60刷新网页的js代码
2014/02/18 Javascript
javaScript实现可缩放的显示区效果代码
2015/10/26 Javascript
Nodejs爬虫进阶教程之异步并发控制
2016/02/15 NodeJs
Bootstrap如何激活导航状态
2017/03/22 Javascript
使用JavaScript开发跨平台的桌面应用详解
2017/07/27 Javascript
用vue2.0实现点击选中active其他选项互斥的效果
2018/04/12 Javascript
详解React项目中碰到的IE问题
2019/03/14 Javascript
JS实现的简单tab切换功能完整示例
2019/06/20 Javascript
vue实现权限控制路由(vue-router 动态添加路由)
2019/11/04 Javascript
js实现电灯开关效果
2021/01/19 Javascript
[01:41]DOTA2 2015国际邀请赛中国区预选赛第三日战报
2015/05/28 DOTA
[01:20]PWL开团时刻DAY9——听说潮汐没用?
2020/11/10 DOTA
Python实现截屏的函数
2015/07/25 Python
Python简单爬虫导出CSV文件的实例讲解
2018/07/06 Python
python批量从es取数据的方法(文档数超过10000)
2018/12/27 Python
pyqt5 QProgressBar清空进度条的实例
2019/06/21 Python
使用python的turtle绘画滑稽脸实例
2019/11/21 Python
Django 自定义权限管理系统详解(通过中间件认证)
2020/03/11 Python
SQL中where和having的区别
2012/06/17 面试题
建筑工程技术应届生自荐信
2013/09/27 职场文书
小学语文业务学习材料
2014/06/02 职场文书
吃空饷专项整治方案
2014/10/27 职场文书
2014年幼儿园老师工作总结
2014/12/05 职场文书
食品药品安全责任书
2015/05/11 职场文书
2015年幼儿园教育教学工作总结
2015/05/25 职场文书
nginx服务器的下载安装与使用详解
2021/08/02 Servers
《英雄联盟》2022日蚀、月蚀皮肤演示 黑潮亚索曝光
2022/04/13 其他游戏