封面图
这一小节接着说几何体。
EdgesGeometry
边缘几何体，用来绘制物体的边缘线,可以用来框住某个具体的物体，比如官方案例：
它的使用流程稍微复杂一些，首先要声明一个几何体，然后给这个几何体包裹一层边，再给这层边添加线条。
示例代码如下：
const geometry = new THREE.BoxGeometry( 100, 100, 100 );
const edges = new THREE.EdgesGeometry( geometry );
const line = new THREE.LineSegments(edges, new THREE.LineBasicMaterial( { color: 0xffffff } ) );
scene.add( line );LatheGeometry
车削几何体、旋转几何体，主要用来创建具有轴对称性的网格对象，比如花瓶、冷却塔等。
它的构造器接收以下参数：
- points-二维向量矩阵。每个点的x坐标必须大于零。默认值是一个具有（0，-0.5）、（0.5,0）和（0,0.5）的数组，它可以创建一个简单的菱形。
- segments—要生成的圆周线段数。默认值为12。
- phiStart-以弧度为单位的起始角度。默认值为0。
- phiLength-车削部分的弧度（0到2PI）。默认值为2PI。
它的使用方式如下：
const points = [];
for ( let i = 0; i < 10; i ++ ) {
points.push( new THREE.Vector2( Math.sin( i * 0.2 ) * 10 + 5, ( i - 5 ) * 2 ) );
}
const geometry = new THREE.LatheGeometry( points );
const material = new THREE.MeshBasicMaterial( { color: 0xffff00 } );
const lathe = new THREE.Mesh( geometry, material );
scene.add( lathe );示例代码：
// 创建样条曲线的点集
const points = []
const height = 5
const count = 30
for (let i = 0; i < count; i++) {
points.push(
new THREE.Vector3(
(Math.sin(i * 0.2) + Math.cos(i * 0.3)) * height + 12,
i - count + count / 2,
0
)
)
}
// 绘制样条曲线产生的图形
const geom = new THREE.LatheGeometry(points,12,0,Math.PI*2)示例效果：
RingGeometry
环形几何体。主要用来生成二维的环形平面图形。
它的构造器参数如下：
- innerRadius-默认值为0.5。
- outerRadius-默认值为1。
- thetaSsegments（分段数）-分段数。数字越大，戒指就越圆。最小值为3。默认值为32。
- phiSegments-最小值为1。默认值为1。
- θ开始-开始角度。默认值为0。
- thetaLength-中心角。默认值为Math.PI*2。
使用方式如下：
const geometry = new THREE.RingGeometry( 1, 5, 32 );
const material = new THREE.MeshBasicMaterial( { color: 0xffff00, side: THREE.DoubleSide } );
const mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );SphereGeometry
球体。球体是一个非常常用的几何体。
它的构造器参数为：
- radius-球体半径。默认值为1。
- widthSegments—水平线段的数量。最小值为3，默认值为32。
- heightSegments—垂直线段的数量。最小值为2，默认值为16。
- phiStart-指定水平起始角度。默认值为0。
- phiLength-指定水平扫描角度大小。默认值为Math.PI*2。
- θ开始-指定垂直开始角度。默认值为0。
- thetaLength-指定垂直扫掠角度的大小。默认值为Math.PI。
这个几何体是通过扫描和计算Y轴（水平扫描）和Z轴（垂直扫描）周围的顶点来创建的。因此，可以通过使用phiStart、phiLength、thetaStart和thetaLength的不同值来创建不完整的球体（类似于“球体切片”），以便定义开始（或结束）计算这些顶点的点，比如：
它的使用方式如下：
const geometry = new THREE.SphereGeometry( 15, 32, 16 );
const material = new THREE.MeshBasicMaterial( { color: 0xffff00 } );
const sphere = new THREE.Mesh( geometry, material );
scene.add( sphere );TorusGeometry
圆环几何体，用于生成圆环体几何图形，如：
它的构造器参数为：
- radius-圆环体的半径，从圆环体的中心到管的中心。默认值为1。
- tube-管道的半径。默认值为0.4。
- radialSegments-默认值为12
- tubularSegments-默认值为48。
- 弧度-中心角。默认值为Math.PI*2。
它的使用方式如下：
const geometry = new THREE.TorusGeometry( 10, 3, 16, 100 );
const material = new THREE.MeshBasicMaterial( { color: 0xffff00 } );
const torus = new THREE.Mesh( geometry, material );
scene.add( torus );TorusKnotGeometry
圆环结几何体。
用来创建一个圆环结，其特定形状由一对互质整数p和q定义。
如果p和q不是互质的，则结果将是圆环链接。
比如：p=4,q=2
比如：p=4,q=4
比如：p=5,q=4
其构造器参数如下：
- radius—圆环体的半径。默认值为1。
- tube-管道的半径。默认值为0.4。
- tubularSegments-默认值为64。
- radialSegments-默认值为8。
- p-该值决定几何体绕其旋转对称轴旋转的次数。默认值为2。
- q-该值决定了几何体在圆环体内部绕一个圆缠绕的次数。默认值为3。
其使用方式如下：
const geometry = new THREE.TorusKnotGeometry( 10, 3, 100, 16 );
const material = new THREE.MeshBasicMaterial( { color: 0xffff00 } );
const torusKnot = new THREE.Mesh( geometry, material );
scene.add( torusKnot );TubeGeometry
管道几何体。可以沿着3d曲线创建一个管道，比如：
它的构造器参数如下：
- path-从Curve基类继承的三维路径。默认为二次贝塞尔曲线。
- tubularSegments-Integer-组成管道的管段数。默认值为64。
- radius-管道的半径。默认值为1。
- radialSegments-组成横截面的线段数量。默认值为8。
- closed-管道是打开的还是关闭的。默认值为false。
示例代码如下：
class CustomSinCurve extends THREE.Curve {
constructor( scale = 1 ) {
super();
this.scale = scale;
}
getPoint( t, optionalTarget = new THREE.Vector3() ) {
const tx = t * 3 - 1.5;
const ty = Math.sin( 2 * Math.PI * t );
const tz = 0;
return optionalTarget.set( tx, ty, tz ).multiplyScalar( this.scale );
}
}
const path = new CustomSinCurve( 10 );
const geometry = new THREE.TubeGeometry( path, 20, 2, 8, false );
const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
const mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );其基本使用过程为：
- 先创建曲线
- 再创建管道几何体
- 然后设置正常的网格物体
WireframeGeometry
线框几何体。主要用作辅助对象，以线框的形式查看几何体。
以其他几何体作为参数。
示例代码如下：
const geometry = new THREE.SphereGeometry( 100, 100, 100 );
const wireframe = new THREE.WireframeGeometry( geometry );
const line = new THREE.LineSegments( wireframe );
line.material.depthTest = false;
line.material.opacity = 0.25;
line.material.transparent = true;
scene.add( line );官方示例：
