认识three.js 提供的内置几何体
three.js 的内置几何体大致可分成以下几类：
二维几何体 PlaneGeometry 矩形平面CircleGeometry 圆形平面RingGeometry 圆环平面ShapeGeometry 二维图形 三维几何体 BoxGeometry 立方体TetrahedronGeometry 四面体OctahedronGeometry 八面体DodecahedronGeometry 十二面体IcosahedronGeometry 二十面体PolyhedronGeometry 多面体SphereGeometry 球体ConeGeometry 圆锥CylinderGeometry 圆柱TorusGeometry 三维圆环TorusKnotGeometry 扭结 路径合成几何体 TubeGeometry 管道LatheGeometry 车削ExtrudeGeometry 挤压 线性几何体 WireframeGeometry 网格几何体EdgesGeometry 边缘几何体
二维几何体
PlaneGeometry 矩形平面
如图：
PlaneGeometry(width : Float, height : Float, widthSegments : Integer, heightSegments : Integer)
width — 平面沿着X轴的宽度。默认值是1。height — 平面沿着Y轴的高度。默认值是1。widthSegments — （可选）平面的宽度分段数，默认值是1。heightSegments — （可选）平面的高度分段数，默认值是1。
代码：
建立一个Stage对象，把渲染器、场景、相机、轨道控制器和响应式布局都封装进去。这样在写例子的时候会比较方便、整洁。 src/component/Stage.ts
import { PerspectiveCamera, Scene, WebGLRenderer } from "three";import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";export default class Stage {// 渲染器renderer: WebGLRenderer;// 场景scene: Scene;// 相机camera: PerspectiveCamera;// 轨道控制器controls: OrbitControls;// 渲染之前beforeRender = (time: number = 0) => {};// 初始化场景constructor(x: number = 0, y: number = 0, z: number = 12) {this.scene = new Scene();// antialias：抗锯齿，渲染出来的图像没有小锯齿，但是同时渲染效率变低了。默认为falsethis.renderer = new WebGLRenderer({ antialias: true });// 设置canvas画布的像素尺寸，同时还做了自适应尺寸。const { clientWidth, clientHeight } = this.renderer.domElement;this.renderer.setSize(clientWidth * window.devicePixelRatio, window.clientHeight * devicePixelRatio, false);// 设置相机视口的宽高比this.camera = new PerspectiveCamera(45, clientWidth / clientHeight, 0.1, 1000);// 设置相机的位置this.camera.position.set(x, y, z);// 相机看向0, 0, 0点位置this.camera.lookAt(0, 0, 0);// 设置轨道控制器this.controls = new OrbitControls(this.camera, this.renderer.domElement);}// 响应式布局responsive() {const { renderer, camera } = this;if (this.resizeRendererToDisplaySize(renderer)) {const { clientWidth, clientHeight } = renderer.domElement;camera.aspect = clientWidth / clientHeight;// 更新投影矩阵camera.updateProjectionMatrix();}}// 重置渲染尺寸resizeRendererToDisplaySize(renderer: WebGLRenderer): boolean {const { width, height, clientWidth, clientHeight } = renderer.domElement;const [w, h] = [clientWidth * devicePixelRatio, clientHeight * devicePixelRatio];const needResize = width !== w || height !== h;if (needResize) {renderer.setSize(w, h, false);}return needResize;}// 连续渲染animate(time = 0) {this.responsive();this.beforeRender(time);this.renderer.render(this.scene, this.camera);requestAnimationFrame((time) => {this.animate(time);});}}
绘制矩形平面：
src/component/Plane.ts
import React, {useRef, useEffect } from "react";import {Mesh,MeshBasicMaterial,MeshNormalMaterial,PlaneGeometry,} from "three";import Stage from "../component/Stage";import "./fullScreen.css";// 实例化Stage对象const stage = new Stage();const {scene, renderer } = stage;// PlaneGeometry：矩形平面// 第一个参数：矩行面的画宽度，// 第二个参数：矩形面的高度// 第三个参数：宽方向的分段数量// 第四个参数：高方向的分段数量const geometry = new PlaneGeometry(0.5, 2, 2, 4);// 圆形平面const geometry = new CircleGeometry(0.5, 16, Math.PI / 2, Math.PI / 3);// 圆环平面const geometry = new RingGeometry(0.3, 0.6, 12, 2, Math.PI / 6, Math.PI / 2);// 二维图像var shape = new Shape()shape.moveTo(0, 0)// 设置贝赛尔曲线shape.bezierCurveTo(1, 1, -1, 1, 0, 0)const geometry = new ShapeGeometry(shape, 6){// 法线材质const material = new MeshNormalMaterial({polygonOffset: true,polygonOffsetFactor: 1,polygonOffsetUnits: 1,});const mesh = new Mesh(geometry, material);scene.add(mesh);}{// 基础材质：不受光度影响const material = new MeshBasicMaterial({wireframe: true,});const mesh = new Mesh(geometry, material);scene.add(mesh);}const Plane: React.FC = (): JSX.Element => {const divRef = useRef<HTMLDivElement>(null);useEffect(() => {const {current } = divRef;if (current) {current.innerHTML = "";current.append(renderer.domElement);stage.animate();}}, []);return <div ref={divRef} className="canvasWrapper"></div>;};export default Plane;
如图：
圆形平面
如图：
CircleGeometry(radius : Float, segments : Integer, thetaStart : Float, thetaLength : Float)
radius — 圆形的半径，默认值为1segments — 分段（三角面）的数量，最小值为3，默认值为8。thetaStart — 第一个分段的起始角度，默认为0。（three o’clock position）thetaLength — 圆形扇区的中心角，通常被称为“θ”（西塔）。默认值是2*Pi，这使其成为一个完整的圆。
圆环平面
如图：
RingGeometry(innerRadius : Float, outerRadius : Float, thetaSegments : Integer, phiSegments : Integer, thetaStart : Float, thetaLength : Float)
innerRadius — 内部半径，默认值为0.5。outerRadius — 外部半径，默认值为1。thetaSegments — 圆环的分段数。这个值越大，圆环就越圆。最小值为3，默认值为8。phiSegments — 最小值为1，默认值为8。thetaStart — 起始角度，默认值为0。thetaLength — 圆心角，默认值为Math.PI * 2。
二维图形:使用路径画图像
ShapeGeometry(shapes : Array, curveSegments : Integer)
shapes — 一个单独的shape，或者一个包含形状的Array。curveSegments - Integer - 每一个形状的分段数，默认值为12。
代码示例：
const shape = new Shape();// 设置起点shape.moveTo(0, 0);// 设置贝赛尔曲线shape.bezierCurveTo(// 控制点11, 1,// 控制点2-1, 1,// 结束点0, 0);// 第一个参数：图形// 第二个参数: 设置分段const geometry = new ShapeGeometry(shape, 6);
如图：
三维几何体
BoxGeometry立方体
如图：
BoxGeometry(width : Float, height : Float, depth : Float, widthSegments : Integer, heightSegments : Integer, depthSegments : Integer)
width — X轴上面的宽度，默认值为1。height — Y轴上面的高度，默认值为1。depth — Z轴上面的深度，默认值为1。widthSegments — （可选）宽度的分段数，默认值是1。heightSegments — （可选）高度的分段数，默认值是1。depthSegments — （可选）深度的分段数，默认值是1。
四面体
如图：
TetrahedronGeometry(radius : Float, detail : Integer)
radius — 四面体的半径，默认值为1。detail — 默认值为0。将这个值设为一个大于0的数将会为它增加一些顶点，使其不再是一个四面体。
八面体
如图：
OctahedronGeometry(radius : Float, detail : Integer)
radius — 八面体的半径，默认值为1。detail — 默认值为0，将这个值设为一个大于0的数将会为它增加一些顶点，使其不再是一个八面体。
12面体
如图：
DodecahedronGeometry(radius : Float, detail : Integer)
radius — 十二面体的半径，默认值为1。detail — 默认值为0。将这个值设为一个大于0的数将会为它增加一些顶点，使其不再是一个十二面体。
20面体
如图：
radius — 二十面体的半径，默认为1。detail — 默认值为0。将这个值设为一个大于0的数将会为它增加一些顶点，使其不再是一个二十面体。当这个值大于1的时候，实际上它将变成一个球体。
多面体：可以定义不同面数的多面体
PolyhedronGeometry(vertices : Array, indices : Array, radius : Float, detail : Integer
vertices — 一个顶点Array（数组）：[1,1,1, -1,-1,-1, … ]。indices — 一个构成面的索引Array（数组）， [0,1,2, 2,3,0, … ]。radius — Float - 最终形状的半径。detail — Integer - 将对这个几何体细分多少个级别。细节越多，形状就越平滑。
案例：
const geometry = new PolyhedronGeometry([-1, -1, -1, 1, -1, -1, 1, 1, -1, -1, 1, -1, -1, -1, 1, 1, -1, 1, 1, 1, 1, -1, 1, 1],[2, 1, 0, 0, 3, 2, 0, 4, 7, 7, 3, 0, 0, 1, 5, 5, 4, 0, 1, 2, 6, 6, 5, 1, 2, 3, 7, 7, 6, 2, 4, 5, 6, 6, 7, 4], // 顶点索引1, // 半径1 // 分段);
渲染效果如下：
球体
如图：
SphereGeometry(radius : Float, widthSegments : Integer, heightSegments : Integer, phiStart : Float, phiLength : Float, thetaStart : Float, thetaLength : Float)
radius — 球体半径，默认为1。widthSegments — 水平分段数（沿着经线分段），最小值为3，默认值为32。heightSegments — 垂直分段数（沿着纬线分段），最小值为2，默认值为16。phiStart — 指定水平（经线）起始角度，默认值为0。。phiLength — 指定水平（经线）扫描角度的大小，默认值为 Math.PI * 2。thetaStart — 指定垂直（纬线）起始角度，默认值为0。thetaLength — 指定垂直（纬线）扫描角度大小，默认值为 Math.PI。
该几何体是通过扫描并计算围绕着Y轴（水平扫描）和X轴（垂直扫描）的顶点来创建的。
因此，我们可以通过为phiStart，phiLength，thetaStart和thetaLength属性对球体进行切片。
圆锥
如图：
ConeGeometry(radius : Float, height : Float, radialSegments : Integer, heightSegments : Integer, openEnded : Boolean, thetaStart : Float, thetaLength : Float)
radius — 圆锥底部的半径，默认值为1。height — 圆锥的高度，默认值为1。radialSegments — 圆锥侧面周围的分段数，默认为8。heightSegments — 圆锥侧面沿着其高度的分段数，默认值为1。openEnded — 一个Boolean值，指明该圆锥的底面是开放的还是封顶的。默认值为false，即其底面默认是封顶的。thetaStart — 第一个分段的起始角度，默认为0。（three o’clock position）thetaLength — 圆锥底面圆扇区的中心角，通常被称为“θ”（西塔）。默认值是2*Pi，这使其成为一个完整的圆锥。
圆柱
如图：
CylinderGeometry(radiusTop : Float, radiusBottom : Float, height : Float, radialSegments : Integer, heightSegments : Integer, openEnded : Boolean, thetaStart : Float, thetaLength : Float)
radiusTop — 圆柱的顶部半径，默认值是1。radiusBottom — 圆柱的底部半径，默认值是1。height — 圆柱的高度，默认值是1。radialSegments — 圆柱侧面周围的分段数，默认为8。heightSegments — 圆柱侧面沿着其高度的分段数，默认值为1。openEnded — 一个Boolean值，表示该圆柱的底面和顶面是否开放。默认值为false，即闭合。thetaStart — 第一个分段的起始角度，默认为0。（three o’clock position）thetaLength — 圆柱底面圆扇区的中心角，通常被称为“θ”（西塔）。默认值是2*Pi，这使其成为一个完整的圆柱。
三维圆环
如图：
TorusGeometry(radius : Float, tube : Float, radialSegments : Integer, tubularSegments : Integer, arc : Float)
radius - 环面的半径，从环面的中心到管道横截面的中心。默认值是1。tube — 管道的半径，默认值为0.4。radialSegments — 管道横截面的分段数，默认值为8。tubularSegments —圆环x的分段数，默认值为6。arc — 圆环的圆心角（单位是弧度），默认值为Math.PI * 2。
纽结
如图：
TorusKnotGeometry(radius : Float, tube : Float, tubularSegments : Integer, radialSegments : Integer, p : Integer, q : Integer)
radius - 圆环的半径，默认值为1。
tube - 管道的半径，默认值为0.4。
tubularSegments - 扭结线的分段数量，默认值为64。
radialSegments - 管道分段数量，默认值为8。
p - 这个值决定了几何体将绕着其旋转对称轴旋转多少次，默认值是2。
q - 这个值决定了几何体将绕着其内部圆环旋转多少次，默认值是3。
路径合成几何体
TubeGeometry 管道
TubeGeometry(path : Curve, tubularSegments : Integer, radius : Float, radialSegments : Integer, closed : Boolean)
path — Curve - 一个由基类Curve继承而来的3D路径。 Default is a quadratic bezier curve.tubularSegments — Integer - 组成这一管道的分段数，默认值为64。radius — Float - 管道的半径，默认值为1。radialSegments — Integer - 管道横截面的分段数目，默认值为8。closed — Boolean 管道的两端是否闭合，默认值为false。
代码示例：
// Curve：顶点类型Vector3import {.Curve, Vector3 } from 'three'class CustomSinCurve extends Curve<Vector3> {constructor() {super();}// t:就是0-1之间的差值getPoint(t: number, optionalTarget: Vector3 = new Vector3()) {设置管道弯曲的x，y，zconst tx = t;const ty = Math.cos(8 * Math.PI * t) / 8;const tz = Math.sin(8 * Math.PI * t) / 8;return optionalTarget.set(tx, ty, tz);}}const path = new CustomSinCurve();const geometry = new TubeGeometry(path, 64, 0.05, 8);
如图：
LatheGeometry 车削：
原理：其实就是让一条曲线沿着y轴线旋转。
LatheGeometry(points : Array, segments : Integer, phiStart : Float, phiLength : Float)
// Vector2顶点集合
points — 一个Vector2对象数组。每个点的X坐标必须大于0。segments — 要生成的车削几何体圆周分段的数量，默认值是12。phiStart — 以弧度表示的起始角度，默认值为0。phiLength — 车削部分的弧度（0-2PI）范围，2PI将是一个完全闭合的、完整的车削几何体，小于2PI是部分的车削。默认值是2PI。
代码示例：
// 创建顶点集合const points = [];for (let i = 0; i < 1; i += 0.1) {// 画曲线const x = (Math.sin(i * Math.PI * 1.8 + 3) + 1) / 5 + 0.02;points.push(new Vector2(x, i));}const geometry = new LatheGeometry(points, 32, 0, Math.pI);
如图：
ExtrudeGeometry 挤压几何体
ExtrudeGeometry(shapes : Array, options : Object)
shapes — 形状或者一个包含形状的数组。options — 一个包含有下列参数的对象：对物体挤压的设置 steps — int，用于沿着挤出样条的深度细分的点的数量，默认值为1。depth — float，挤出的形状的深度，默认值为1。bevelEnabled — bool，对挤出的形状应用是否斜角，默认值为true。bevelThickness — float，设置原始形状上斜角的厚度。默认值为0.2。bevelSize — float。斜角与原始形状轮廓之间的延伸距离，默认值为bevelThickness-0.1。bevelOffset — float. Distance from the shape outline that the bevel starts. Default is 0.bevelSegments — int。斜角的分段层数，默认值为3。extrudePath — THREE.Curve对象。一条沿着被挤出形状的三维样条线。Bevels not supported for path extrusion.UVGenerator — Object。提供了UV生成器函数的对象。
该对象可以将一个二维形状挤成一个三维几何体。
当使用这个几何体创建Mesh的时候，如果你希望分别对它的表面和它挤出的侧面使用单独的材质，你可以使用一个材质数组。 第一个材质将用于其表面；第二个材质则将用于其挤压出的侧面。
代码示例：
const shape = new Shape();// 画线// 开始点shape.moveTo(0, 0);shape.lineTo(0, 1);shape.lineTo(1, 1);shape.lineTo(1, 0);/ 结束点shape.lineTo(0, 0);const extrudeSettings = {steps: 1,depth: 1,bevelEnabled: true,bevelThickness: 0.2,bevelSize: 0.1,bevelOffset: 0,bevelSegments: 1,};const geometry = new ExtrudeGeometry(shape, extrudeSettings);
线性几何体
线性几何体其实就是用线显示几何体的方式。
网格几何体
网格几何体：把网格中三角面用三角线来显示。
如图所示：
WireframeGeometry( geometry : BufferGeometry )
geometry — 任意几何体对象。
代码示例：
var geometry = new SphereGeometry()const wireframe = new WireframeGeometry(geometry)const line = new LineSegments(wireframe);scene.add(line)// 设置材质const mat = line.material as LineBasicMaterial// 设置颜色mat.color=new Color(oxffff00)mat.depthTest = false;// 设置透明度mat.transparent = true;mat.opacity = 0.5;
边缘几何体
边缘几何体和网格几何体差不多，但是 边缘几何体的线会少一些。当两个面的法向量长度差不多时，会把2个面重合的那条边删掉。
如下图：当2个三角将要重合的那条边将要达到一个阈值时，会被删掉。
EdgesGeometry( geometry : BufferGeometry, thresholdAngle : Integer )
geometry — 任何一个几何体对象。thresholdAngle — 仅当相邻面的法线之间的角度（单位为角度）超过这个值时，才会渲染边缘。默认值为1。
代码示例：
// 球体const geometry = new SphereGeometry(2, 8, 8);// 设置边缘几何体const edges = new EdgesGeometry(geometry);const line = new LineSegments(edges);
如图所示：
