一舔痕、基本流程
參考
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
根據(jù)圖形推斷絮重，moveTo到達一個點P后冤寿，最后畫的那條線會自動向點P補一條線進行閉合。
2.THREE.Shape 類的一些繪圖函數(shù)
| 函數(shù)名 | 作用 |
|---|---|
| moveTo(x, y) | 將繪圖點移動到指定的 x青伤、y 坐標處 |
| lineTo(x, y) | 從當前位置（例如 moveTo 設定的位置）畫一條線到指定的 x督怜、y 坐標處 |
| quadricCurveTo(cpx, cpy, x, y)（二次曲線） | 此函數(shù)為二次曲線。你可以使用兩種方法來畫曲線：quadricCurveTo 或者 bezierCurveTo狠角。這兩種曲線的不同之處在于指定曲線曲率的方法不一樣号杠，如下圖所示：對于二次曲線，除了指定結束點（x, y）外丰歌，還需要額外指定一個點（cpx, cpy）來控制曲線的曲率（不用指定起始點姨蟋，因為路徑的當前位置就是起始點）；對于三次曲線立帖，除了指定結束點（x, y）外眼溶，還需要額外指定兩個點（cpx1, cpy1, cpx2, cpy2）來控制曲線的曲率。 |
| bezierCurveTo(cpx1, cpy1, cpx2, cpy2, x, y)（貝塞爾曲線） | 此函數(shù)為三次曲線晓勇。相關說明參考上一行的二次曲線堂飞。 |
| splineThru(vector2Array) | 此函數(shù)沿著參數(shù)指定的坐標集合繪制一條光滑的樣條曲線。其參數(shù)為一THREE.Vector2 對象數(shù)組绑咱。 |
| arc(x, y, radius, startAngle, endAngle, clockwise) | 次函數(shù)繪制一個圓或者一段弧绰筛。x, y 用來指定圓心與當前位置的偏移量。radius 設定圓的大小描融。而 startAngle 及 endAngle 則用來定義圓弧要畫多長别智。布爾屬性 clockwise 決定這段弧是順時針畫還是逆時針畫。 |
| absArc(x, y, radius, startAngle, endAngle, clockwise) | 參考 arc 函數(shù)稼稿。只不過其指定的圓心位置是絕對位置薄榛，而不是相對當前位置的偏移量。 |
| ellipse(x, y, radiusX, radiusY, startAngle, endAngle, clockwise) | 參考 arc 函數(shù)让歼。只是橢圓可以分別指定 x 軸半徑及 y 軸半徑敞恋。 |
| absEllipse(x, y, radiusX, radiusY, startAngle, endAngle, clockwise) | 參考 ellipse 函數(shù)。只不過其指定的圓心位置是絕對位置谋右，而不是相對當前位置的偏移量硬猫。 |
