【三维可视化】three.js笔记之（一）入门篇

介绍

three.js 是基于原生 WebGL 封装和运行的三维引擎，也是国内中文资料最多、使用最广泛的三维引擎。

相关示例请见此文。

安装和导入

通过 NPM 安装本体和轨道控件：

npm install -S three three-orbit-controls

导入：

// CommonJS
const Three = require('three');
Three.OrbitControls = require('three-orbit-controls');

// ES6
import * as Three from 'three';
import * as OrbitControls from 'three-orbit-controls';
Three.OrbitControls = OrbitControls;

或直接从示例文件夹中导入轨道控件：

import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';

并非所有的浏览器都支持 WebGL。因此，建议在使用 three.js 前，参考此文对浏览器进行 WebGL 兼容性检查。

使用

绘制场景

一个 3D 场景的渲染流程为：

1. 几何体（Geometry） + 材质（Material） => 网格模型（Mesh）；
2. 网格模型（Mesh） + 光源（Light） => 添加到场景（Scene）；
3. 场景（Scene） + 相机（Camera） => 经过**渲染器（Renderer）**渲染 => 得到渲染图。

以如下代码为例：

// 创建几何体、材质，进而创建网格模型（物体），如：
// 长方体 + 镜面 => 镜子，
// 球体 + 皮面 => 篮球，
// 圆柱体 + 金属面 => 金箍棒
const geometry = new Three.BoxGeometry(100, 100, 100);
const material = new Three.MeshLambertMaterial({ color: 'red' });
const mesh = new Three.Mesh(geometry, material);

// 创建和设置光源
const light = new Three.PointLight('white');
light.position.set(200, 200, 200);

// 创建场景，并将网格模型和光源添加到场景中
const scene = new Three.Scene();
scene.add(mesh, light);

// 创建和设置相机
const { innerWidth, innerHeight } = window;
const camera = new Three.PerspectiveCamera(45, innerWidth / innerHeight);
camera.position.set(200, 200, 200);
camera.lookAt(scene.position);

// 创建渲染器，并执行渲染
const renderer = new Three.WebGLRenderer();
renderer.setSize(innerWidth, innerHeight);
renderer.setClearColor('whitesmoke');
renderer.render(scene, camera);

// 将渲染出的canvas节点添加到页面中
document.querySelector('#container').appendChild(renderer.domElement);

绘制辅助坐标系

为方便调试，可向场景中添加辅助坐标系：

const axisHelper = new Three.AxisHelper(200);
scene.add(axisHelper);

红轴、绿轴和蓝轴分别对应三维场景中的着 X 轴、Y 轴和 Z 轴。

实现周期动画

每执行一次renderer.render()，便会渲染出一帧图像。因此，可利用setInterval或requestAnimationFrame实现周期动画：

// 1.利用计时器
function render() {
  renderer.render(scene, camera);
  mesh.rotateY(0.01);
}
setInterval(render, 16);

// 2.利用动画（推荐）
function render() {
  renderer.render(scene, camera);
  mesh.rotateY(0.01);
  requestAnimationFrame(render);
}
render();

实现旋转缩放操作

借助轨道控件对相机进行调整，以实现场景的旋转和缩放操作：

const orbitControl = new Three.OrbitControls(camera);

参考

• Three.js 中文文档。