three.js Path

該類定義了二維路徑，提供了一些類似2D Canvas API的方法來創(chuàng)建或者構(gòu)造二維路徑。

代碼示例

const path = new THREE.Path();

path.lineTo( 0, 0.8 );
path.quadraticCurveTo( 0, 1, 0.2, 1 );
path.lineTo( 1, 1 );

const points = path.getPoints();

const geometry = new THREE.BufferGeometry().setFromPoints( points );
const material = new THREE.LineBasicMaterial( { color: 0xffffff } );

const line = new THREE.Line( geometry, material );
scene.add( line );

構(gòu)造函數(shù)

Path( points : Array )

points -- （可選）Vector2s數(shù)組。

從傳入的點(diǎn)中創(chuàng)建一條Path。第一個點(diǎn)定義了偏移量， 接下來的點(diǎn)作為LineCurves被添加到curves數(shù)組中。

倘若沒有點(diǎn)被指定，一條空路徑將會被創(chuàng)建，.currentPoint將被設(shè)置為原點(diǎn)。

屬性

共有屬性請參見其基類CurvePath。

.currentPoint : Vector2

路徑當(dāng)前的偏移量，任何新被加入的Curve將會從這里開始。

方法

共有方法請參見其基類CurvePath。

.absarc ( x : Float, y : Float, radius : Float, startAngle : Float, endAngle : Float, clockwise : Boolean ) : this

x, y -- 弧線的絕對中心。
radius -- 弧線的半徑。
startAngle -- 起始角，以弧度來表示。
endAngle -- 終止角，以弧度來表示。
clockwise -- 以順時針方向創(chuàng)建（掃過）弧線。默認(rèn)值為false。

添加一條絕對定位的EllipseCurve到路徑中。

.absellipse ( x : Float, y : Float, xRadius : Float, yRadius : Float, startAngle : Float, endAngle : Float, clockwise : Boolean, rotation : Float ) : this

x, y -- 橢圓的絕對中心。
xRadius -- 橢圓x軸方向的半徑。
yRadius -- 橢圓y軸方向的半徑。
startAngle -- 起始角，以弧度來表示。
endAngle -- 終止角，以弧度來表示。
clockwise -- 以順時針方向創(chuàng)建（掃過）橢圓。默認(rèn)值為false。
rotation -- 橢圓從X軸正方向逆時針的旋轉(zhuǎn)角度（可選），以弧度表示，默認(rèn)值為0。

添加一條絕對定位的EllipseCurve到路徑中。

.arc ( x : Float, y : Float, radius : Float, startAngle : Float, endAngle : Float, clockwise : Boolean ) : this

x, y -- 弧線的中心來自上次調(diào)用后的偏移量。
radius -- 弧線的半徑。
startAngle -- 起始角，以弧度來表示。
endAngle -- 終止角，以弧度來表示。
clockwise -- 以順時針方向創(chuàng)建（掃過）弧線。默認(rèn)值為false。

添加一條EllipseCurve到路徑中，位置相對于.currentPoint。

.bezierCurveTo ( cp1X : Float, cp1Y : Float, cp2X : Float, cp2Y : Float, x : Float, y : Float ) : this

從.currentPoint創(chuàng)建一條貝塞爾曲線，以(cp1X, cp1Y)和(cp2X, cp2Y)作為控制點(diǎn)，并將.currentPoint更新到x,y。

.ellipse ( x : Float, y : Float, xRadius : Float, yRadius : Float, startAngle : Float, endAngle : Float, clockwise : Boolean, rotation : Float ) : this

x, y -- 橢圓的中心來自上次調(diào)用后的偏移量。The center of the ellipse offset from the last call.
xRadius -- 橢圓x軸方向的半徑。
yRadius -- 橢圓y軸方向的半徑。
startAngle -- 起始角，以弧度來表示。
endAngle -- 終止角，以弧度來表示。
clockwise -- 以順時針方向創(chuàng)建（掃過）橢圓。默認(rèn)值為false。
rotation -- 橢圓從X軸正方向逆時針的旋轉(zhuǎn)角度（可選），以弧度表示，默認(rèn)值為0。

添加一條EllipseCurve到路徑中，位置相對于.currentPoint。

.lineTo ( x : Float, y : Float ) : this

在當(dāng)前路徑上，從.currentPoint連接一條直線到x,y。

.moveTo ( x : Float, y : Float ) : this

將.currentPoint移動到x, y。

.quadraticCurveTo ( cpX : Float, cpY : Float, x : Float, y : Float ) : this

從.currentPoint創(chuàng)建一條二次曲線，以(cpX,cpY)作為控制點(diǎn)，并將.currentPoint更新到x,y。

.setFromPoints ( vector2s : Array ) : this

points -- Vector2數(shù)組。點(diǎn)將被作為LineCurves加入到curves數(shù)組中。

.splineThru ( points : Array ) : this

points -Vector2數(shù)組。連接一條新的SplineCurve到路徑上。

源代碼

src/extras/core/Path.js