ThreeJS 入门如何渲染出第一个3D图形
什么是ThreeJS？
Three.js 是一个用于在Web浏览器上创建和显示交互式 3D 图形的 JavaScript 库。简化了在 Web 上创建基于 WebGL 的 3D 图形的过程。WebGL 是一种在 Web 浏览器中实现硬件加速的 3D 图形渲染的技术。Three.js 通过封装复杂的WebGL API，提供了一个更简单的接口，使得我们能够轻松地在浏览器中创建 3D 场景、模型、动画和交互效果。
渲染一个 3D 图形需要哪些步骤？
要渲染第一个 3D 图形，需要以下几个步骤：
- 创建场景 scene，使用 THREE.Scene 进行创建。
- 创建相机 camera，使用 THREE.PerspectiveCamera 进行创建。
- 创建渲染对象（以立方体为例），并添加到场景 scene 中。
- 创建渲染器 renderer，并进行场景渲染，使用THREE.WebGLRenderer 进行创建。调用渲染器 render 函数将场景 scene 和相机 camera 作为参数进行渲染。
// 插入一个跳转地址，方便查看完整代码
创建场景
在 Three.js 中，使用 THREE.Scene 来创建 scene（场景），scene包含了所有 3D 对象、光源和相机的容器。它是构建和组织 3D 场景的基础。
场景（THREE.Scene）类代表了一个虚拟的 3D 空间，其中可以包含各种对象，例如几何体、模型、灯光等。通过将对象添加到场景中，可以在渲染过程中将它们呈现到屏幕上。
创建一个简单的场景：
import * as THREE from 'three';
const scene = new THREE.Scene();
实例化后的 scene 对象提供一些列的API来对其中的 3D 对象进行管理，如： scene.add(object: Object3D) 、scene.remove(object: Object3D), scene.traverse(callback: Function) 。还提供对 scene 进行设置和操作的 API 本文暂时未使用到 scene 中其他的API，后续单独写篇文章进行介绍。
创建相机
在 Three.js 中，camera（相机）是用于定义场景中的视角和观察位置的对象。相机确定了渲染器如何将场景中的 3D 对象投影到屏幕上，决定了观察者在场景中看到的内容。使用相机来控制观察者在场景中的位置和视角。在 openGL 中相机的位置固定在（0,0,0）位置，所有的相机移动实际都是对场景中的所有对象进行矩阵变换。
Three.js 提供了多种类型的相机，常用的是透视相机（THREE.PerspectiveCamera）和正交相机（THREE.OrthographicCamera）。
- 透视相机（THREE.PerspectiveCamera）使用透视投影，模拟了人眼的视觉效果。它具有视场角（FOV）、纵横比、近剪裁面和远剪裁面等属性。视场角决定了场景在相机前方可见的范围，纵横比定义了视图的宽高比，近剪裁面和远剪裁面则定义了相机的可见范围。
- 正交相机（THREE.OrthographicCamera）使用正交投影，产生了一个没有透视效果的平行投影。它具有左、右、上、下、近、远等属性，用于定义可见区域的范围。
本文使用透视相机创建一个实例：
const camera = new THREE.PerspectiveCamera(
75,
window.innerWidth / window.innerHeight,
0.1,
1000
);
参数主要如下，THREE.PerspectiveCamera(fov, aspect, near, far)
- fov: 视场角，表示相机的视角张度，单位是度。
- aspect: 纵横比，表示渲染区域的宽高比。
- near： 近剪裁面的距离，表示相机能够看到的最近距离，在近剪裁面之前的3D对象会被裁剪掉。
- far： 远剪裁面，表示相机能够看到的最远距离。在此之后的对象也会被裁剪掉。
不用担心，后续会专门写篇文章进行详细介绍两相机之间的区别，什么是近剪裁面、远剪裁面以及其距离怎么算的。
创建渲染对象（立方体为）
创建一个正立方体：
// 创建绿色的立方体
// 创建立方体几何体
const geometry = new THREE.BoxGeometry(1,1,1);
// 实例化基础的材质，颜色设置为绿色， rgb 每两个十六进制单位分别表示一个基础元色。
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
// 生成一个立方体网格对象，传入几何体对象和颜色材质对象
const cube = new THREE.Mesh(geometry, material);
// 将立方体网格对象添加到场景中
scene.add(cube);
这里涉及到三个新的基类分别是 THREE.BoxGeometry 、 THREE.MeshBasicMaterial 、 THREE.Mesh
- THREE.BoxGeometry 立方几何体，用于创建长方体或者立方体。 ThreeJS 提供 8 种 Shape 类用于创建基本几何体和自定义形状。还提供一些可以扩展的基类，我们可以在这个基类的基础上进行其他封装。openGL 提供的图元实际很基础（点，线，线环，线带，三角形，三角扇，三角带，四边形），ThreeJS 进行的大量封装使得我们更好进行形状生成。（_）以后再开篇进行详细介绍。
- MeshBasicMaterial 基础材质，不受光照影响，只显示颜色。ThreeJS 一共提供了 7 种常用材质对象以及特殊的几种材质比如：粒子材质等。
- Mesh 网格对象，用于将几何体与材质结合起来。ThreeJS 提供 6 种网格对象支持不同的使用场景。
创建渲染器将 scene 渲染出来
创建一个 WebGLRenderer 渲染器渲染scene：
// 创建一个 webgl 渲染器
const renderer = new THREE.WebGLRenderer();
// 设置渲染器的 size
renderer.setSize(window.innerWidth, window.innerHeight);
// 绑定输出位置
document.body.appendChild(renderer.domElement);
// 将 scene 渲染出来
renderer.render(scene, camera);
渲染器是 ThreeJS 的核心组件，将 scene 场景中的三维对象渲染到屏幕上。ThreeJS 提供了三类常用的渲染器 WebGLRenderer 、 CanvasRenderer、SVGRenderer。预计未来可能会支持 WebGPURenderer 现在 Chrome 已经支持 WebGPU 了并且性能比 Webgl 更好一些（反正隔壁 babyIcon 已经支持了v）。
渲染器主要行为大体如下:
- 创建渲染上下文
- 设置渲染参数
- 渲染 scene
- 输出渲染结果到载体（通常都是canvas）
至此已经能渲染一个立方体了，接下来补充一丢丢代码让立方体渲染起来。
const rotateBox = () => {
// 创建 scene 场景
const scene = new THREE.Scene();
// 创建相机
const camera = new THREE.PerspectiveCamera(
75,
window.innerWidth / window.innerHeight,
0.1,
1000
);
// 设置相机的z位置为5 ，位置：（0，0，5)
camera.position.z = 5;
// 创建绿色立方体
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0x00ffa1 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
// 创建渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// 让立方体渲染起来
function animate() {
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
}
animate();
};
完整代码（我在 react 中运行），方便对每篇文章的 demo 进行管理以及ui交互。代码也可以复制到到 HTML 中执行额外添加一行 threejs库的引入即可：
import React, { useEffect } from 'react';
import * as THREE from 'three';
export default function OneDay() {
const rotateBox = () => {
// 创建 scene 场景
const scene = new THREE.Scene();
// 创建相机
const camera = new THREE.PerspectiveCamera(
75,
window.innerWidth / window.innerHeight,
0.1,
1000
);
// 设置相机的z位置为5 ，位置：（0，0，5)
camera.position.z = 5;
// 创建绿色立方体
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0x00ffa1 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
// 创建渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// 让立方体渲染起来
function animate() {
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
}
animate();
};
useEffect(() => {
rotateBox();
}, []);
return <div id="container"></div>
}
立个 flag 后续持续学习更新 threejs 系列文章（每周一篇），欢迎大家关注监督 -
本文由mdnice多平台发布
