THREE.JS之几何体（Geometry）

      众所周知，在3D世界里，物体都是有网格构成的，而网格的组织规则是通过几何体（Geometry）来定义。在three.js中，有两类几何体，我把它们叫做基本几何体和buffer几何体。基本几何体的顶点位置，缩放，旋转角，颜色，法线信息都是保存在特定的类里面，比如顶点位置使用Vector3，颜色信息使用Color。而buffer类的都是使用数组存储的，并且缓存在了内存缓冲区里，减低了对GPU的消耗。正是由于基本几何体和Buffer几何体的特点，决定了他们各自的使用场景：基本集合使用类来管理自身信息，便于操作，用来创建经常变化的物体；buffer几何体由于使用数组来管理，如果需要操作，必须去除其原始信息，很难操作，而且buffer几何体的信息被缓存在缓冲区中，减低了对GPU的消耗，所以Buffer几何体适用于创建那种一旦创建就不需要修改的物体。

      three.js中基本上是每个基本几何体都有一个buffer几何体与之对应，而且两者的创建方式和参数基本一致，这里只对基本集合体作说明。

在下面的例子中，使用的是同一个材质：

var material = new THREE.MeshPhongMaterial({
    color: 0xffffff,
    wireframe:false,
})

BoxGeometry立方体
BoxGeometry(width, height, depth, widthSegments, heightSegments, depthSegments)

width — X轴方向上的长.
height — Y轴方向上的高.
depth — Z轴方向上的宽.
widthSegments — 可选项，x轴方向的切割面，默认是1.
heightSegments — 可选项，y轴上的切割面，默认是1.
depthSegments — 可选项，z轴上的切割面，默认是1.

例子

var box = new THREE.Mesh(new THREE.BoxBufferGeometry(100,100,100,10,10,10),material);
    scene.add(box); 

CircleGeometry/圆盘

CircleGeometry(radius, segments, thetaStart, thetaLength)

radius — 圆盘的半径，默认是20.
segments —三角形切割面的数量，最小值是3,默认是8.
thetaStart — 第一个三角形切割面的其实位置，默认是0，三点钟方向.
thetaLength —圆心角的大小，默认是2PI，一个正圆.

例子

var circle = new THREE.Mesh(new THREE.CircleGeometry(100,100,0,Math.PI*7/4),material);
    scene.add(circle);

ConeGeometry/锥体

ConeGeometry(radius, height, radialSegments, heightSegments, openEnded, thetaStart, thetaLength)

radius — 底面半径，默认是20.
height — 高，默认是100.
radiusSegments —底面的三角形切割面，默认是8
heightSegments —斜面的切割线数量，默认是1.
openEnded — 指定锥体底面是否打开，默认是false，表示封闭.
thetaStart — 锥体底面第一个三角形切割面的起始位置，默认是0，三点钟方面，沿逆时针方向绘制.
thetaLength — 底面圆心角，默认是2PI，完整的锥体.

例子

var cone = new THREE.Mesh(new THREE.ConeGeometry(100,100,100,10,false,0,Math.PI*3/2),material);
    scene.add(cone);

CylinderGeometry/圆柱体
CylinderGeometry(radiusTop, radiusBottom, height, radiusSegments, heightSegments, openEnded, thetaStart, thetaLength)

radiusTop — 上底面半径，默认是20.
radiusBottom —下底面半径，默认是20.
height — 高，默认是100.
radiusSegments — 底面三角形切割面的数量，默认是8
heightSegments — 侧面切割面数量，默认是1.
openEnded — 指定底面是否打开，默认是false，标识封闭.
thetaStart — 底面第一个三角形切割面的起始位置，默认是0，三点钟方向.
thetaLength — 底面圆心角的大小.

例子

var cylinder = new THREE.Mesh(new THREE.CylinderGeometry(50,100,100,10,10,false,0,Math.PI*3/2),material);
    scene.add(cylinder);

DodecahedronGeometry/十二面体

DodecahedronGeometry(radius, detail)

radius — 十二面体的半径，默认是1.
detail — 默认是0，设置为n时，几何体的面是12的n倍.

例子

var dodecahed = new THREE.Mesh(new THREE.DodecahedronGeometry(50,0),material);
    scene.add(dodecahed);

ExtrudeGeometry

ExtrudeGeometry(shapes, options)

