threeJS基本模型搭建

引入threeJS引擎

• 方式一：在.html文件中引入three.js就像前端经常使用的jquery.js一样引入即可。

   <!--相对地址加载-->
   <script src="./three.js"></script>

• 方式二：绝对地址远程加载

   <!--http绝对地址远程加载-->
   <script src="http://www.yanhuangxueyuan.com/versions/threejsR92/build/three.js"></script>

基本模型的搭建

第一步：创建场景对象Scene

 var scene = new THREE.Scene();

第二步：创建几何体Geometry

• 创建立方体，代码如下：

 var geometry = new THREE.BoxGeometry(100, 100, 100);

.BoxGeometry中的参数分别代表立方体的长宽高的数值

• 创建球体，代码如下：

 var geometry = new THREE.SphereGeometry(60, 40, 40);

第三步：创建材质对象Material

  var material = new THREE.MeshLambertMaterial({
       color: 0xffd666,
     }); 

参数是一个对象，其中包含了颜色、透明度等属性

颜色使用0x+rgb

常用的Material属性

name： 名称 opacity：透明度，结合transparent使用，范围为0~1 transparent：是否透明，如果为true则结合opacity设置透明度。如果为false则物体不透明 visible：是否可见，false则看不见，默认可以看见 side：侧面，觉得几何体的哪一面应用这个材质，默认为THREE.FrontSide(前外面)，还有THREE.BackSide(后内面)和THREE.DoubleSide(两面) needUpdate：如果为true，则在几何体使用新的材质的时候更新材质缓存

color：设置材质的颜色 wireframe：如果为true，则将材质渲染成线框，在调试的时候可以起到很好的作用 wireframeLinewidth：wireframe为true时，设置线框中线的宽度 wireframeLinecap：决定线框端点如何显示，可选的值 round，bevel(斜角)和miter(尖角)。 vertexColors：通过这属性，定义顶点的颜色，在canvasRender中不起作用。

将网格模型添加到创建的场景对象Scene当中

 scene.add(mesh);

第四步：光源设置

点光源设置

 var point = new THREE.PointLight(0xffffff);
 point.position.set(400, 200, 300); //点光源位置
 scene.add(mesh);

环境光设置

 var ambient = new THREE.AmbientLight(0x444444);
 scene.add(ambient);

第五步：相机设置

     var width = window.innerWidth; //窗口宽度
     var height = window.innerHeight; //窗口高度
     var k = width / height; //窗口宽高比
     var s = 200; //三维场景显示范围控制系数，系数越大，显示的范围越大
     //创建相机对象
     var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
     camera.position.set(200, 300, 200); //设置相机位置
     camera.lookAt(scene.position); //设置相机方向(指向的场景对象)

• camera.position.set中的参数分别代表相机以y轴逆时针移动、以x轴向上方移动、以y轴顺时针移动

• 构造函数THREE.OrthographicCamera()创建了一个正射投影相机对象，其中的s代表相机理几何体的距离

第六步：创建渲染器对象

     var renderer = new THREE.WebGLRenderer();
     renderer.setSize(width, height);//设置渲染区域尺寸
     renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色
     document.body.appendChild(renderer.domElement); //body元素中插入canvas对象
     //执行渲染操作   指定场景、相机作为参数
     renderer.render(scene, camera);

基本模型对象搭建完成

Nodejs本地静态服务器搭建

1. 在threeJS文件所在目录通过cmd打开终端命令框

2. 执行npm install -g live-server安装live-server

3. 执行live-server，并选择对应文件 或 通过浏览器访问http://localhost:8080或http://127.0.0.1:8080地址，找到threejs案例的.html文件直接打开就可以看到三维场景渲染效果。

周期性渲染

通过延时定时器渲染

通过：

 // 渲染函数
 function render() {
     renderer.render(scene,camera);//执行渲染操作
     mesh.rotateY(0.01);//每次绕y轴旋转0.01弧度
 }
 //间隔20ms周期性调用函数fun,20ms也就是刷新频率是50FPS(1s/20ms)，每秒渲染50次
 setInterval("render()",20);

替换基本模型中的：

 renderer.render(scene, camera);

性能优化渲染

requestAnimationFrame

 function render() {
         renderer.render(scene,camera);//执行渲染操作
         mesh.rotateY(0.01);//每次绕y轴旋转0.01弧度
         requestAnimationFrame(render);//请求再次执行渲染函数render
     }
 render();

