一、基本流程
参考
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 类的一些绘图函数
| 函数名 | 作用 |
|---|---|
| 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 函数。只不过其指定的圆心位置是绝对位置，而不是相对当前位置的偏移量。 |
