three.js : 图形绘制基础

 

参考博客：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 } ) );