three.js 几何体（二）

上一篇简单的介绍了几何体的构造体参数，这一篇郭先生就更加详细的说一说（十分简单的几何体我就不说了）。

1. ShapeGeometry形状几何体

形状几何体方便我们从一个或多个路径形状中创建一个单面多边形几何体，和canvas一样都是二维图形。下面我们只做一颗心形。

var shape = new THREE.Shape();

shape.moveTo(0, 1.5);

shape.bezierCurveTo(2, 3.5, 4, 1.5, 2, -0.5);

shape.lineTo(0, -2.5);

shape.lineTo(-2, -0.5);

shape.bezierCurveTo(-4, 1.5, -2, 3.5, 0, 1.5);

var geometry = new THREE.ShapeGeometry(shape);

下面还有THREE.Shape 类的一些绘图函数。

函数名	作用
moveTo(x, y)	将绘图点移动到指定的 x、y 坐标处
lineTo(x, y)	从当前位置（例如 moveTo 设定的位置）画一条线到指定的 x、y 坐标处
quadricCurveTo(cpx, cpy, x, y)（二次曲线）	此函数为二次曲线。你可以使用两种方法来画曲线：quadricCurveTo 或者 bezierCurveTo。这两种曲线的不同之处在于指定曲线曲率的方法不一样，如下图所示：对于二次曲线，除了指定结束点（x, y）外，还需要额外指定一个点（cpx, cpy）来控制曲线的曲率（不用指定起始点，因为路径的当前位置就是起始点）；对于三次曲线，除了指定结束点（x, y）外，还需要额外指定两个点（cpx1, cpy1, cpx2, cpy2）来控制曲线的曲率。
bezierCurveTo(cpx1, cpy1, cpx2, cpy2, x, y)（贝塞尔曲线）	此函数为三次曲线。相关说明参考上一行的二次曲线。
splineThru(vector2Array)	此函数沿着参数指定的坐标集合绘制一条光滑的样条曲线。其参数为一THREE.Vector2 对象数组。
arc(x, y, radius, startAngle, endAngle, clockwise)	次函数绘制一个圆或者一段弧。x, y 用来指定圆心与当前位置的偏移量。radius 设定圆的大小。而 startAngle 及 endAngle 则用来定义圆弧要画多长。布尔属性 clockwise 决定这段弧是顺时针画还是逆时针画。
absArc(x, y, radius, startAngle, endAngle, clockwise)	参考 arc 函数。只不过其指定的圆心位置是绝对位置，而不是相对当前位置的偏移量。
ellipse(x, y, radiusX, radiusY, startAngle, endAngle, clockwise)	参考 arc 函数。只是椭圆可以分别指定 x 轴半径及 y 轴半径。
absEllipse(x, y, radiusX, radiusY, startAngle, endAngle, clockwise)	参考 ellipse 函数。只不过其指定的圆心位置是绝对位置，而不是相对当前位置的偏移量。

2. TextGeometry文本几何体

文本几何体是一个用于将文本生成为单一的几何体的类。它是由一串给定的文本，以及由加载的Font（字体）和该几何体ExtrudeGeometry父类中的设置所组成的参数来构造的（ShapeGeometry和ExtrudeGeometry的结合），文本几何体使用起来也十分方便，一般都会搭配FontLoader()或者Font()一起使用。代码如下

var loader = new THREE.FontLoader();

loader.load( 'fonts/helvetiker_regular.typeface.json', function ( font ) {

    var geometry = new THREE.TextGeometry( 'three', {

        font: font, //THREE.Font的实例

        size: 100, //字体大小，默认值为100

        height: 50, //挤出文本的厚度。默认值为50

        curveSegments: 12, //表示文本的）曲线上点的数量。默认值为12

        bevelEnabled: false, //是否开启斜角，默认为false

        bevelThickness: 20, //文本上斜角的深度，默认值为20

        bevelSize: 8, //斜角与原始文本轮廓之间的延伸距离。默认值为8

        bevelSegments: 3 //斜角的分段数。默认值为3

    } );

} );

下面是另一种使用方法

var geometry= new THREE.TextGeometry("js", {

    font: new THREE.Font(json),

        size: 100,

        height: 50,

        curveSegments: 12,

        bevelEnabled: false,

        bevelThickness: 20,

        bevelSize: 8,

        bevelSegments: 3

});

3. PolyhedronGeometry多面几何体

这个几何体其实和Geometry非常相似，通过传递点和面的数组构建几何体，不过他还有两个参数，一个是半径，一个是细分数，简单的说半径越大几何体就越大（大小不仅是通过点坐标控制），细分数越多，每个面会被细分成更多的面，形状就越平滑。不是很难，用的机会不多。

var verticesOfCube = [0,1,0,1,-1,0,0,-1,1,-1,-1,0,0,-1,-1];

var indicesOfFaces = [1,0,2,2,0,3,3,0,4,4,0,1,1,2,3,3,2,4];

var geometry = new THREE.PolyhedronGeometry(verticesOfCube,indicesOfFaces,2,1);

4. TubeGeometry管道几何体

管道几何体顾名思义就是可以非常方便的制作出类似管道的几何体。它的第一个参数是path,即可以是二维的曲线，也可以是三维的曲线，关于曲线的知识我以后会说，

var curve = new THREE.CatmullRomCurve3([ //CatmullRomCurve可以通过一系列点创建一条平滑的曲线。

    new THREE.Vector3(-1.5, -1.5, -1.5),

    new THREE.Vector3(-1.5, -1.5, 1.5),

    new THREE.Vector3(1.5, -1.5, 1.5),

    new THREE.Vector3(1.5, -1.5, -1.5),

    new THREE.Vector3(1.5, 1.5, -1.5),

    new THREE.Vector3(1.5, 1.5, 1.5),

    new THREE.Vector3(-1.5, 1.5, 1.5),

    new THREE.Vector3(-1.5, 1.5, -1.5),

    new THREE.Vector3(-1.5, -1.5, -1.5)

]);

var geometry = new THREE.TubeGeometry(curve, 64, 0.3, 8, false);

这节就先说四种几何体，下节在继续

转载请注明地址：郭先生的博客