05.ThreeJs开发指南-第五章-几何体

第五章 学习使用几何体

二维几何体：

一、PlaneGeometry：平面

var plane = new THREE.PlaneGeometry(width,height,widthSegments,heightSegments);

width: 必须，矩形宽度
height:必须，矩形高度
widthSegments:可选，指定矩形的宽度应该划分成几段。
heightSegments:可选，指定矩形的高度应该划分成几段。

function createMesh(geometry){
    var meshMaterial = new THREE.MeshNormalMaterial();
    meshMaterial.side = THREE.DoubleSize;
    var wireFrameMaterial = new THREE.MeshBasicMaterial();
    wireFrameMaterial.wireframe = true;

    var mesh = THREE.SceneUtils.createMultiMaterialObject(geometry,[meshMaterial,wireFrameMaterial]);

    return mesh;
}

二、CircleGeometry： 二维圆

基本属性：
radius：必须。
segments：可选。定义创建圆时所用的面的数量。最少3个，默认8个。值越大，越光滑。
thetaStart：可选。取值范围：0-2*PI
thetaLength：可选。默认2*PI，表示圆要画多大，0.5*PI表示1/4圆。

new THREE.CircleGeometry(3,12);//半径3，12个三角形组成的圆

new THREE.CircleGeometry(3,12,0,Math.PI);//半圆

三、ShapeGeometry： 自定义二维图形

function drawShape(){

    var shape = new THREE.Shape();

    //将绘图点移动到指定的位置
    shape.moveTo(10,10);

    //从当前位置画一条线到指定的位置
    shape.lineTo(10,40);

    //贝塞尔曲线，当前点作为起始点，(15,25) 和 (25,25) 两点决定曲线的曲率，(30,40)作为结束点。
    shape.bezierCurveTo(15,25,25,25,30,40);

    //沿着提供的点集绘制一条光滑的曲线。起始点是当前点。
    shape.splineThru(
    [
        new THREE.Vector2(32,30),
        new THREE.Vector2(28,20),
        new THREE.Vector2(30,10)
    ]);

    //二次曲线 (20,15) 决定当前曲线的曲率，(10,10) 曲线的结束点。当前点作为起始点。
    shape.quadraticCurveTo(20,15,10,10);

    var hole1 = new THREE.Path();
    hole1.absellipse(16,24,2,3,0,Math*PI*2,true);
    shape.holes.push(hole1);

    var hole2 = new THREE.Path();
    hole2.absellipse(23,24,2,3,0,Math.PI*2,true);
    shape.holes.push(hole2);

    var hole3 = new THREE.Path();
    hole3.absarc(20,16,2,0,Math.PI,true);
    shape.holes.push(hole3);

    return shape;
}

new THREE.ShapeGeometry(drawShape());

Shape的基本函数：
arc(ax,ay,aRadius,aStartAngle,aEndAngle,aClockwise): 画圆，圆弧起始于当前位置，ax，ay指定圆心与当前位置的偏移量。aRadius圆的半径，aStartAngle和aEndAngle则用来定义圆弧要画多长。aClockwise决定这段圆弧是顺时针还是逆时针画。

absArc(aX,aY,aRadius,aStartAngle,aEndAngle,aClockwise)： 参考arc，其位置是绝对位置，而不是相对位置。

ellipse(aX,aY,xRadius,yRadius,aStartAngle,aEndAngle,aClockwise)： ellipse可以指定x轴半径和y轴半径。

absEllipse(aX,aY,xRadius,yRadius,aStartAngle,aEndAngle,aClockwise)： 其位置是绝对位置，而不是相对位置。

Shape对象的holes属性：
可以往这个属性中添加THREE.Shape对象。

Shape对象本身也有几个辅助函数：
makeGeometry：从Shape对象返回一个ShapeGeometry对象。
createPointsGeometry(divisions)：将图形转换为一个点集。divisions定义返回点的数目。这个值越大，返回的点越多，最终的图形就越光滑。divisions会分别应用到路径的每一部分。
createSpacedPointsGeometry(divisions)：将图形转换成一个点集，但是，divisions一次性应用到整个路径上。

