three.js 笔记四 shape

一、基本流程

参考
ThreeJs 图形绘制基础
https://github.com/mrdoob/three.js/blob/master/examples/webgl_geometry_shapes.html

在 ThreeJs 中，提供了一套 Shape 和 Curve 相关的 API 来帮助我们在 3D 场景中绘制出我们想要的图形。图形绘制一般流程为：构造 Shape、构造 BufferGeometry 、构造 Mesh 并添加到场景中。

1.构造shape

var circleRadius = 40;
var circleShape = new THREE.Shape();
circleShape.moveTo( 0, circleRadius );

circleShape.quadraticCurveTo( circleRadius, circleRadius, circleRadius, 0 );
circleShape.quadraticCurveTo( circleRadius, - circleRadius, 0, - circleRadius );
circleShape.quadraticCurveTo( - circleRadius, - circleRadius, - circleRadius, 0 );
circleShape.quadraticCurveTo( - circleRadius, circleRadius, 0, circleRadius );

2.构造 BufferGeometry

var points = shape.getPoints();
var geometryPoints = new THREE.BufferGeometry().setFromPoints( subPoints );

3.构造 Mesh 并添加到场景中

function addLineShape( shape, color, x, y, z, rx, ry, rz, s ) {

    // lines

    shape.autoClose = true;

    var points = shape.getPoints();

    console.log( "addLineShape ", points );
    let length = points.length;

    let val = 0;

    function drawLine(  ) {

        if(val == length) return;

        let subPoints1 = points[val];
        let subPoints2 = points[(val + 1) % length];

        let subPoints = [];
        subPoints.push(subPoints1);
        subPoints.push(subPoints2);

        var geometryPoints = new THREE.BufferGeometry().setFromPoints( subPoints );

        // solid line

        var line = new THREE.Line( geometryPoints, new THREE.LineBasicMaterial( { color: color } ) );
        line.position.set( x, y, z );
        line.rotation.set( rx, ry, rz );
        line.scale.set( s, s, s );
        scene.add( line );

        val++;

        setTimeout(drawLine,16);
    }

    drawLine();
}

二、测试用例

1.自动闭合

shapeRef.moveTo(500,500);
shapeRef.lineTo(1000,500);
shapeRef.lineTo(1000,1000);

shapeRef.moveTo(1500,500);
shapeRef.lineTo(2000,500);
shapeRef.lineTo(2000,1000);
shapeRef.lineTo(1500,1500);

image.png

根据图形推断，moveTo到达一个点P后，最后画的那条线会自动向点P补一条线进行闭合。

2.THREE.Shape 类的一些绘图函数

参考
three.js 几何体（二）

函数名	作用
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 函数。只不过其指定的圆心位置是绝对位置，而不是相对当前位置的偏移量。