跳到主要内容

几何

几何（Geometry），我们可以简单理解为物体的形状，在 Tinoe 中的几何体主要用于存储顶点数据，构成几何体的顶点数据描述几何体的关键，也是渲染过程中着色器必不可少的输入。

Tinoe 内置了常见的几种几何体，此外还允许用户 自定义几何体。

示例​

常见几何体​

Tinoe 提供几种常见的预设几何体，如矩形体、球体、圆柱体、平面、圆片等，简化用户创建 3D 场景的流程。

CubeGeometry​

提供快速创建矩形体顶点信息的能力。

// 默认创建
const cube = new CubeGeometry();

// 参数配置创建
const cube = new CubeGeometry({
  width: 10, // 宽度
  height: 8, // 高度
  depth: 6, // 深度
  widthSegments: 4, // 切片数
  heightSegments: 8,
  depthSegments: 10,
});

SphereGeometry​

提供快速创建球体的顶点信息的能力。

// 默认创建
const sphere = new SphereGeometry();

// 参数配置创建
const sphere = new SphereGeometry({
  radius: 1.5, // 球体半径
  widthSegments: 64, // 切片数
  widthSegments: 64,
});

PlaneGeometry​

提供快速创建平面的顶点信息的能力。

// 默认创建
const plane = new PlaneGeometry();

// 参数配置创建
const plane = new PlaneGeometry({
  width: 10,
  height: 18,
  widthSegments: 5, // 切片数
  heightSegments: 9,
});

CycleGeometry​

提供快速创建圆形平面的顶点信息的能力。

// 默认创建
const cycle = new CycleGeometry();

// 参数配置创建
const cycle = new CycleGeometry({
  radius: 8, // 半径
  segments: 64, // 切片数
});

CylinderGeometry​

提供快速创建圆柱体的顶点信息的能力。

// 默认创建
const cylinder = new CylinderGeometry();

// 参数配置创建
const cylinder = new CylinderGeometry({
  radius: 8,
  radialSegments: 64,
  height: 10,
  heightSegments: 10,
});

高级几何体​

LineGeometry​

提供快速创建线段顶点信息的能力。需要注意的是，LineGeometry 必须配合LineMaterial使用。

线段几何体的创建方式相对丰富。

  1. 默认创建

默认的线段是一条沿 x 轴的直线。

const lineGeom = new LineGeometry();
  1. 点数据创建

上传单条线段的点数据到points配置项中。

/** 绘制出一条左角括号形状的线条 **/
// prettier-ignore
const pointsData = [
                    1, 1, 0, // 上顶点
                    0, 0, 0, // 左顶点
                    1, -1, 0, // 下顶点
                  ];
const lineGeom = new LineGeometry({
  points: pointsData,
});
  1. 多组点数据创建

上传多组线段的点数据到pointsGroup的配置项中。

/** 绘制出一对角括号形状的线条 **/
// prettier-ignore
const pointsData = [
                    // 左角括号线段
                    [
                      0, 1, 0, // 上顶点
                      -1, 0, 0, // 左顶点
                      0, -1, 0, // 下顶点
                    ],
                    // 右角括号线段
                    [
                      0, 1, 0, // 上顶点
                      1, 0, 0, // 右顶点
                      0, -1, 0, // 下顶点
                    ],
                  ];
const lineGeom = new LineGeometry({
  pointsGroup: pointsData,
});
  1. .setFromPoints()

除了初始化时上传线段点数据，可以直接调用.setFromPoints()方法。

const lineGeom = new LineGeometry();

lineGeom.setFromPoints(pointsData);
  1. .setFromGeometry()

该方法会直接将指定几何体中的顶点信息作为线段的点数据。

const cubeGeom = new CubeGeometry();
const lineGeom = new LineGeometry();

// 线段的点数据来自于cube几何体的顶点数据
lineGeom.setFromGeometry(cubeGeom);

API​

Geometry

Q&A​