【threejs】创建三维物体步骤

创建三维物体的步骤如下：

  1. 创建几何体
  2. 创建材质
  3. 创建网格
  4. 添加到场景

以下将使用 立方体 和 基础材质 作为示例。

创建几何体（Geometry）

创建立方体，几何体决定了物体的形状。

1
2
// 创建立方体（宽，高，深）
const geometry = new THREE.BoxGeometry(1, 1, 1);

创建材质（Material）

创建基础材质，材质决定了物体的 颜色、纹理、光照响应等外观。

1
2
// 创建基础材质（不受光照影响）
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });

创建网格（Mesh）

创建网格需要将几何体和材质传入，然后将网格添加到场景中。

1
2
// 创建网格（传入立方体和材质）
const cube = new THREE.Mesh(geometry, material);

将物体添加到场景（Scene）中

将创建好的网格添加到场景中，使其可见。

1
2
// 将网格添加到场景中
scene.add(cube);

设置物体的位置、旋转和缩放

设置物体的位置、旋转和缩放需要使用物体的 position、rotation 和 scale 属性。

1
2
3
cube.position.set(0, 0, 0); // 设置位置
cube.rotation.set(Math.PI / 4, 0, 0); // 设置旋转（绕 X 轴旋转 45 度）
cube.scale.set(2, 1, 1); // 设置缩放（X 轴放大 2 倍）