当前位置：首页 > news >正文

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

news 来源：原创 2024/9/29 15:22:41

本章将介绍如何使用 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; // 将环形几何体移动到球体的右侧