一、什么是 three.js

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

二、three.js 能用来做什么

在智慧城市、智慧机场、智慧交通、智慧园区、智慧工地、智慧工厂、智慧农业、智慧文旅、智慧水务中，结合数据采集、数据传输与存储，最终使用 three.js 实现数字孪生，完成数据展示效果。

相信你也发现了，这个反复出现的“智慧”二字，跟 three.js 密不可分，可以说 three.js 是基础，是实现展示效果的根本，也是我们必须要掌握的知识。市面上有各种各样的库，都是基于 three.js 二次封装的。

三、three.js 的三要素

场景(scene)、相机(camera)和渲染器(renderer)，有了这三样 东西，才能搭建一个三维场景，将物体渲染到网页中。

（一）场景(scene)

你可以把三维场景对象理解为虚拟的3D场景，用来表示模拟生活中的真实三维场景,或者说三维世界。

// 创建3D场景对象Scene

const scene = new THREE.Scene();

（二）相机(camera)

如果想把三维场景Scene渲染到web网页上，还需要定义一个虚拟相机Camera，就像拍电影一样，需要在某个地方放置一台用来拍摄的机器。

在 three.js 中，相机分为两种，第一种相机是 PerspectiveCamera 透视相机，使用透视投影的方式进行投影，距离相机越近的物体越大，越远则越小，可以理解为跟现实人眼一样的视觉效果。

• 图片来自网络，侵权请告知，立即删除

// 实例化一个透视投影相机对象

const camera = new THREE.PerspectiveCamera();

第二种相机是 OrthographicCamera 正交投影相机，不同位置被投影出来的大小是一样的。

• 图片来自网络，侵权请告知，立即删除

（三）渲染器(renderer)

生活中如果有了场景和相机，那么如果想获得一张照片，就需要你拿起相机，完成摄影。对于 three.js 而言，如果要完成摄影，就需要一个新的对象，那就是 renderer 渲染器。

// 创建渲染器对象

const renderer = new THREE.WebGLRenderer();

四、结合起来试一下

/* 第一步场景 */
//创建一个长方体几何对象Geometry
const geometry = new THREE.BoxGeometry(100, 100, 100);

//创建一个材质对象Material
const material = new THREE.MeshBasicMaterial({
  color: 0xff0000,//0xff0000设置材质颜色为红色
});

//两个参数分别为几何体geometry、材质material
const mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh

//设置网格模型在三维空间中的位置坐标，默认是坐标原点
mesh.position.set(0,10,0);

//创建3D场景对象Scene
const scene = new THREE.Scene();

scene.add(mesh);


/* 第二步相机 */
//实例化一个透视投影相机对象
const camera = new THREE.PerspectiveCamera();

//相机在Three.js三维坐标系中的位置
//根据需要设置相机位置具体值
camera.position.set(200, 200, 200);

//相机观察目标指向Threejs 3D空间中某个位置
camera.lookAt(mesh.position);//指向mesh对应的位置


/* 第三步渲染器 */
//创建渲染器对象
const renderer = new THREE.WebGLRenderer();

//定义threejs输出画布的尺寸(单位:像素px)
const width = 800; //宽度
const height = 500; //高度
renderer.setSize(width, height); //设置three.js渲染区域的尺寸(像素px)

//执行渲染操作
renderer.render(scene, camera);