第四章 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 的基本用法。在接下来的章节中，我们将进一步探讨更多高级功能和应用。
————————————————
 版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。                        
原文链接：https://blog.csdn.net/imdeity/article/details/139561311