QuadraticBezierCurve3を使う

QuadraticBezierCurve3とかいうカッコイイ感じのカーブを描いてくれる子がいたのでこれを使ってカーブを描く。

[参照] QuadraticBezierCurve3

geometry.verticesに突っ込む座標を渡すイメージ

なの？わかんないけど。

geometry.vertices = curve.getPoints( 50 );

こんな感じで最後はGeometryのverticesに突っ込むようにする。

まずはカーブを作る

var curve = new THREE.QuadraticBezierCurve3(
	new THREE.Vector3( -10, 0, 0 ),
	new THREE.Vector3( 20, 15, 0 ),
	new THREE.Vector3( 10, 0, 0 )
);

こんな感じで3点を指定すると、最初の点と最後の点の一直線ではなく、真ん中を経由(はしないんだけど)通りそうなパスを作ってくれる。

からのgetPoint(50);

var geometry = new THREE.Geometry();
geometry.vertices = curve.getPoints( 50 );

このgetPointは作成したcurveを何点で作るか。
THREE.QuadraticBezierCurve3で作成した弧に沿って50個分の座標(x,y,z)がgeometry.verticesに渡されて、それをgeometoryとして、Lineを作るから弧になる。

つまり、getPointsが少ないとカクカクになる。
50にするともうそれは弧。

See the Pen 曲線を描く by ziyudom (@ziyudom) on CodePen.

getPointsの点の座標にsphereを置いてみる

上の何点で作るかって話で、例えば30点で弧を描くとこうなる。
黄色い点がgetPointsで生成された点。
点同士は直線なので、よく見るとカクカクしている。
その点が減っていけばさらにカクカクするのは当然であって、さらに増えればなめらかになる。

See the Pen 曲線を描くgetPointsの所に点を書きたい。 by ziyudom (@ziyudom) on CodePen.

次はこの線をアニメーションさせたいな。