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 } ) );