[ThreeJS] 初心者入門 (二) ─ 幾何 Geometry

ThreeJS中提供了少量基礎的幾何模型，如長方體(Box3)，球體(Sphere)等，但如果需要使用較複雜的模型結構，ThreeJS也提供了加載外部模型的模塊(Loader)，可以加載外部的Obj，json等格式的模型。另外，ThreeJS的Github倉庫中還提供了在3ds Max、Blender等3D繪製軟件中導出模型的工具。是的，我們就可以用別的3D建模軟件建模再導出成ThreeJS所需要的格式了。

Geometry與BufferGeometry

在介紹各種基本的幾何模型前，我們先來了解ThreeJS提供的基本幾何模型都有分『Geometry』與『BufferGeometry』，而他們又有什麼不同呢?簡單的來說就是『Geometry』是『BufferGeometry』的前代。

若想使用原生 API 的 GPU 快取方式來撰寫程式，就可以使用 『BufferGeometry』，這個類別將頂點、索引、顏色或紋理座標、法線資料封裝在一起，可以充分利用 GPU 快取中，實現大幅的加速功能。
但也是它的缺陷，因為快取計算比較複雜，因此如果更改這些快取中的資料就會花費更多計算，因此這類別主要用在靜態物件。

內建幾何模型

ThreeJS 提供了基本的幾何模型，這些幾何模型已經計算了法線，甚至紋理座標都已經提供：

• BoxGeometry / BoxBufferGeometry ( 立方體 )

雖然這一形狀的名字叫立方體（CubeGeometry），但它其實是長方體，也就是長寬高可以設定為不同的值。其建構函式是：

THREE.CubeGeometry(width,height,depth,widthSegments,heightSegments, depthSegments)

官方範例

• SphereGeometry / SphereBufferGeometry ( 球體 )

球體（SphereGeometry）的建構函式是：

THREE.SphereGeometry(radius,segmentsWidth,segmentsHeight,phiStart, phiLength, thetaStart, thetaLength)

官方範例

• ConeGeometry / ConeBufferGeometry ( 角錐體 )

角錐體（ConeGeometry）的建構函式是：

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

官方範例

• CylinderGeometry / CylinderBufferGeometry ( 圓柱體 )

圓柱體（CylinderGeometry）的建構函式是：

THREE.CylinderGeometry(radiusTop, radiusBottom, height, radialSegments, heightSegments, openEnded, thetaStart, thetaLength)

官方範例

• TubeGeometry / TubeBufferGeometry ( 管狀體 )

管狀體（TubeGeometry）的建構函式是：

THREE.TubeGeometry(path, tubularSegments, radius, radialSegments, closed)

官方範例

• TorusGeometry / TorusBufferGeometry ( 環狀曲面體 )

環狀曲面體（TorusGeometry）的建構函式是：

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

官方範例

• TextGeometry / TextBufferGeometry ( 文字體 )

文字體(TextGeometry)，可使用 Helvetiker 字型或使用其他英文字體(需轉換 json 格式)。其建構函式是：

THREE.TextGeometry(text, parameters)

官方範例

以上就是比較常用的內建幾何模型。

參考網站：

three.js - Javascript 3D library

3D 網站開發入門筆記