参考博客:ThreeJs 图形绘制基础
二、图形绘制主要流程
图形绘制一般流程为:构造 Shape、构造 BufferGeometry 、构造 Mesh 并添加到场景中。
图形绘制的基础有 3 个比较核心的类:Curve,Path 以及 Shape。
Shape 是间接继承自 Curve ,Curve 定义了 getPoints() 的基础。Shape 的 getPoints() 的具体实现在 CurvePath 中的实现,从而获取构造这个图形所需要的点。
在 Path 的各绘制 API 中,又是进步构造相应的曲线,如 new 一个 LineCurve,CubicBezierCurve 等,从而完成曲线的构造。
在实际的开发过程中,我们一般使用 Shape 来绘制出我们想要的形状。
lineTo: 绘制直线
quadraticCurveTo: 二次贝塞尔曲线
bezierCurveTo: 三次贝塞尔曲线
arc: 弧线
ellipse: 椭圆
......
上面类图中,***Curve 带后缀 3 的都是进行 3D 的图形绘制,其他自然就都是 2D 的绘制了。
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( points );
3. 构造网格
var mesh = new THREE.Line( geometryPoints, new THREE.LineBasicMaterial( { color: color } ) );