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个顶点创建出来的。

©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页