均匀旋转

由于requestAnimationFrame不一定会按照60帧的频率渲染，所以我们将间隔时间固定优化渲染效果

 let T0 = new Date();//上次时间
 function render() {
         let T1 = new Date();//本次时间
         let t = T1-T0;//时间差
         T0 = T1;//把本次时间赋值给上次时间
         requestAnimationFrame(render);
         renderer.render(scene,camera);//执行渲染操作
         mesh.rotateY(0.001*t);//旋转角速度0.001弧度每毫秒
     }
 render();

鼠标操作三维场景

需要通过threeJS中的OrbitControls.js控件实现，three.js-master文件中找到(three.js-master\examples\js\controls)。 然后和引入three.js文件一样在html文件中引入控件OrbitControls.js

 <script src="./three.js-r102/examples/js/controls/OrbitControls.js"></script>

Threejs-master包下载

链接：百度网盘 请输入提取码

提取码：rrks

OrbitControls.js的代码实现

 function render() {
   renderer.render(scene,camera);//执行渲染操作
 }
 render();
 var controls = new THREE.OrbitControls(camera,renderer.domElement);//创建控件对象
 controls.addEventListener('change', render);//监听鼠标、键盘事件  如果已经使用requestAnimationFrame就不需要此行代码

如果使用了requestAnimationFrame函数进行渲染，没必要在通过controls.addEventListener('change', render)监听鼠标事件调用渲染函数

新几何体的插入

SphereGeometry构造函数

 SphereGeometry(radius, widthSegments, heightSegments)

第一个参数radius约束的是球的大小，参数widthSegments、heightSegments约束的是球面的精度，球体你可以理解为正多面体，就像圆一样是正多边形，当分割的边足够多的时候，正多边形就会无限接近于圆，球体同样的的道理

绘制球体网络模型

 var box=new THREE.SphereGeometry(60,40,40);//创建一个球体几何对象

更多的几何体

 //长方体 参数：长，宽，高
 var geometry = new THREE.BoxGeometry(100, 100, 100);
 // 球体 参数：半径60  经纬度细分数40,40
 var geometry = new THREE.SphereGeometry(60, 40, 40);
 // 圆柱  参数：圆柱面顶部、底部直径50,50   高度100  圆周分段数
 var geometry = new THREE.CylinderGeometry( 50, 50, 100, 25 );
 // 正八面体
 var geometry = new THREE.OctahedronGeometry(50);
 // 正十二面体
 var geometry = new THREE.DodecahedronGeometry(50);
 // 正二十面体
 var geometry = new THREE.IcosahedronGeometry(50);

将多个绘制的几何体添加到同一场景中

• threejs的几何体默认位于场景世界坐标的原点(0,0,0),所以绘制多个几何体的时候，主要它们的位置设置。

 // 立方体网格模型
 var geometry1 = new THREE.BoxGeometry(100, 100, 100);
 var material1 = new THREE.MeshLambertMaterial({
   color: 0x0000ff
 }); //材质对象Material
 var mesh1 = new THREE.Mesh(geometry1, material1); //网格模型对象Mesh
 scene.add(mesh1); //网格模型添加到场景中
 ​
 // 球体网格模型
 var geometry2 = new THREE.SphereGeometry(60, 40, 40);
 var material2 = new THREE.MeshLambertMaterial({
   color: 0xff00ff
 });
 var mesh2 = new THREE.Mesh(geometry2, material2); //网格模型对象Mesh
 mesh2.translateY(120); //球体网格模型沿Y轴正方向平移120
 scene.add(mesh2);
 ​
 // 圆柱网格模型
 var geometry3 = new THREE.CylinderGeometry(50, 50, 100, 25);
 var material3 = new THREE.MeshLambertMaterial({
   color: 0xffff00
 });
 var mesh3 = new THREE.Mesh(geometry3, material3); //网格模型对象Mesh
 // mesh3.translateX(120); //球体网格模型沿Y轴正方向平移120
 mesh3.position.set(120,0,0);//设置mesh3模型对象的xyz坐标为120,0,0
 scene.add(mesh3); //

添加辅助三维坐标系AxisHelper

 // 辅助坐标系  参数250表示坐标系大小，可以根据场景大小去设置
 var axisHelper = new THREE.AxisHelper(250);
 scene.add(axisHelper);