Geometry

API

BufferGeometry

Geometry 的基础类，用于创建自定义几何体。

const baseGeometry = new THREE.BufferGeometry();

// 顶点位置
const points = new Float32Array([
  0.0,
  0.0,
  1.0, // v0

  1.0,
  1.0,
  1.0, // v1

  2.0,
  3.0,
  1.0, // v2
]);

// 指定集合体顶点数据源，每个顶点包含3个值，总计指定了3个顶点
baseGeometry.setAttribute("position", new THREE.BufferAttribute(points, 3));

// 顶点索引，用于复用顶点，总计指定了6个顶点
const indices = [0, 1, 2, 2, 3, 0];
geometry.setIndex(indices);
geometry.setAttribute("position", new THREE.BufferAttribute(vertices, 3));

groups

将顶点分组，可以设置不同的材质，例如将正方体 6 个面设置为不同的颜色。可以通过 box.groups 来查看各个组的信息

// 未指定的时候，所有的使用同一个材质
const cube = new THREE.Mesh(boxGeometry, material);

// 可以指定多个材质，当指定多个材质（数组）时，会自动按照面的索引和材质的索引对齐
const cube = new THREE.Mesh(boxGeometry, [material, material1, material1]);

// 可手动指定，哪个顶点使用哪个材质索引
boxGeometry.addGroup(startIndex, count, materialIndex); // boxGeometry.addGroup(0, 6, 2);

BoxGeometry

长方体，继承自 BufferGeometry

// w,h,d
const box = new THREE.BoxGeometry(
  width?: number,
  height?: number,
  depth?: number,
  widthSegments?: number,
  heightSegments?: number,
  depthSegments?: number
);

CircleGeometry

圆形，继承自 BufferGeometry

// 半径，分段数（越多越圆滑），起始弧度，弧度长度
const circle = new THREE.CircleGeometry(radius?: number, segments?: number, thetaStart?: number, thetaLength?: number);

ConeGeometry

圆锥体，继承自 BufferGeometry

const cone = new THREE.ConeGeometry(
  radius?: number,
  height?: number,
  radialSegments?: number,
  heightSegments?: number,
  openEnded?: boolean,
  thetaStart?: number,
  thetaLength?: number,
)

CylinderGeometry

圆柱体

const cylinder = new THREE.CylinderGeometry(
    radiusTop?: number,
    radiusBottom?: number,
    height?: number,
    radialSegments?: number,
    heightSegments?: number,
    openEnded?: boolean,
    thetaStart?: number,
    thetaLength?: number,
)

WireframeGeometry

将几何体转换为线框体

const wire = new THREE.WireframeGeometry(box1);
const lineMesh = new THREE.LineSegments(wire);

scene.add(lineMesh);

EdgesGeometry

展示集合体的边界

const wire = new THREE.EdgesGeometry(box1);
const lineMesh = new THREE.LineSegments(wire);

scene.add(lineMesh);

包围盒

计算集合体包围盒。例如可以用于碰撞检测

const box = new THREE.BoxGeometry(1, 1, 1);

box.computeBoundingBox(); // 计算长方体包围盒
box.computeBoundingSphere(); // 计算圆形包围盒

// 取包围盒
box.boundingBox;
box.boundingSphere;

// 展示某个集合体的包围盒
if (box.boundingBox) {
  scene.add(new THREE.Box3Helper(box.boundingBox, 0xffff00));
}

// 多个物体的包围盒
const bb1 = box1.boundingBox;
const bb2 = box2.boundingBox;

const unionBoundingBox = new THREE.Box3().union(bb1).union(bb2);
scene.add(new THREE.Box3Helper(unionBoundingBox, 0xffff00));

法向量

法向量，可以用来计算光线的反射，法向量在使用 THREE 的几何体方法创建时会自带的，但是通过顶点来创建的集合体不会带法向量，此时就需要自己计算或者设置

可使用法向量辅助器查看

// 通过指定顶点创建的集合体，需要自行计算法向量
box1.computeVertexNormals();

参考

• BufferGeometry