new THREE.Line(shape.createPointsGeometry(10),new THREE.LineBasicMaterial({color:0xff3333,linewidth:2}));

三维物体：

一、CubeGeometry

new　THREE.CubeGeometry(10,10,10);

基本属性：
width：必须。宽度，沿x轴方向的长度。
height：必须。高度，沿y轴方向的长度。
depth：必须。深度。沿z轴方向的长度。
widthSegments：沿x轴方向将面分成多少份。默认为1.
heightSegments：沿y轴方向将面分成多少份。默认为1.
depthSegments：沿z轴方向将面分成多少份。默认为1.

二、SphereGeometry 三维球体

radius：半径，默认50.
widthSegments：指定竖直方向上的分段数。默认是8，最小是3.
heightSegments：指定水平方向上的分段数。默认是6，最小是2.
phiStart：指定从x轴什么地方开始绘制。取值范围是：0-2*PI。默认是0。
phiLength：指定从phiStart开始画多少。2*PI是整个球。
thetaStart：指定从y轴什么地方开始绘制。取值范围：0-PI。默认为0.
thetaLength：指定从thetaStart开始画多少。PI是整个球。0.5*PI只会画上半球。

new THREE.SphereGeometry();

三、CylinderGeometry：圆柱

new THREE.CylinderGeometry()

基本属性：

radiusTop：设置圆柱顶部的尺寸。默认为20.
radiusBottom：底部尺寸。默认为20.
height：高度，默认100
segmentsX：沿x轴分多少段。默认8
segmentsY：沿y轴分多少段。默认1
openEnded：指定网格顶部和底部是否关闭。默认false。

对顶圆锥：
如果将圆柱的顶部(或底部)半径设置为负数，则会看到画出的图形是一个对顶圆锥。这个图形是将圆柱的上半部分（或下半部分）内外翻转了，所以这里的材质属性如果不设置为THREE.DoubleSide，则不会看到上半部分。

四、TorusGeometry：圆环

new THREE.TorusGeometry()

基本属性：

radius：设置完整圆环的半径。默认100.
tube：设置管子的半径，默认40.
radialSegments：沿圆环长度方向分成的段数，默认8.
tubularSegments：沿圆环宽度方向分成的段数。默认是6。
arc：控制圆环是否绘制一个完成的圆环。默认是2*PI。

五、TorusKnotGeometry：环面扭结

基本属性：

radius：设置完整圆环的半径。默认100.
tube：设置管子的半径，默认40.
radialSegments：沿圆环长度方向分成的段数，默认8.
tubularSegments：沿圆环宽度方向分成的段数。默认是6。
p：默认2，定义该结绕其轴多久旋转一次。
q：默认3，定义该结绕其内部旋转多少次。
heightScale：拉伸环面扭结。默认为1.

六、PolyhedronGeometry：多面体（只有平面和直边的几何体）

一般情况下，我们可能不直接使用这个函数创建多面体，因为Three.js为我们提供了几种特定的多面体。

如果我们确实要自己创建自定义的多面体，可能需要自己传递各个顶点和面。

//创建金字塔

var vertices = [

    [1,0,1],
    [1,0,-1],
    [-1,0,-1],
    [-1,0,1],
    [0,1,0]

];

var faces = [

    [0,1,2,3],
    [0,1,4],
    [1,2,4],
    [2,3,4],
    [3,0,4]
];

polyhedron = createMesh(new THREE.PolyhedronGeometry(vertices,faces,controls.radius),controls.detail));

基本属性：

vertices：必须。
faces：必须。
radius：可选。默认1.指定多面的大小。
detail：可选。如果设置为1，则这个多面体上的每个三角形都会被分成4个小三角形。如果设置为2，则那些4个小三角形中的每一个会继续分成4个小三角形，以此类推。

1. IcosahedronGeometry：正20面体。

创建20个相同三角形面的多面体，这些三角形面是从12个顶点中创建出来的。

只需要指定radius和detail水平。

1. TetrahedronGeometry：正四面体。

4个相同的三角形面，这些面是从4个顶点创建出来的。

只要指定radius和detial水平即可。

3.Octahedron：正八面体。

8个面，从6个顶点创建出来的。