three.js 曲線

Vadim發表於2020-07-14
JS

上幾篇說了three.js的曲線，這篇來郭先生來說說three.js曲線，線上案例點選郭先生的部落格檢視。

1. 瞭解three.js曲線

之前已經說了一些three.js的幾何體，這篇說一說three.js曲線。曲線的種類主要分兩種，二維曲線和三維曲線。下面整理了這些曲線

名稱引數
ArcCurve（弧線） aX – 圓的中心的X座標，預設值為0。aY – 圓的中心的Y座標，預設值為0。aRadius – 圓的半徑，預設值為1。aStartAngle – 以弧度來表示，從正X軸算起曲線開始的角度，預設值為0。aEndAngle – 以弧度來表示，從正X軸算起曲線終止的角度，預設值為2 x Math.PI。aClockwise – 圓是否按照順時針方向來繪製，預設值為false。aRotation – 以弧度表示，圓從X軸正方向逆時針的旋轉角度（可選），預設值為0。
EllipseCurve（橢圓曲線） aX – 橢圓的中心的X座標，預設值為0。aY – 橢圓的中心的Y座標，預設值為0。xRadius – X軸向上橢圓的半徑，預設值為1。yRadius – Y軸向上橢圓的半徑，預設值為1。aStartAngle – 以弧度來表示，從正X軸算起曲線開始的角度，預設值為0。aEndAngle – 以弧度來表示，從正X軸算起曲線終止的角度，預設值為2 x Math.PI。aClockwise – 橢圓是否按照順時針方向來繪製，預設值為false。aRotation – 以弧度表示，橢圓從X軸正方向逆時針的旋轉角度（可選），預設值為0。
LineCurve（二維線段曲線） 引數為起點v1:Vector2，和終點v2:Vector2
LineCurve3（三維線段曲線） 引數為起點v1:Vector3，和終點v2:Vector3
QuadraticBezierCurve（二維二次貝塞爾曲線） 引數為起點v1:Vector2，中間控制點a1:Vector2，終點v2:Vector2
QuadraticBezierCurve3（三維二次貝塞爾曲線） 引數為起點v1:Vector3，中間控制點a1:Vector3，終點v2:Vector3
CubicBezierCurve（二維三次貝塞爾曲線） 引數為起點v1:Vector2，中間控制點a1:Vector2，中間控制點a2:Vector2，終點v2:Vector2
CubicBezierCurve3（三維三次貝塞爾曲線） 引數為起點v1:Vector3，中間控制點a1:Vector3，中間控制點a2:Vector3，終點v2:Vector3
SplineCurve（樣條曲線） points – 定義曲線的Vector2點的陣列。
CatmullRomCurve3（三維樣條曲線） points – Vector3點陣列closed – 該曲線是否閉合，預設值為false。curveType – 曲線的型別，預設值為centripetal。tension – 曲線的張力，預設為0.5。

基本曲線主要是這些，ArcCurve和EllipseCurve是繪製圓和橢圓的，EllipseCurve是ArcCurve的基類，LineCurve和LineCurve3分別是二維和三維的曲線（數學曲線的定義包括直線），他們都是有起始點和終止點組成。QuadraticBezierCurve、QuadraticBezierCurve3、CubicBezierCurve和CubicBezierCurve3分別是二維和三維的二階和三階貝塞爾曲線，不知道貝塞爾曲線的人請移步至貝塞爾曲線，
SplineCurve和CatmullRomCurve3分別是二維和三維的樣條曲線，它們使用Catmull-Rom演算法，從一系列的點建立一條平滑的樣條曲線。

2. 曲線的使用

這裡我選取幾個代表性的曲線

//橢圓曲線
var geometry = new THREE.Geometry();
var curve = new THREE.EllipseCurve(0,0,10,20);
var points = curve.getPoints(100);
geometry.setFromPoints(points);
var material = new THREE.LineBasicMaterial({color: 0xff0000});
var line = new THREE.Line(geometry, material);
scene.add(line);
//三維線段
var geometry = new THREE.Geometry();
var curve = new THREE.LineCurve3(new THREE.Vector3(10, 20, 10), new THREE.Vector3(-10, -20, -10));
var points = curve.getPoints(100);
geometry.setFromPoints(points);
var material = new THREE.LineBasicMaterial({color: 0xff0000});
var line = new THREE.Line(geometry, material);
scene.add(line);
//三維三階貝塞爾曲線
var geometry = new THREE.Geometry();
var curve = new THREE.CubicBezierCurve3(new THREE.Vector3(-10, -20, -10), new THREE.Vector3(-10, 40, -10), new THREE.Vector3(10, 40, 10), new THREE.Vector3(10, -20, 10));
var points = curve.getPoints(100);
geometry.setFromPoints(points);
var material = new THREE.LineBasicMaterial({color: 0xff0000});
var line = new THREE.Line(geometry, material);
scene.add(line);
//三維樣條曲線
var geometry = new THREE.Geometry();
var curve = new THREE.CatmullRomCurve3([new THREE.Vector3( -10, -20, -10 ),new THREE.Vector3( -5, 20, -5 ),new THREE.Vector3( 0, -20, 0 ),new THREE.Vector3( 5, 20, 5 ),new THREE.Vector3( 10, -20, 10 )]);
var points = curve.getPoints(100);
geometry.setFromPoints(points);
var material = new THREE.LineBasicMaterial({color: 0xff0000});
var line = new THREE.Line(geometry, material);
scene.add(line);

如下圖

轉載請註明地址：郭先生的部落格

 

相關文章