1. Three.js 内置几何体详解

Three.js 提供了多种内置几何体，可以快速创建常见的3D形状。以下是主要几何体的详细介绍和使用示例：

1.1. 立方体 (BoxGeometry)

用于创建立方体或长方体，是最常用的几何体之一。

javascript

// 参数：宽度，高度，深度，宽度分段，高度分段，深度分段
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

// 创建一个2x3x1的长方体，每个面细分
const box = new THREE.BoxGeometry(2, 3, 1, 10, 15, 5);

1.2. 球体 (SphereGeometry)

用于创建球体或球体的一部分。

javascript

// 参数：半径，宽度分段，高度分段，起始经度，经度跨度，起始纬度，纬度跨度
const geometry = new THREE.SphereGeometry(1, 32, 16);
const material = new THREE.MeshBasicMaterial({ color: 0xffff00 });
const sphere = new THREE.Mesh(geometry, material);
scene.add(sphere);

// 创建半球体
const hemisphere = new THREE.SphereGeometry(
  1,  // 半径
  32, // 宽度分段（经度分段）
  16, // 高度分段（纬度分段）
  0,  // 起始经度
  Math.PI * 2, // 经度跨度
  0,  // 起始纬度
  Math.PI / 2   // 纬度跨度（半个球）
);

1.3. 圆柱体 (CylinderGeometry)

用于创建圆柱体、圆锥体或其他棱柱体。

javascript

// 参数：顶部半径，底部半径，高度，径向分段，高度分段，是否开放顶部/底部
const geometry = new THREE.CylinderGeometry(0.5, 0.5, 2, 32);
const material = new THREE.MeshBasicMaterial({ color: 0xffff00 });
const cylinder = new THREE.Mesh(geometry, material);
scene.add(cylinder);

// 创建圆锥体（顶部半径为0）
const cone = new THREE.CylinderGeometry(0, 0.5, 2, 32);

// 创建棱柱（分段数减少）
const prism = new THREE.CylinderGeometry(0.5, 0.5, 2, 6);

1.4. 平面 (PlaneGeometry)

用于创建2D平面，常用于地面、墙面等。

javascript

// 参数：宽度，高度，宽度分段，高度分段
const geometry = new THREE.PlaneGeometry(5, 3, 10, 6);
const material = new THREE.MeshBasicMaterial({
  color: 0xffff00,
  side: THREE.DoubleSide // 双面渲染
});
const plane = new THREE.Mesh(geometry, material);
scene.add(plane);

1.5. 圆环 (TorusGeometry)

用于创建圆环或圆环的一部分。

javascript

// 参数：半径，管道半径，径向分段，管道分段，圆环弧度
const geometry = new THREE.TorusGeometry(2, 0.5, 16, 100);
const material = new THREE.MeshBasicMaterial({ color: 0xffff00 });
const torus = new THREE.Mesh(geometry, material);
scene.add(torus);

// 创建部分圆环（四分之三圆环）
const torusKnot = new THREE.TorusGeometry(2, 0.5, 16, 100, Math.PI * 1.5);

1.6. 圆环缓冲 (TorusKnotGeometry)

用于创建环形扭结几何体，比普通圆环更复杂。

javascript

// 参数：半径，管道半径，管道分段，径向分段，p值，q值
const geometry = new THREE.TorusKnotGeometry(1, 0.3, 100, 16, 2, 3);
const material = new THREE.MeshNormalMaterial();
const torusKnot = new THREE.Mesh(geometry, material);
scene.add(torusKnot);

1.7. 圆锥 (ConeGeometry)

专门用于创建圆锥体，是圆柱体的特例。

javascript

// 参数：底部半径，高度，径向分段，高度分段，是否开放底部
const geometry = new THREE.ConeGeometry(1, 2, 32);
const material = new THREE.MeshBasicMaterial({ color: 0xffff00 });
const cone = new THREE.Mesh(geometry, material);
scene.add(cone);

1.8. 圆 (CircleGeometry)

用于创建圆形平面。

javascript

// 参数：半径，分段数，起始角度，角度跨度
const geometry = new THREE.CircleGeometry(2, 32);
const material = new THREE.MeshBasicMaterial({
  color: 0xffff00,
  side: THREE.DoubleSide
});
const circle = new THREE.Mesh(geometry, material);
scene.add(circle);

1.9. 四面体 (TetrahedronGeometry)

用于创建四面体（金字塔形状）。

javascript

