简介
Three.js是基于原生WebGL封装运行的三维引擎。主要用于实现3D可视化。
引用
和其他的js用法一样,可以script引用外部three.js文件地址,或者将文件下载到本地引入。也可以通过模块来引入:
- 通过npm来安装:npm install three
- 导入模块:
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
- npm install http-server -g
- http-server . -p 8000
本地服务器运行之后,便可通过ip访问本地文件。
完整使用场景
- .html文件引入three.js引擎
- 创建场景对象Scene
- 创建网格模型Mesh。网格模型又包含几何对象geometry和材质对象Material两个方面。通过add方法将网格模型添加到场景中。
- 光源设置。点光源PointLight、环境光对象AmbientLight,作为场景的子对象add插入到场景中。
- 相机设置
- 创建渲染器对象
- 执行渲染操作
整个程序的结构
动画周期性渲染
渲染出场景对象后,想到达到动画效果,还需要进行周期性渲染。最普遍的周期执行就是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等方式设置不同地位置坐标属性。