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));