一、Three.js介绍

1. 是什么

Three.js 是一款 webGL框架，由于其易学易用性，而慢慢得到了广泛的应用。Three.js功能非常强大，它封装了3D图形编程中常用的对象，以供我们简单、直观的使用。由于它是开源的，我们可以在github上找到他的源代码。如果用一句话概括，就是： Three.js 是一个能够实现3D效果的JS库存。

2. 应用场景

three.js的应用还是很广泛的，例如：小游戏、产品展示、物联网、数字孪生、智慧城市园区、机械、建筑、全景看房、GIS等。本人作为一名前端程序媛，在招聘上也经常会看到有些岗位需要会three.js的技术栈，因此打算入坑学习学习。

二、学习前准备

1. 中文官网地址

threejs.org/docs/index.…

2. 文件包下载

地址：github.com/mrdoob/thre…
项目中有两个比较重要的文件夹： doc 和 examples，分别对应的是文档和示例。对three.js 学习最好的方法就是看官方文档，并结合其提供的examples例子进行学习。

3. 环境搭建 - 本地静态服务器

像平常项目开发一样，使用webpack和vite 搭建
通过代码编辑器快速创建本地静态服务器，比如像我使用vscode，就可以安装 live-server 插件来实现。
直接使用命令： npm install live-server -g 安装live-server ，然后在项目根目录下通过 liver-server 命令来启动就可以了。

三、创建一个简单的3D场景实例

在讲解之前，先看一个简单的3D场景demo

// 引入three.js
import * as THREE from 'three';

// width和height用来设置Three.js输出的Canvas画布尺寸(像素px)
const width = 800; //宽度
const height = 500; //高度

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

/**
 *  2. 创建网格模型
 */
// 2.1 创建一个长方体几何对象Geometry
const geometry = new THREE.BoxGeometry(50, 50, 50);
// 2.3 材质对象Material
const material = new THREE.MeshBasicMaterial({
    color: 0xeeeeee, //设置材质颜色
});
// 2.4 网格模型对象Mesh
const mesh = new THREE.Mesh(geometry, material);
// mesh.position.set(0,10,0); // 设置网络模型位置
// 2.5 网格模型添加到场景中
scene.add(mesh);

/**
 *  3. 透视投影相机设置
 */
const camera = new THREE.PerspectiveCamera(30, width / height, 1, 3000);
camera.position.set(292, 344, 185); //相机在Three.js三维坐标系中的位置
camera.lookAt(0, 0, 0); //相机观察目标指向Three.js坐标系原点

/**
 *  4. 创建渲染器对象
 */
const renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height); //设置three.js渲染区域的尺寸(像素px)
renderer.render(scene, camera); //执行渲染操作

/**
 *  5. 插入到dom中
 */
document.body.appendChild(renderer.domElement);

四、虚拟场景、虚拟相机、渲染器、投影图

4.1 虚拟场景

实例代码中以下代码创建了一个场景

const scene = new THREE.Scene();

有了三维场景后，我们可以在场景里面添加物体。其步骤分为：

定义了物体对象，如使用：BoxGeometry
定义物体材质，如使用： MeshBasicMaterial
整合生成网格对象，如： new THREE.Mesh(geometry, material)
将网格对象添加到场景中,如： scene.add(mesh)

拓展：常见几何体

拓展：下面列举了些常用材质

4.2 虚拟相机

定义场景后，我们需要使用相机进行拍照，然后获取到一张图片，交给渲染器执行渲染。虚拟相机可以理解为我们日常拍照的相机。

4.2.1 以投影相机（PerspectiveCamera）为例，步骤：

实例化一个相机对象

const camera = new THREE.PerspectiveCamera();

设置相机位置

camera.position.set(200, 200, 200);

拍照

camera.lookAt(0, 10, 0);  //y轴上位置10

4.2.2 透视相机 PerspectiveCamera

这一投影模式被用来模拟人眼所看到的景象，他是3D场景的渲染中使用得最普遍的投影模式

const camera = new THREE.PerspectiveCamera( 45, width / height, 1, 1000 ); 
scene.add( camera );

PerspectiveCamera( fov : Number, aspect : Number, near : Number, far : Number ) 参数解析：

fov: 摄像机视锥体垂直视野角度
aspect: 摄像机视锥体长宽比
near: 摄像机视锥体近端面
far: 摄像机视锥体远端面

4.3 渲染器和投影图

创建 WebGLRender 渲染器对象

const renderer = new THREE.WebGLRenderer();

设置Canvas画布大小(通常setSize的参数值width 和 height 是对应画布的宽高）

renderer.setSize(width, height); //设置three.js渲染区域的尺寸(像素px)

执行渲染器的渲染方法: render ( scene : Object3D, camera : Camera ) : undefined

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

渲染结果挂载到DOM上显示

document.body.appendChild(renderer.domElement);

WebGLRender对象上有个domElement属性，可以获取到所绘制的canvas画布，这样我们就可以使用js将画布插入dom中，就可以在浏览器上显示了。下面是直接将画布插入到body里，开发过程中可以根据实际情况插入任意位置

Three.js 入门学习