【three.js學習筆記】幾何體

Geometry api

Geometry

var geometry = new THREE.Geometry();

立方體（BoxGeometry）

老版本里面貌似是CubeGeometry，在r76版本的文檔中，使用的是BoxGeometry。

構造函數

BoxGeometry(width, height, dept, widthSegments, heightSegments, depthSegments)

• width,height,dept分別是長寬高
• widthSegments, heightSegments, deptSegments是對應長寬高的分段，在使用線模式({wireframe:true})進行渲染的時候，能夠看到效果以下。

var cubeGeometry = new THREE.BoxGeometry(6, 6, 6, 2, 3, 1);
var cubeMaterial = new THREE.MeshBasicMaterial({
    wireframe : true
});
cubeMaterial.color = new THREE.Color('red');
var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);

長寬高分別被截爲2段，3段，1段。

球體（SphereGeometry）

構造函數

SphereGeometry(radius, widthSegments, heightSegments, phiStart, phiLength, thetaStart, thetaLength)

• radius：球體半徑
• widthSegments, heightSegments：水平方向和垂直方向上分段數。widthSegments最小值爲3，默認值爲8。heightSegments最小值爲2，默認值爲6。
• phiStart：水平方向上的起始角,默認值0
• phiLenght：水平方向上球體曲面覆蓋的弧度，默認Math.PI * 2
• thetaStart : 垂直方向上的起始角， 默認0
• thetaLength: 垂直方向是球體曲面覆蓋的弧度，默認值爲Math.PI

多邊形（ShapeGeometry）

前面都是一些立體的圖形，多邊形(ShapeGeometry)用來建立一個平面多邊形。

構造函數

ShapeGeometry(shapes, options)

• shapes形狀數組
• 可選的參數對象，可配置參數curveSegments, meterial, UVGenerator。

實例方法

• addShapeList(shapes, options) 添加圖形（Shape實例）列表到多邊形中
• addShape(shape, options)添加單個圖形（Shape實例）到多邊形中。

例子

var rectShape= new THREE.Shape();
rectShape.moveTo(1,4);
rectShape.lineTo(1, 8);
rectShape.lineTo(5, 8);
rectShape.lineTo(5, 4);
rectShape.lineTo(3, -4);
rectShape.lineTo(1, 4);
var rectGeom = new THREE.ShapeGeometry( rectShape );
var rectMesh = new THREE.Mesh( rectGeom, new THREE.MeshBasicMaterial( { color: 0xff0000 } ) ) ;

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

參考文檔：https://blog.csdn.net/u011135...