Threejs系列--2几何体

序言

随着上章基本知识的了解，相信你应该对Threejs基本流程及一些常见术语等有了基本的认识，本章将对几何体创建进行梳理。

threejs提供了Geometry与BufferGeometry对象，不过在正式项目中还是建议使用BufferGeometry，使用它可以有效减少向GPU传输UV坐标、颜色值、定点位置等信息。

立方几何体

BoxBufferGeometry(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。

//创建一个长宽高为1的立方体

var geometry = new THREE.BoxBufferGeometry( 1, 1, 1 );

圆形几何体

CircleBufferGeometry(radius : Float, segments : Integer, thetaStart : Float, thetaLength : Float)
radius — 圆形的半径，默认值为1
segments — 分段（三角面）的数量，最小值为3，默认值为8。
thetaStart — 第一个分段的起始角度，默认为0。（three o'clock position）
thetaLength — 圆形扇区的中心角，通常被称为“θ”（西塔）。默认值是2*Pi，这使其成为一个完整的圆。

//创建一个半径5，分成32段的圆

var geometry = new THREE.CircleBufferGeometry( 5, 32 );

圆锥几何体

ConeBufferGeometry(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，这使其成为一个完整的圆锥。

//创建一个半径为5高度20的圆锥

var geometry = new THREE.ConeBufferGeometry( 5, 20);

圆柱几何体

CylinderBufferGeometry(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，这使其成为一个完整的圆柱。

//创建一个顶部半径5，底部半径5，高度20的圆柱

var geometry = new THREE.CylinderBufferGeometry( 5, 5, 20 );

十二面几何体

DodecahedronBufferGeometry(radius : Float, detail : Integer)
radius — 十二面体的半径，默认值为1。
detail — 默认值为0。将这个值设为一个大于0的数将会为它增加一些顶点，使其不再是一个十二面体。

//创建一个半径5的12面体

var geometry = new THREE.DodecahedronBufferGeometry( 5 );

二十面几何体

IcosahedronBufferGeometry(radius : Float, detail : Integer)
radius — 二十面体的半径，默认为1。
detail — 默认值为0。将这个值设为一个大于0的数将会为它增加一些顶点，使其不再是一个二十面体。当这个值大于1的时候，实际上它将变成一个球体。

//创建一个半径5的20面体

var geometry = new THREE.IcosahedronBufferGeometry( 5 );

四面几何体

TetrahedronBufferGeometry(radius : Float, detail : Integer)
radius — 四面体的半径，默认值为1。
detail — 默认值为0。将这个值设为一个大于0的数将会为它增加一些顶点，使其不再是一个四面体。

//创建一个半径5的4面体

var geometry = new THREE.TetrahedronBufferGeometry( 5 );

八面几何体

OctahedronBufferGeometry(radius : Float, detail : Integer)
radius — 八面体的半径，默认值为1。
detail — 默认值为0，将这个值设为一个大于0的数将会为它增加一些顶点，使其不再是一个八面体。

//创建一个半径5的8面体

var geometry = new THREE.OctahedronBufferGeometry( 5 );

平面几何体

PlaneBufferGeometry(width : Float, height : Float, widthSegments : Integer, heightSegments : Integer)
width — 平面沿着X轴的宽度。默认值是1。
height — 平面沿着Y轴的高度。默认值是1。
widthSegments — （可选）平面的宽度分段数，默认值是1。
heightSegments — （可选）平面的高度分段数，默认值是1。

//创建一个宽高5,5的平面

var geometry = new THREE.PlaneBufferGeometry( 5, 5 );

圆圈几何体

RingBufferGeometry(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。

//创建一个内部半径1 外部半径5的圆环

var geometry = new THREE.RingBufferGeometry( 1, 5 );

圆环几何体

TorusBufferGeometry(radius : Float, tube : Float, radialSegments : Integer, tubularSegments : Integer, arc : Float)
radius - 圆环的半径，从圆环的中心到管道（横截面）的中心。默认值是1。
tube — 管道的半径，默认值为0.4。
radialSegments — 圆环的分段数，默认值为8。
tubularSegments — 管道的分段数，默认值为6。
arc — 圆环的圆心角（单位是弧度），默认值为Math.PI * 2。

//创建一个半径10 管道半径3的圆环

var geometry = new THREE.TorusBufferGeometry( 10, 3 );

圆环几何体

TorusKnotBufferGeometry(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。

//创建一个半径10 管道半径3的圆环

var geometry = new THREE.TorusKnotBufferGeometry( 10, 3  );

球几何体

SphereBufferGeometry(radius : Float, widthSegments : Integer, heightSegments : Integer, phiStart : Float, phiLength : Float, thetaStart : Float, thetaLength : Float)
radius — 球体半径，默认为1。
widthSegments — 水平分段数（沿着经线分段），最小值为3，默认值为8。
heightSegments — 垂直分段数（沿着纬线分段），最小值为2，默认值为6。
phiStart — 指定水平（经线）起始角度，默认值为0。。
phiLength — 指定水平（经线）扫描角度的大小，默认值为 Math.PI * 2。
thetaStart — 指定垂直（纬线）起始角度，默认值为0。
thetaLength — 指定垂直（纬线）扫描角度大小，默认值为 Math.PI。
该几何体是通过扫描并计算围绕着Y轴（水平扫描）和X轴（垂直扫描）的顶点来创建的。 因此，不完整的球体（类似球形切片）可以通过为phiStart，phiLength，thetaStart和thetaLength设置不同的值来创建， 以定义我们开始（或结束）计算这些顶点的起点（或终点）。

//创建一个半径5的球

var geometry = new THREE.SphereBufferGeometry( 5 );

参数化几何体

ParametricBufferGeometry(func : Function, slices : Integer, stacks : Integer)
func — 一个函数，它接受一个介于0和1之间的u和v值，并修改第三个Vector3参数
slices — 用于参数化函数的切片计数
stacks — 用于参数化函数的堆栈计数

var geometry = new THREE.ParametricBufferGeometry( THREE.ParametricGeometries.klein, 25, 25 );

挤压几何体

ExtrudeBufferGeometry(shapes : Array, options : Object)
shapes — 形状或者一个包含形状的数组。
options — 一个包含有下列参数的对象：

curveSegments — int，曲线上点的数量，默认值是12。
steps — int，用于沿着挤出样条的深度细分的点的数量，默认值为1。
depth — float，挤出的形状的深度，默认值为100。
bevelEnabled — bool，对挤出的形状应用是否斜角，默认值为true。
bevelThickness — float，设置原始形状上斜角的厚度。默认值为6。
bevelSize — float。斜角与原始形状轮廓之间的延伸距离，默认值为bevelThickness-2。
bevelOffset — float. Distance from the shape outline that the bevel starts. Default is 0.
bevelSegments — int。斜角的分段层数，默认值为3。
extrudePath — THREE.Curve对象。一条沿着被挤出形状的三维样条线。
UVGenerator — Object。提供了UV生成器函数的对象。
该对象将一个二维形状挤出为一个三维几何体。

当使用这个几何体创建Mesh的时候，如果你希望分别对它的表面和它挤出的侧面使用单独的材质，你可以使用一个材质数组。 第一个材质将用于其表面；第二个材质则将用于其挤压出的侧面。

//此处Shape还没写到，可以事先了解

var length = 12, width = 8;

var shape = new THREE.Shape();
shape.moveTo( 0,0 );
shape.lineTo( 0, width );
shape.lineTo( length, width );
shape.lineTo( length, 0 );
shape.lineTo( 0, 0 );

var extrudeSettings = {
	steps: 2,
	depth: 16,
	bevelEnabled: true,
	bevelThickness: 1,
	bevelSize: 1,
	bevelOffset: 0,
	bevelSegments: 1
};

var geometry = new THREE.ExtrudeBufferGeometry( shape, extrudeSettings );

车削几何体

LatheBufferGeometry(points : Array, segments : Integer, phiStart : Float, phiLength : Float)
points — 一个Vector2对象数组。每个点的X坐标必须大于0。
segments — 要生成的车削几何体圆周分段的数量，默认值是12。
phiStart — 以弧度表示的起始角度，默认值为0。
phiLength — 车削部分的弧度（0-2PI）范围，2PI将是一个完全闭合的、完整的车削几何体，小于2PI是部分的车削。默认值是2PI。

//此处Vector2还没写到，可事先了解

var points = [];
for ( var i = 0; i < 10; i ++ ) {
	points.push( new THREE.Vector2( Math.sin( i * 0.2 ) * 10 + 5, ( i - 5 ) * 2 ) );
}
var geometry = new THREE.LatheBufferGeometry( points );