简介：

中文文档：

http://www.webgl3d.cn/Three.js/
gitee 仓库地址：https://gitee.com/mirrors/three.js

是什么？

Three.js是基于原生WebGl API和着色器封装得到的3D引擎，也就是一个.js库。

能做什么？

简单的说：2D、3D 可视化。

相关生态？

WebGL/Canvas/
了解 WebGL/Canvas 可以进行深度的定制，也更好理解 threejs 的概念，但是也不是必要的前提。

程序结构

从程序结构就可以看出来对 threejs 的基本使用方法，例如创建一个基本的立方体：

    // 基础场景
    // 1. 创建场景对象
    const scene = new THREE.Scene();//创建场景对象
    const geometry = new THREE.BoxGeometry(100, 100, 100);//创建立方体几何体对象
    const material = new THREE.MeshLambertMaterial({
        color: 0x0000ff
    })//创建材质对象
    const mesh = new THREE.Mesh(geometry, material);
    scene.add(mesh);//网格模型添加到场景中。
    // 2. 添加光源
    const point = new THREE.PointLight(0xffffff);
    point.position.set(400, 200, 300);
    scene.add(point);
    // 2.1添加环境光
    const ambient = new THREE.AmbientLight(0x444444);
    scene.add(ambient);
    // 3.相机设置
    const width = window.innerWidth;
    const height = window.innerHeight;
    const k = width / height;
    const s = 200;//三维场景显示范围控制系数，系数越大，范围越大。
    const camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000)//创建相机
    camera.position.set(200, 300, 200)//设置相机位置
    camera.lookAt(scene.position);//设置相机方向
    // 4. 创建渲染器对象
    const renderer = new THREE.WebGLRenderer();
    renderer.setSize(width, height);//设置渲染区域;
    renderer.setClearColor(0xb9d3ff);//设置背景色
    document.body.appendChild(renderer.domElement);//绑定dom
    //执行渲染操作，制定场景，相机作为参数。
    renderer.render(scene, camera);

基础应用：

动画

threejs 默认是静态绘制，想要动画即定时重绘。关于定时重绘推荐使用 requestAnimationFrame 函数：

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

requestAnimationFrame 会在下一帧渲染时调用，可以避免过度的刷新频率，也可以避免由于刷新频率过快导致的阻塞。需要注意的是 requestAnimationFrame 刷新的时间间隔并非固定的，不过这个一般不会影响动画。

鼠标三维操作

鼠标的三维操并非封装到 threejs 的内部功能，而是通过插件的机制实现的，这也是 threejs 很多功能的添加方式。
threejs 中的插件都在 three.js-master\examples\js 文件夹中。实现 鼠标三维操作的控件封装在 OrbitControls.js(three.js-master\examples\js\controls) 中。

结合动画用法：

var controls = new THREE.OrbitControls(camera,renderer.domElement);//创建控件对象
//controls.addEventListener('change', ()=>{});//监听鼠标、键盘事件
function render() {
  renderer.render(scene,camera);//执行渲染操作
  requestAnimationFrame(render);//请求再次执行渲染函数render
}
render();