three - 4 - threejs提供的内置几何体

认识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。

代码：

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：抗锯齿，渲染出来的图像没有小锯齿，但是同时渲染效率变低了。默认为false
    this.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 — 圆形的半径，默认值为1
• segments — 分段（三角面）的数量，最小值为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(
// 控制点1
1, 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：顶点类型Vector3
import {.Curve, Vector3 } from 'three'

class CustomSinCurve extends Curve<Vector3> {
  constructor() {
    super();
  }
  // t:就是0-1之间的差值
  getPoint(t: number, optionalTarget: Vector3 = new Vector3()) {
    设置管道弯曲的x，y，z
    const 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);

如图所示：

自定义几何体