几何体
Geometry
你将学到什么
- Three.js 常用 内置几何体 及构造参数
- 多个 Mesh 共享同一 Material、不同 Geometry 的用法
OrbitControls配合change事件的手动渲染模式
效果说明
场景中沿 Z 轴排列五个红色物体：长方体、球体、圆柱、矩形平面、圆形平面。可通过鼠标旋转观察各形状差异。
核心概念
Geometry 只描述形状（顶点、面、UV），不包含颜色或纹理。外观由 Material 决定。
| 几何体 | 构造参数 | 说明 |
|---|---|---|
BoxGeometry(w,h,d) | 宽高深 | 六面体 |
SphereGeometry(r, wSeg, hSeg) | 半径、经纬分段 | 球体，分段越高越圆 |
CylinderGeometry(rTop,rBot,h, radialSeg) | 上下半径、高度 | 圆柱/圆台 |
PlaneGeometry(w, h, wSeg, hSeg) | 宽高、细分 | 默认 XY 平面 |
CircleGeometry(r, segments) | 半径、分段 | 圆形面片 |
多个 mesh 可以 共用同一个 material 实例（节省 GPU 状态切换），但 geometry 通常各自独立。
实现步骤
- 创建 5 种 Geometry，各自对应一个 Mesh
- 沿 Z 轴
position.set(0, 0, n*30)错开排列 - 添加 OrbitControls，
change时手动render（本案例未开 rAF 循环）
代码要点
js
const geometry1 = new THREE.BoxGeometry(10, 10, 10);
const geometry2 = new THREE.SphereGeometry(10);
const geometry3 = new THREE.CylinderGeometry(10, 10, 100);
const geometry4 = new THREE.PlaneGeometry(10, 50);
const geometry5 = new THREE.CircleGeometry(10);
// 同一 material，五个 mesh
const material = new THREE.MeshBasicMaterial({ color: 0xff0000 });
const mesh1 = new THREE.Mesh(geometry1, material);
mesh1.position.set(0, 0, 0);
// ... mesh2~5 沿 Z 轴偏移PlaneGeometry 默认朝向
PlaneGeometry 默认在 XY 平面（法线朝 +Z）。若需要地面，通常 mesh.rotation.x = -Math.PI / 2。
源码
完整源码见 在线案例。核心结构如下：
js
import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
const scene = new THREE.Scene();
const geometry1 = new THREE.BoxGeometry(10, 10, 10);
const geometry2 = new THREE.SphereGeometry(10);
const geometry3 = new THREE.CylinderGeometry(10, 10, 100);
const geometry4 = new THREE.PlaneGeometry(10, 50);
const geometry5 = new THREE.CircleGeometry(10);
const material = new THREE.MeshBasicMaterial({ color: 0xff0000 });
const mesh1 = new THREE.Mesh(geometry1, material);
mesh1.position.set(0, 0, 0);
const mesh2 = new THREE.Mesh(geometry2, material);
mesh2.position.set(0, 0, 30);
// ... mesh3~5 同理
scene.add(mesh1, mesh2, mesh3, mesh4, mesh5);
const axesHelper = new THREE.AxesHelper(150);
scene.add(axesHelper);
const camera = new THREE.PerspectiveCamera();
camera.position.set(400, 300, 500);
camera.lookAt(0, 50, 40);
const renderer = new THREE.WebGLRenderer();
const box = document.getElementById('box');
renderer.setSize(box.clientWidth, box.clientHeight);
box.appendChild(renderer.domElement);
const controls = new OrbitControls(camera, renderer.domElement);
controls.addEventListener('change', () => renderer.render(scene, camera));
renderer.render(scene, camera);小结
- 内置几何体适合快速原型；复杂模型用 glTF 加载
- 下一篇：自带几何体顶点 — 查看 attributes.position 数据
入门案例 · Three.js · 4/15