Three.jsの例、canvas_particles_shapes.htmlを見る

小さいハートが大きなハートを描くように回る。

なんで正確にトレースできるの？と思ったら、仕掛けはベジェ曲線だった。 
heartShape = new THREE.Shape();
heartShape.moveTo( x + 25, y + 25 );
heartShape.bezierCurveTo( x + 25, y + 25, x + 20, y, x, y );
heartShape.bezierCurveTo( x - 30, y, x - 30, y + 35, x - 30, y + 35 );
// --- 続く ---
位置の取得はこんな感じ： 
var pointOnShape = heartShape.getPointAt( timeOnShapePath );
timeOnShapePathは0から1までのパラメータ。

Three.jsを使った、canvasの勉強は一旦おしまい。
作りたいもの、決まってるんだ～！
2012/07/18 21:09
タグ