// 参数：半径，细节层次
const geometry = new THREE.TetrahedronGeometry(1, 0);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const tetrahedron = new THREE.Mesh(geometry, material);
scene.add(tetrahedron);

1.10. 八面体 (OctahedronGeometry)

用于创建八面体。

javascript

const geometry = new THREE.OctahedronGeometry(1, 0);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const octahedron = new THREE.Mesh(geometry, material);
scene.add(octahedron);

1.11. 十二面体 (DodecahedronGeometry)

用于创建十二面体。

javascript

const geometry = new THREE.DodecahedronGeometry(1, 0);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const dodecahedron = new THREE.Mesh(geometry, material);
scene.add(dodecahedron);

1.12. 二十面体 (IcosahedronGeometry)

用于创建二十面体。

javascript

const geometry = new THREE.IcosahedronGeometry(1, 0);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const icosahedron = new THREE.Mesh(geometry, material);
scene.add(icosahedron);

1.13. 管状体 (TubeGeometry)

沿着三维曲线创建管状体。

javascript

// 创建一条三维曲线
class CustomSinCurve extends THREE.Curve {
  constructor(scale = 1) {
    super();
    this.scale = scale;
  }

  getPoint(t) {
    const tx = t * 3 - 1.5;
    const ty = Math.sin(2 * Math.PI * t);
    const tz = 0;
    return new THREE.Vector3(tx, ty, tz).multiplyScalar(this.scale);
  }
}

const path = new CustomSinCurve(2);
// 参数：路径，管状体分段，半径，径向分段，是否闭合
const geometry = new THREE.TubeGeometry(path, 20, 0.2, 8, false);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const tube = new THREE.Mesh(geometry, material);
scene.add(tube);

1.14. 文本几何体 (TextGeometry)

用于创建3D文本（需要加载字体）。

javascript

// 需要先加载字体
import { FontLoader } from 'three/examples/jsm/loaders/FontLoader.js';
import { TextGeometry } from 'three/examples/jsm/geometries/TextGeometry.js';

const loader = new FontLoader();
loader.load('fonts/helvetiker_regular.typeface.json', function(font) {
  const geometry = new TextGeometry('Hello Three.js', {
    font: font,
    size: 1,
    height: 0.2,
    curveSegments: 12,
    bevelEnabled: true,
    bevelThickness: 0.03,
    bevelSize: 0.02,
    bevelSegments: 5
  });

  const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
  const text = new THREE.Mesh(geometry, material);
  scene.add(text);
});

2. 综合示例：创建多个几何体

javascript

// 创建场景、相机和渲染器
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 添加环境光
const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(ambientLight);

// 添加平行光
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
directionalLight.position.set(0, 1, 0);
scene.add(directionalLight);

// 创建多个几何体
const geometries = [
  { geometry: new THREE.BoxGeometry(1, 1, 1), position: [-3, 0, 0], color: 0xff0000 },
  { geometry: new THREE.SphereGeometry(0.7, 32, 16), position: [-1, 0, 0], color: 0x00ff00 },
  { geometry: new THREE.CylinderGeometry(0.5, 0.5, 1.5, 32), position: [1, 0, 0], color: 0x0000ff },
  { geometry: new THREE.ConeGeometry(0.7, 1.5, 32), position: [3, 0, 0], color: 0xffff00 },
  { geometry: new THREE.TorusGeometry(0.7, 0.2, 16, 100), position: [0, 2, 0], color: 0xff00ff }
];

geometries.forEach(obj => {
  const material = new THREE.MeshStandardMaterial({ color: obj.color });
  const mesh = new THREE.Mesh(obj.geometry, material);
  mesh.position.set(...obj.position);
  scene.add(mesh);
});

camera.position.z = 5;

// 动画循环
function animate() {
  requestAnimationFrame(animate);

  // 旋转所有几何体
  scene.children.forEach(child => {
    if (child.isMesh) {
      child.rotation.x += 0.01;
      child.rotation.y += 0.01;
    }
  });

  renderer.render(scene, camera);
}

animate();

3. 性能优化建议

1. 合理使用分段数：较高的分段数会产生更平滑的曲面，但会增加顶点和面数，降低性能。

2. 重用几何体：如果场景中有多个相同形状的对象，应重用几何体实例。

3. 使用BufferGeometry：所有内置几何体都是BufferGeometry的子类，性能更优。

4. 合并几何体：对于静态对象，可以使用BufferGeometryUtils.mergeBufferGeometries()合并。

这些内置几何体是Three.js开发的基础，熟练掌握它们可以快速创建各种3D场景和效果。