Three.js是一个基于原生WebGl封装运行的三维引擎，是国内使用最广泛，中文参考文档最多的三维引擎。学习Three.js首先掌握基础概念什么是点、线、面、几何体、材质、物体、场景、相机、渲染器、动画、控制器等基础概念，搞定一个最基础的场景和3d物体的显示。接着学会调试3D开发代码。接着即可深入上述概念的每一个概念，详细了解官网文档该类的各种属性与概念。

Three.js官网 threejs.org/

Three.js初试

项目搭建

创建项目

npm init -y
npm install parcel-bundler --save-dev
npm install three --save

运行

npm run dev

创建场景

为了将三维物体渲染在二维平面上，我们需要以下几个对象：场景、相机和渲染器。

import * as THREE from 'three';
const scene = new THREE.Scene();

创建相机

Three.js里有几种不同的相机，在这里，我们使用的是PerspectiveCamera（透视摄像机）。

第一个参数是视野角度（FOV）。视野角度就是无论在什么时候，你所能在显示器上看到的场景的范围，它的单位是角度(与弧度区分开)。第二个参数是长宽比（aspect ratio）。也就是你用一个物体的宽除以它的高的值。接下来的两个参数是近截面（near）和远截面（far）。

const camera = new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.1,1000);
// 设置相机位置
camera.position.set(0,0,10);
scene.add(camera);

添加物体

在这里，我们要创建一个立方体，我们需要一个BoxGeometry（立方体）对象. 这个对象包含了一个立方体中所有的顶点（vertices）和面（faces）。对于这个立方体，我们需要给它一个材质，来让它有颜色。Three.js自带了几种材质，在这里我们使用的是MeshBasicMaterial。

// 创建几何体
const cubeGeometry = new THREE.BoxGeometry(1,1,1);
const cubeMaterial = new THREE.MeshBasicMaterial({color: 0xffff00});
// 根据几何体和材质创建物体
const cube = new THREE.Mesh(cubeGeometry,cubeMaterial);
// 将几何体添加到场景中
scene.add(cube);

渲染立方体

使用WebGLRenderer创建一个渲染器实例，并且设置渲染器的尺寸。

// 初始化渲染器
const renderer = new THREE.WebGLRenderer()
// 设置渲染的尺寸大小
renderer.setSize(window.innerWidth,window.innerHeight);

最后一步我们将renderer（渲染器）的dom元素（renderer.domElement）添加到我们的HTML文档中。这就是渲染器用来显示场景给我们看的<canvas>元素。

// 将webgl渲染的canvas添加到body
document.body.appendChild(renderer.domElement);
// 使用渲染器，通过相机将场景渲染出来
renderer.render(scene,camera);

最终效果如下图所示。

应用场景

3D可视化
产品在线预览
数据可视化
微信小程序
WebVR
游戏开发

Three.js入门