第四章 Three.js 绘制基本几何体

本章将介绍如何使用 Three.js 绘制各种基本几何体，包括立方体、球体、圆柱体、圆锥体、平面和环形几何体。我们将详细讲解每种几何体的创建方法，并通过示例代码展示如何将它们添加到场景中。

4.1 立方体 (BoxGeometry)

立方体是最基础的几何体之一。Three.js 提供了 THREE.BoxGeometry 类来创建立方体。

4.1.1 创建立方体

创建一个立方体并将其添加到场景中：

import * as THREE from 'three';

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

// 创建相机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;

// 创建渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 创建立方体几何体
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);

// 渲染场景
function animate() {
    requestAnimationFrame(animate);
    cube.rotation.x += 0.01; // 旋转立方体
    cube.rotation.y += 0.01;
    renderer.render(scene, camera);
}
animate();

4.2 球体 (SphereGeometry)

球体是常见的几何体，Three.js 提供了 THREE.SphereGeometry 类来创建球体。

4.2.1 创建球体

创建一个球体并将其添加到场景中：

// 创建球体几何体
const sphereGeometry = new THREE.SphereGeometry(1, 32, 32);

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

// 创建网格
const sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);

// 将网格添加到场景
scene.add(sphere);

// 调整球体位置
sphere.position.x = 2; // 将球体移动到立方体的右侧

4.3 圆柱体 (CylinderGeometry)

圆柱体是一个具有圆形底面和顶面的几何体，Three.js 提供了 THREE.CylinderGeometry 类来创建圆柱体。

4.3.1 创建圆柱体

创建一个圆柱体并将其添加到场景中：

// 创建圆柱体几何体
const cylinderGeometry = new THREE.CylinderGeometry(1, 1, 2, 32);

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

// 创建网格
const cylinder = new THREE.Mesh(cylinderGeometry, cylinderMaterial);

// 将网格添加到场景
scene.add(cylinder);

// 调整圆柱体位置
cylinder.position.x = -2; // 将圆柱体移动到立方体的左侧

4.4 圆锥体 (ConeGeometry)

圆锥体是一个具有圆形底面和顶点的几何体，Three.js 提供了 THREE.ConeGeometry 类来创建圆锥体。

4.4.1 创建圆锥体

创建一个圆锥体并将其添加到场景中：

// 创建圆锥体几何体
const coneGeometry = new THREE.ConeGeometry(1, 2, 32);

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

// 创建网格
const cone = new THREE.Mesh(coneGeometry, coneMaterial);

// 将网格添加到场景
scene.add(cone);

// 调整圆锥体位置
cone.position.x = -4; // 将圆锥体移动到圆柱体的左侧

4.5 平面 (PlaneGeometry)

平面是一个二维的几何体，Three.js 提供了 THREE.PlaneGeometry 类来创建平面。

4.5.1 创建平面

创建一个平面并将其添加到场景中：

// 创建平面几何体
const planeGeometry = new THREE.PlaneGeometry(5, 5);

// 创建材质
const planeMaterial = new THREE.MeshBasicMaterial({ color: 0x00ffff, side: THREE.DoubleSide });

// 创建网格
const plane = new THREE.Mesh(planeGeometry, planeMaterial);

// 将网格添加到场景
scene.add(plane);

// 调整平面位置
plane.position.y = -2; // 将平面移动到立方体的下方
plane.rotation.x = Math.PI / 2; // 将平面旋转至水平

4.6 环形几何体 (TorusGeometry)

环形几何体是一个具有环形截面的几何体，Three.js 提供了 THREE.TorusGeometry 类来创建环形几何体。

4.6.1 创建环形几何体

创建一个环形几何体并将其添加到场景中：

// 创建环形几何体
const torusGeometry = new THREE.TorusGeometry(1, 0.4, 16, 100);

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

// 创建网格
const torus = new THREE.Mesh(torusGeometry, torusMaterial);

// 将网格添加到场景
scene.add(torus);

// 调整环形几何体位置
torus.position.x = 4; // 将环形几何体移动到球体的右侧

总结

在本章中，我们介绍了如何使用 Three.js 创建和渲染基本几何体，包括立方体、球体、圆柱体、圆锥体、平面和环形几何体。通过这些基础几何体的学习，你已经掌握了 Three.js 的基本用法。在接下来的章节中，我们将进一步探讨更多高级功能和应用。