three.js学习笔记

简介

Three.js是基于原生WebGL封装运行的三维引擎。主要用于实现3D可视化。

引用

和其他的js用法一样，可以script引用外部three.js文件地址，或者将文件下载到本地引入。也可以通过模块来引入：

1. 通过npm来安装：npm install three
2. 导入模块:
   var THREE = require(‘three’);
   var scene = new THREE.Scene();
   或者直接使用ES6 import方式导入：
   import * as THREE from ‘three’;
   const scene = new THREE.Scene();

运行

可以直接双击html文件打开，但如果载入了外部文件，由于浏览器的同源策略安全限制，也就是常说的跨域问题，会抛出安全性异常。
因此，我们可以运行一个本地服务器：
node.js serve

1. npm install http-server -g
2. http-server . -p 8000
   本地服务器运行之后，便可通过ip访问本地文件。

完整使用场景

1. .html文件引入three.js引擎
2. 创建场景对象Scene
3. 创建网格模型Mesh。网格模型又包含几何对象geometry和材质对象Material两个方面。通过add方法将网格模型添加到场景中。
4. 光源设置。点光源PointLight、环境光对象AmbientLight，作为场景的子对象add插入到场景中。
5. 相机设置
6. 创建渲染器对象
7. 执行渲染操作

整个程序的结构

动画周期性渲染

渲染出场景对象后，想到达到动画效果，还需要进行周期性渲染。最普遍的周期执行就是setInterval()。比如周期性调用渲染操作，从而行程动画效果：
setInterval(“render()”,20)。
但实际开发中，渲染频率不易把握，所以可以使用requestAnimationFrame()函数代替，它也是浏览器window对象的方法。
一般默认保持60FPS的频率，大约每16.7ms调用一次。

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

均匀动画

实际执行时，执行频率和渲染时间间隔不一定按理想频率执行，所以需要记录间隔，以实际时间赋值动画变幻时间，以保证动画的连续均匀。

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();

鼠标操作三维场景

引入控件OrbitControls.js，可在资源链接下载，也可直接引用在线文件地址http://www.yanhuangxueyuan.com/threejs/examples/js/controls/OrbitControls.js。

tips:由于requestAnimationFrame()会实现渲染器渲染方法render()的周期性调用，会不停地调用渲染函数。所以不要同时使用controls.addEventListener(‘change’, render)调用同一个函数，这样会冲突。

场景显示多个几何体

用不同地变量定义网格模型Mesh即刻。同时通过translate和position.set等方式设置不同地位置坐标属性。