Three.js入門-常見幾何體

calmound發表於2024-11-30
JS

這章節，我們將介紹 Three.js 中常見的幾何體（Geometry），包括立方體、球體、圓柱體、平面、圓環、圓錐體等。幾何體是構建 3D 模型的基礎元素，透過不同的幾何體可以建立出各種形狀的物體。

在 Three.js 中，幾何體是由頂點、面、法線等資料組成的，透過材質（Material）的渲染，可以將幾何體顯示在螢幕上。不同的幾何體有不同的屬性和用途，可以根據需求選擇合適的幾何體來構建 3D 場景。

1. BoxGeometry（立方體幾何體）

函式：

THREE.BoxGeometry(
  width,
  height,
  depth,
  widthSegments,
  heightSegments,
  depthSegments
);

引數：

  • width：立方體的寬度（預設為 1）。
  • height：立方體的高度（預設為 1）。
  • depth：立方體的深度（預設為 1）。
  • widthSegments：水平分段數（預設為 1）。
  • heightSegments：垂直分段數（預設為 1）。
  • depthSegments：深度分段數（預設為 1）。
const geometry = new THREE.BoxGeometry(5, 5, 5); // 建立一個寬為5、高為5、深為5的立方體
const material = new THREE.MeshStandardMaterial({ color: 0x00ff00 }); // 建立支援燈光的綠色材質
const cube = new THREE.Mesh(geometry, material); // 將幾何體和材質組合成網格物體
scene.add(cube); // 將立方體新增到場景中

file

2. SphereGeometry（球體幾何體）

  • 函式：
THREE.SphereGeometry(
  radius,
  widthSegments,
  heightSegments,
  phiStart,
  phiLength,
  thetaStart,
  thetaLength
);
  • 引數：
    • radius：球體的半徑（預設值為 1）。
    • widthSegments：球體的經度分段數，越大越平滑（預設值為 8）。
    • heightSegments：球體的緯度分段數，越大越平滑（預設值為 6）。
    • phiStart：開始的經度角度（預設為 0）。
    • phiLength：經度的弧長（預設為 Math.PI * 2）。
    • thetaStart：開始的緯度角度（預設為 0）。
    • thetaLength：緯度的弧長（預設為 Math.PI）。
const geometry = new THREE.SphereGeometry(5, 32, 32); // 建立半徑為5的球體，32段緯度和經度
const material = new THREE.MeshStandardMaterial({ color: 0x0000ff }); // 建立藍色材質
const sphere = new THREE.Mesh(geometry, material); // 建立球體物體
scene.add(sphere); // 將球體新增到場景中

file

3. CylinderGeometry（圓柱體幾何體）

函式：

THREE.CylinderGeometry(
  radiusTop,
  radiusBottom,
  height,
  radialSegments,
  heightSegments,
  openEnded,
  thetaStart,
  thetaLength
);

引數：

  • radiusTop：圓柱頂部的半徑（預設值為 1）。
  • radiusBottom：圓柱底部的半徑（預設值為 1）。
  • height：圓柱的高度（預設值為 1）。
  • radialSegments：圓柱的圓周分段數（預設值為 8）。
  • heightSegments：圓柱的垂直分段數（預設值為 1）。
  • openEnded：是否是開口的圓柱（預設為 false）。
  • thetaStart：開始的角度（預設為 0）。
  • thetaLength：角度的弧長（預設為 Math.PI * 2）。
const geometry = new THREE.CylinderGeometry(3, 3, 10, 32); // 建立半徑為3，高度為10的圓柱體
const material = new THREE.MeshStandardMaterial({ color: 0xff0000 }); // 建立紅色材質
const cylinder = new THREE.Mesh(geometry, material); // 建立圓柱體物體
scene.add(cylinder); // 將圓柱體新增到場景中

file

4. PlaneGeometry（平面幾何體）

函式：

THREE.PlaneGeometry(width, height, widthSegments, heightSegments);