shapes — Shape 或者Shape数组
options — 包括下面的数组.
curveSegments — int. 圆角的层数
steps — int. 物体本身在厚度上的分层数量
amount — 整型，物体的厚度
bevelEnabled — bool. 是否允许边角圆滑过度（开启bevelEnabled，其实物体本身是没有变化的，而是在物体的前后加上一个薄层，用来实现圆角）
bevelThickness — float. 附加层的厚度
bevelSize — float. 附加层的圆角的斜面长度
bevelSegments — int. 附加的圆角的层数
extrudePath — THREE.CurvePath. 3d spline path to extrude shape along. (creates Frames if (frames aren’t defined)
frames — THREE.TubeGeometry.FrenetFrames. containing arrays of tangents, normals, binormals
material — int. material index for front and back faces
extrudeMaterial — int. material index for extrusion and beveled faces
UVGenerator — Object. object that provides UV generator functions

例子

var heartShape = new THREE.Shape();
heartShape.moveTo( 0, 50,0);
    heartShape.lineTo(50,100,0);
    heartShape.lineTo(100,50,0);

    heartShape.lineTo(0,-50,0);

    heartShape.lineTo(-100,50,0);

    heartShape.lineTo(-50,100,0);
    heartShape.lineTo(0, 50,0);

var extrudeSettings = { amount: 10, bevelEnabled: true, bevelSegments: 10, steps: 10, bevelSize: 10, bevelThickness: 10 };

var extrude = new THREE.Mesh(new THREE.ExtrudeGeometry(heartShape,extrudeSettings),material);
    scene.add(extrude);

IcosahedronGeometry/二十面体
IcosahedronGeometry(radius, detail)

radius — 十二面体的半径，默认是1.
detail — 默认是0，设置为n时，几何体的面是20的n倍.

例子

var icosahedron = new THREE.Mesh(new THREE.IcosahedronGeometry(50,0),material);                             scene.add(icosahedron);

LatheGeometry/Y轴的轴对称图形
LatheGeometry(points, segments, phiStart, phiLength)

points — X0Y平面上的Vector2点的集合，x坐标不能小于0
segments — 图像的切线数量
phiStart — 轴对称图形的开始绘制方向，默认是0，六点钟方向.
phiLength — 周对称图形的圆心角大小，默认是2PI.

例子

var points = [];
for(var i=0; i<20;i++){
    points.push(new THREE.Vector2(i,i*i-2*i));
}
var lathe = new THREE.Mesh(new THREE.LatheGeometry( points,10,0,Math.PI),material);
    scene.add(lathe);

OctahedronGeometry/八面体
OctahedronGeometry(radius, detail)

radius — 十二面体的半径，默认是1.
detail — 默认是0，设置为n时，几何体的面是8的n倍.

例子

var octahedron = new THREE.Mesh(new THREE.OctahedronGeometry(50,0),material);
    scene.add(octahedron);

PlaneGeometry/平面
PlaneGeometry(width, height, widthSegments, heightSegments)

width — 平面的宽度（X轴）.
height — 平面的长度（Y轴）.
widthSegments — 可选项，宽的切割线数量，默认是1.
heightSegments —可选项，长的切割线数量，默认是1.

var plane = new THREE.Mesh(new THREE.PlaneGeometry(100,100,5,5),material);
    scene.add(plane);

PolyhedronGeometry/多面体

PolyhedronGeometry(vertices, faces, radius, detail)

vertices — 顶点的数组，如[1,1,1, -1,-1,-1,…]，则第一个顶点的坐标是（1,1,1），第二个顶点的坐标是（-1，-1，-1）
faces —面的顶点坐标的索引，应用vertices的顶点，如[0,1,2， 3,4,5，…],则第一个面由顶点0,1,2构成,第二个面由顶点3,4,5构成
radius — Float - 多面体的半径
detail — Integer - 设置为n时，多面体的面的数量增加基础面的n倍.

例子

var verticesOfCube = [
  -1,-1,-1,    1,-1,-1,    1, 1,-1,    -1, 1,-1,
    -1,-1, 1,    1,-1, 1,    1, 1, 1,    -1, 1, 1,
];

var indicesOfFaces = [
    2,1,0,    0,3,2,
    0,4,7,    7,3,0,
    0,1,5,    5,4,0,
    1,2,6,    6,5,1,
    2,3,7,    7,6,2,
    4,5,6,    6,7,4
];

var polyhedron = new THREE.Mesh( new THREE.PolyhedronGeometry( verticesOfCube, indicesOfFaces, 50, 1),material);
    scene.add(polyhedron);

RingGeometry/圆环面

RingGeometry(innerRadius, outerRadius, thetaSegments, phiSegments, thetaStart, thetaLength)

innerRadius — 内环的半径，设置为0时无用
outerRadius — 外环半径，默认是50.
thetaSegments — 径向切割面，值越大，越圆滑,最小是3，默认是8
phiSegments — 环向切割线，最小是1，默认是8.
thetaStart — 起始角度，默认是0，三点钟方向.
thetaLength — 圆心角大小,默认是2*PI.

例子

var ring = new THREE.Mesh(new THREE.RingGeometry(20,50,10,20,0,Math.PI),material);
    scene.add(ring);

ShapeGeometry/自定义图像
shapes — shape对象或shape对象数组
options — 可选配置项
curveSegments - Integer - 通常不用-默认是12
material - Integer - material 在material 列表中的索引
UVGenerator - A UV generator, defaults to ExtrudeGeometry’s WorldUVGenerator

例子

var rectShape = new THREE.Shape();
    rectShape.moveTo(-50,-50);
    rectShape.lineTo(-50,50);
    rectShape.lineTo(50,50);
    rectShape.lineTo(50,-50);
    rectShape.lineTo(-50,-50);

var shape = new THREE.Mesh(new THREE.ShapeGeometry(rectShape),material);
    scene.add(shape);

SphereGeometry/球体
SphereGeometry(radius, widthSegments, heightSegments, phiStart, phiLength, thetaStart, thetaLength)

radius — 球体半径，默认是50.
widthSegments — 水平方向上的切割线，最小值是3，默认是8.
heightSegments — 竖直方向上的切割线，最小值是2，默认值是6.
phiStart —水平方向的其实位置，默认是0，九点钟方向.
phiLength — 水平方向的圆心角，默认是2*PI.
thetaStart — 竖直方向上的起始角度，默认是0，y轴正方向.
thetaLength — 竖直方向上的圆心角，默认是PI.

例子：

var sphere = new THREE.Mesh(new THREE.SphereGeometry(50,10,10,0,Math.PI*2, 0, Math.PI/2),material);
    scene.add(sphere);

TetrahedronGeometry/四面体
TetrahedronGeometry(radius, detail)

radius — 十二面体的半径，默认是1.
detail — 默认是0，设置为n时，几何体的面增加4的n倍.

TorusGeometry/圆环面

TorusGeometry(radius, tube, radialSegments, tubularSegments, arc)

radius — 圆环的半径.
tube — 圆环截面半径.
radialSegments —管段表面三角形切割面的数量
tubularSegments — 管段数量，默认是6.
arc — 圆心角，默认是2PI.

例子

var torus = new THREE.Mesh(new THREE.TorusGeometry(100,30,30,20,Math.PI*2),material);
    scene.add(torus);

TorusKnotGeometry/环形纽面
TorusKnotGeometry(radius, tube, tubularSegments, radialSegments, p, q)

radius — 半径，默认是100.
tube — 管道截面半径，默认是40.
radialSegments —管段表面三角形切割面的数量
tubularSegments — 管段数量，默认是6.
p — 该值决定图形围绕中心轴的环的数量.
q — 该值决定环的起伏数量

注意：如果p和q不互质,那么自动将p=p/最大公因数；q=q/最大公因数

例子

var torusKnot = new THREE.Mesh(new THREE.TorusKnotGeometry(60,10,60,8,2,5),material);
    scene.add(torusKnot);

以上就是three.js常用的几何体，当然还有几个不是很常用的，而且官方文档上也没有详细介绍，这里就不做介绍了，向要了解的朋友可以到官网上看看。

最后吐槽一下csdn的博客编辑器，没有自动保存功能真的是把朕害苦了，前后共编辑了三次才完成。由于博文太长，没法一次写完，第一次写的时候，没有保存到草稿箱，关闭浏览器之后所有内容都丢掉了。第二次编辑的时候只保存一半到草稿箱，丢了一大半。希望csdn官方能解决这个问题。