threejs 几何形状用法和解释

文章适用threejs开发入门阶段。

本文阅读前请先掌握好相机、场景、渲染器的基本用法。

一、立方体

THREE.CubeGeometry(width, height, depth, widthSegments, heightSegments, depthSegments)；
THREE.CubeGeometry(x方向上的长度, y方向上的长度, z方向上的长度, x方向上分段数, y方向上分段数, z方向上分段数)；
分段是对六个面进行分段，而不是对立方体的体素分段，因此在立方体的中间是不分段的，只有六个侧面被分段。

例子：

new THREE.CubeGeometry(1, 2, 3);可以创建一个x方向长度为1，y方向长度为2，z方向长度为3的立方体。

二、平面

THREE.PlaneGeometry(width, height, widthSegments, heightSegments);
THREE.PlaneGeometry(x方向上的长度, y方向上的长度,x方向上分段数,y方向上分段数);

例子：

new THREE.PlaneGeometry(2, 4);创建的平面在x轴和y轴所在平面内，要创建的平面在x轴和z轴所在的平面内，可以通过物体的旋转来实现

三、球体

THREE.SphereGeometry(radius, segmentsWidth, segmentsHeight, phiStart, phiLength, thetaStart, thetaLength);
THREE.SphereGeometry(半径, 经度上的切片数, 纬度上的切片数, 经度开始的弧度, 经度跨过的弧度, 纬度开始的弧度, 纬度跨过的弧度);

例子：

new THREE.SphereGeometry(3, 8, 6)可以创建一个半径为3，经度划分成8份，纬度划分成6份的球体。
new THREE.SphereGeometry(3, 8, 6, Math.PI / 2, Math.PI, Math.PI / 6, Math.PI / 2)。

四、圆形

THREE.CircleGeometry(radius, segments, thetaStart, thetaLength)；
THREE.CircleGeometry(半径, 切片数, 纬度开始的弧度, 纬度跨过的弧度)；

例子：

new THREE.CircleGeometry(3, 18, Math.PI / 3, Math.PI / 3 * 4)可以创建一个在x轴和y轴所在平面的三分之二圆的扇形

五、圆柱体

THREE.CylinderGeometry(radiusTop, radiusBottom, height, radiusSegments, heightSegments, openEnded);
THREE.CylinderGeometry(顶面, 底面的半径, 圆柱体的高度, 顶面分段, 高度分段, 布尔值，是否没有顶面和底面);

例子：

new THREE.CylinderGeometry(2, 2, 4, 18, 3)创建一个顶面与底面半径都为2，高度为4的圆柱体。
new THREE.CylinderGeometry(2, 3, 4, 18, 3)将底面半径设为3创建一个圆台。
new THREE.CylinderGeometry(2, 3, 4, 18, 3, true)将创建一个没有顶面与底面的圆台。

六、正四面体、正八面体、正二十面体

THREE.TetrahedronGeometry(radius, detail);正四面体
THREE.OctahedronGeometry(radius, detail);正八面体
THREE.IcosahedronGeometry(radius, detail);正二十面体
radius是半径；detail是细节层次（Level of Detail）的层数

例子：

new THREE.TetrahedronGeometry(3)创建一个半径为3的正四面体。
new THREE.OctahedronGeometry(3)创建一个半径为3的正八面体。
new THREE.IcosahedronGeometry(3)创建一个半径为3的正二十面体。

七、圆环面

THREE.TorusGeometry(radius, tube, radialSegments, tubularSegments, arc);
THREE.TorusGeometry(圆环半径, 管道半径, 圆环半径分段数, 管道半径分段数, 圆环面的弧度);

例子：

new THREE.TorusGeometry(3, 1, 4, 8)创建一个粗糙的圆环面。
new THREE.TorusGeometry(3, 1, 12, 18)创建一个较为精细的圆环面。
new THREE.TorusGeometry(3, 1, 4, 8, Math.PI / 3 * 2)创建部分圆环面。

八、圆环结

THREE.TorusKnotGeometry(radius, tube, radialSegments, tubularSegments, p, q, heightScale);
THREE.TorusKnotGeometry(圆环半径, 管道半径, 圆环半径分段数, 管道半径分段数, p, q, z轴方向上的缩放);
p和q是控制其样式的参数，一般可以缺省

例子：

new THREE.TorusKnotGeometry(2, 0.5, 32, 8)。

 九、文字形状

使用文字形状需要先引入字体库

THREE.TextGeometry(text, parameters);
THREE.TextGeometry(text, {
    size:字号大小，一般为大写字母的高度,
    height:文字的厚度,
    curveSegments:弧线分段数，使得文字的曲线更加光滑,
    font:字体，默认是'helvetiker'，需对应引用的字体文件,
    weight:值为'normal'或'bold'，表示是否加粗,
    style:'值为'normal'或'italics'，表示是否斜体',
    bevelEnabled:'布尔值，是否使用倒角，意为在边缘处斜切',
    bevelThickness:'倒角厚度',
    bevelSize:'倒角宽度'
});

例子：

new THREE.TextGeometry('Hello', {size: 1, height: 1});三维文字

十、自定义形状

THREE.Geometry()

例子：

// 初始化几何形状
var geometry = new THREE.Geometry();

// 设置顶点位置
// 顶部4顶点
geometry.vertices.push(new THREE.Vector3(-1, 2, -1));
geometry.vertices.push(new THREE.Vector3(1, 2, -1));
geometry.vertices.push(new THREE.Vector3(1, 2, 1));
geometry.vertices.push(new THREE.Vector3(-1, 2, 1));
// 底部4顶点
geometry.vertices.push(new THREE.Vector3(-2, 0, -2));
geometry.vertices.push(new THREE.Vector3(2, 0, -2));
geometry.vertices.push(new THREE.Vector3(2, 0, 2));
geometry.vertices.push(new THREE.Vector3(-2, 0, 2));

// 设置顶点连接情况
// 顶面
geometry.faces.push(new THREE.Face3(0, 1, 3));
geometry.faces.push(new THREE.Face3(1, 2, 3));
// 底面
geometry.faces.push(new THREE.Face3(4, 5, 6));
geometry.faces.push(new THREE.Face3(5, 6, 7));
// 四个侧面
geometry.faces.push(new THREE.Face3(1, 5, 6));
geometry.faces.push(new THREE.Face3(6, 2, 1));
geometry.faces.push(new THREE.Face3(2, 6, 7));
geometry.faces.push(new THREE.Face3(7, 3, 2));
geometry.faces.push(new THREE.Face3(3, 7, 0));
geometry.faces.push(new THREE.Face3(7, 4, 0));
geometry.faces.push(new THREE.Face3(0, 4, 5));
geometry.faces.push(new THREE.Face3(0, 5, 1));