引數：

  • width：平面的寬度（預設值為 1）。
  • height：平面的高度（預設值為 1）。
  • widthSegments：平面的水平分段數（預設值為 1）。
  • heightSegments：平面的垂直分段數（預設值為 1）。
  • side：平面材質的顯示面，THREE.FrontSide（正面），THREE.BackSide（背面），THREE.DoubleSide（兩面）。
const geometry = new THREE.PlaneGeometry(10, 10); // 建立寬為10，高為10的平面
const material = new THREE.MeshStandardMaterial({
  color: 0x00ffff,
  side: THREE.DoubleSide,
}); // 建立青色材質，雙面渲染
const plane = new THREE.Mesh(geometry, material); // 建立平面物體
scene.add(plane); // 將平面新增到場景中

file

5. TorusGeometry（圓環幾何體）

函式：

THREE.TorusGeometry(radius, tube, radialSegments, tubularSegments, arc);

引數：

  • radius：圓環的主半徑（預設值為 1）。
  • tube：圓環的管道半徑（預設值為 0.4）。
  • radialSegments：圓環的徑向分段數（預設值為 8）。
  • tubularSegments：管道的圓周分段數（預設值為 6）。
  • arc：圓環的弧度範圍（預設為 Math.PI * 2）。
const geometry = new THREE.TorusGeometry(5, 1, 16, 100); // 建立半徑為5，管道半徑為1的圓環
const material = new THREE.MeshStandardMaterial({ color: 0xffff00 }); // 建立黃色材質
const torus = new THREE.Mesh(geometry, material); // 建立圓環體
scene.add(torus); // 將圓環體新增到場景中

file

6. ConeGeometry（圓錐體幾何體）

函式：

THREE.ConeGeometry(
  radius,
  height,
  radialSegments,
  heightSegments,
  openEnded,
  thetaStart,
  thetaLength
);

引數：

- `radius`：圓錐底部的半徑（預設值為 1）。
- `height`：圓錐的高度（預設值為 1）。
- `radialSegments`：圓錐底部的分段數（預設值為 8）。
- `openEnded`：是否是開口的圓錐（預設為 `false`）。
- `thetaStart`：圓錐開始的角度（預設為 0）。
- `thetaLength`：圓錐的角度弧長（預設為 Math.PI * 2）。

const geometry = new THREE.ConeGeometry(5, 10, 32); // 建立半徑為5，高度為10的圓錐
const material = new THREE.MeshStandardMaterial({ color: 0xff00ff }); // 建立紫色材質
const cone = new THREE.Mesh(geometry, material); // 建立圓錐物體
scene.add(cone); // 將圓錐新增到場景中

file

7. Custom Geometry（自定義幾何體）

函式：

THREE.BufferGeometry();

引數：THREE.BufferGeometry 是一個高階構造器，允許你手動指定頂點資料和其他幾何資訊。常見的自定義屬性包括：

- `position`：頂點的位置資料。
- `normal`：法線資料。
- `uv`：紋理座標資料。

const geometry = new THREE.BufferGeometry();
const vertices = new Float32Array([
  0,
  0,
  0, // 頂點1
  1,
  0,
  0, // 頂點2
  0,
  1,
  0, // 頂點3
]);
geometry.setAttribute("position", new THREE.BufferAttribute(vertices, 3)); // 設定頂點資料
const material = new THREE.MeshStandardMaterial({ color: 0x00ff00 }); // 建立材質
const mesh = new THREE.Mesh(geometry, material); // 建立網格物體
scene.add(mesh); // 新增到場景

file

8. 總結

  • 在 Three.js 中，幾何體是構建 3D 模型的基礎元素。透過組合不同的幾何體，可以構建出更復雜的物體。對不同幾何體的熟悉和應用，可以幫助我們快速構建 3D 場景。
  • 除了標準幾何體外，BufferGeometry 提供了更強的定製能力，可以滿足更復雜的需求。
  • 透過調整不同幾何體的細節（如分段數、引數等），可以在效能和渲染效果之間找到平衡。

Three.js學習：https://www.threejs3d.com/

相關文章