Three.js 快速入门：轻松实现 3D 渲染

前端

2023-07-10 12:56:21

Three.js：掌握 Mesh、几何体和渲染的快速指南

在浩瀚的 JavaScript 图形库中，Three.js 闪耀着夺目的光芒，为 3D 渲染开辟了一条康庄大道。它将 3D 模型无缝集成到你的项目中，赋予你创造逼真场景的超能力，点亮交互式艺术、游戏和可视化的世界。

Mesh：渲染对象的主角

Mesh 渲染对象是 Three.js 舞台上的主角，负责展示几何体的迷人魅力。几何体是构成 3D 模型的基本积木，从简单的立方体到复杂的生物模型，应有尽有。Mesh 渲染对象与几何体携手合作，赋予它们生命力，使之跃然于屏幕之上。

Mesh 的闪亮属性和精彩方法

位置 (position) ：决定了 Mesh 在父对象中的位置，通常是场景 (THREE.Scene) 或对象 3D (THREE.Object3D) 对象。
旋转 (rotation) ：绕着 x、y 或 z 轴旋转，为 Mesh 带来自在的运动。
缩放 (scale) ：均匀或非均匀缩放，让 Mesh 自由变换尺寸。
材质 (material) ：定义了 Mesh 的外观，赋予它颜色、透明度和更多魅力。

Mesh 的炫酷方法

add ：将 Mesh 加入场景，让它闪耀登场。
remove ：从场景中移除 Mesh，暂时让它休息。
updateMatrix ：更新 Mesh 的变换矩阵，确保它的位置和旋转精确无误。
getMatrix ：获取 Mesh 的变换矩阵，方便后续操作。

几何体：Mesh 的形状大师

几何体是 Three.js 中 Mesh 的形状大师，定义了 3D 模型的迷人轮廓。Three.js 自带丰富的几何体库，涵盖立方体、球体、平面等常见形状。但如果你有野心勃勃的创意，也可以通过代码自定义几何体，打造独一无二的形状。

常用的几何体

BoxGeometry ：坚固的立方体几何体。
SphereGeometry ：圆润的球体几何体。
PlaneGeometry ：平坦的平面几何体。
CylinderGeometry ：经典的圆柱体几何体。
ConeGeometry ：优雅的圆锥体几何体。
TorusGeometry ：时尚的圆环体几何体。

自定义几何体的步骤

创建一个新的 THREE.Geometry 对象。
使用 addVertex() 方法添加顶点。
使用 addFace() 方法添加面。
使用 computeFaceNormals() 方法计算面的法线向量。
使用 computeVertexNormals() 方法计算顶点的法线向量。

渲染场景：让你的 3D 世界栩栩如生

渲染场景是让你的 3D 世界栩栩如生的关键一步。Three.js 的 WebGLRenderer 类扮演了渲染大师的角色，将场景中的对象变幻为屏幕上的美丽画面。

渲染场景的步骤

创建一个新的 THREE.WebGLRenderer 对象。
将场景和相机作为参数传递给 renderer.render() 方法。
将画布添加到 HTML 文档中，让世界呈现在你眼前。

代码示例：亲自动手体验 Three.js 的魅力

// 创建场景
const scene = new THREE.Scene();

// 创建几何体
const geometry = new THREE.BoxGeometry(1, 1, 1);

// 创建材质
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });

// 创建 Mesh 渲染对象
const mesh = new THREE.Mesh(geometry, material);

// 将 Mesh 添加到场景中
scene.add(mesh);

// 创建渲染器
const renderer = new THREE.WebGLRenderer();

// 渲染场景
renderer.render(scene, camera);

常见问题解答：解答你的疑惑

如何让 Mesh 旋转？
- 使用 mesh.rotation 属性设置旋转角度。
如何给 Mesh 添加纹理？
- 使用 material.map 属性加载纹理图像。
如何控制 Mesh 的透明度？
- 使用 material.opacity 属性设置透明度值。
如何创建自定义几何体？
- 按照本指南中提到的步骤，通过代码定义顶点和面。
渲染速度太慢，如何优化？
- 减少场景中的对象数量，使用更简单的几何体，并启用 WebGL 硬件加速。

结论：开启你的 Three.js 3D 冒险

踏上 Three.js 的 3D 渲染之旅，解锁一个充满无限可能的创意世界。通过掌握 Mesh、几何体和渲染的基本知识，你将拥有创造令人惊叹的 3D 场景所需的技能。从简单的形状到复杂的模型，Three.js 将为你提供必要的工具，让你的想象力自由驰骋。准备好在 Three.js 的世界中大显身手吧！