Threejs那些你想知道但不知道的事

2023-12-28 03:48:34

点线面、材质和模型：Three.js 的基础知识

在 Three.js 中驾驭 3D 世界

WebGL 的出现为浏览器打开了渲染复杂 3D 图形的大门。Three.js 作为 JavaScript 的开源库，为开发者们提供了在浏览器中轻松创建和渲染 3D 图形的利器。本指南将带领你踏上探索 Three.js 的旅程，深入了解点线面、材质和模型等基本概念。

点线面：3D 模型的基石

想象一下建造一座房屋，首先需要砖块、木头和钢筋。在 3D 世界中，点、线和面扮演着类似的角色，它们是构成模型的基本元素。在 Three.js 中，你可以使用 BufferGeometry 类创建这些元素。

BufferGeometry 类包含三个核心属性：

attributes：存储点、线和面的属性，如位置、法线和纹理坐标。
index：存储点、线和面的索引，定义它们如何连接。
drawcalls：存储渲染指令，指导 GPU 如何绘制几何体。

代码示例：创建一个简单的点线面几何体

const geometry = new THREE.BufferGeometry();
const vertices = new Float32Array([
  -1.0, -1.0, 1.0,  // 点 1
  1.0, -1.0, 1.0,   // 点 2
  1.0, 1.0, 1.0,    // 点 3
]);
const indices = new Uint16Array([
  0, 1, 2, // 线 1
]);
geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3));
geometry.setIndex(new THREE.BufferAttribute(indices, 1));

材质：定义物体外观

就像油漆为房屋增添色彩，材质为 3D 物体注入生命力。Three.js 中的 Material 类提供了定义物体外观所需的一切属性，包括颜色、透明度、反射率和折射率等。

Three.js 提供了多种内置材质供选择：

BasicMaterial：最基本的材质，用于设置颜色和透明度。
LambertMaterial：兰伯特材质，在考虑光照时用于计算漫反射。
PhongMaterial：冯氏材质，用于计算高光和镜面反射等更高级的着色效果。

代码示例：为几何体添加颜色

const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); // 绿色
const mesh = new THREE.Mesh(geometry, material);

模型：点线面的集合体

模型是点、线和面的集合，形成一个完整的 3D 对象。在 Three.js 中，Mesh 类用于创建模型。Mesh 类拥有以下属性：

geometry：模型的几何体，定义其形状。
material：模型的材质，定义其外观。
matrix：模型的变换矩阵，定义其位置、旋转和缩放。

Three.js 提供了多种内置模型：

SphereGeometry：球体几何体。
BoxGeometry：盒子几何体。
CylinderGeometry：圆柱几何体。

代码示例：创建一个立方体模型

const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0xff0000 }); // 红色
const cube = new THREE.Mesh(geometry, material);