【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...