Three.js 之几何体

几何体

在 Three.js 中，所有的几何体都是通过 THREE.BufferGeometry 继承而来。在设置几何体的反面的素材时，需要设置材质的的 side 为 THREE.DoubleSide，否则反面不会显示。

2D 几何体

2D 几何体只有两个维度 X 轴和 Y 轴，没有 Z 轴。

THREE.PlaneGeometry

用来渲染矩形平面几何。当 几何创建完毕后，获取几何的属性需要使用 geometry.parametres.X 来获取。

THREE.CircleGeometry

创建一个圆形几何平面。

角度和弧度之间的计算公式：

const deg2rad = (degrees) => (degrees * Math.PI) / 180
const rad2deg = (radians) => (radians * 180) / Math.PI

THREE.RingGeometry

创建一个圆环几何平面

THREE.ShapeGeometry

创建自定义几何平面

THREE.Shape

创建自定义的几何平面是，需要先创建一个 shape，然后传给 THREE.ShapeGeometry。

3D 几何体

THREE.BoxGeometry

创建一个盒子形状的几何体

THREE.SphereGeometry

创建一个球状几何体

THREE.CylinderGeometry

创建一个圆柱体

THREE.ConeGeometry

创建一个圆锥体

THREE.ConeGeometry

创建一个圆锥体

THREE.TorusGeometry

创建一个环形体

THREE.TorusKnotGeometry

创建一个环形结的三维几何体

THREE.PolyhedronGeometry

创建一个多面的三维几何体

THREE.ConvexGeometry

创建一个由多个点组成的外表凸起的几何体

THREE.LatheGeometry

创建一个由多个点相连接的曲线形状的几何体

BoxLineGeometry

创建一个盒子形状的几何体，但是渲染出来的是盒子的边框所组成的线，而不是盒子的面

THREE.RoundedBoxGeometry

创建一个圆角的盒子形状的几何体

TeapotGeometry

创建一个茶壶形状的几何体，需要通过外部模块引入：

import { TeapotGeometry } from 'three/examples/jsm/geometries/TeapotGeometry'

THREE.ExtrudeGeometry

将一个二维的面的 Z 轴延长，变成一个三维的几何体，可以自己创建一个二维的面，也可以或者通过 SVG 图片创建

THREE.TubeGeometry

创建一个曲线的管状几何体

THREE.ParametricGeometry

通过自定义函数创建几何体

THREE.EdgesGeometry

创建一个线框几何体，可以用来展示另一个几何体的边缘线框，利于开发调试用

THREE.WireFrameGeometry

展示一个几何体的线框，等于设置了材质的 wireframe

TextGeometry

创建一个文本类型的三维几何体，需要引入模块：

import { TextGeometry } from 'three/examples/jsm/geometries/TextGeometry'