[PV3D] リボンの実装方法

3Dのリボンを作るときにアプローチの仕方が勉強になったのでメモ。

• note.x | [PV3D2.0] attitudeControl
• 【papervision】方向ベクトルからMatrix回転への変換 « NOTE.haramakoto

行列やクオータニアンを理解した方がスマートだと思うのですが、昔作ったデモが比較的簡単な方法で実装できていたので紹介してみます。

lookAt (対象のオブジェクトを向くように回転するというメソッド)で実現

• [PV3D] Ribon Road (6秒くらい待つと走り始めます)

そもそもリボンの実装方法としては

• リボンは無数の平面( Plane )を鎖のようにつなげてできている
• リボンを配置するベジェ曲線は Tweener の _bezier を使っている

で、連続する Plane をどうやって向きをそろえているかというと

• ダミーのDisplayObjectを用意して、現在の Plane の座標と次の Plane の座標をコピーする
• ダミーの DisplayObject の lookAt メソッドを使って、向きをそろえる
• 元の Plane に transform をコピーする
• lookAt は指定の方向を向くメソッドなので、調整のため pitch(90) で回転させる

簡略化したスクリプトで紹介するとこんな感じです。

// ダミーでに座標をコピーしておく
var d1:DisplayObject3D = new DisplayObject3D()
d1.x = 現在の座標.x
d1.y = 現在の座標.y
d1.z = 現在の座標.z
var d2:DisplayObject3D = new DisplayObject3D()
d2.x = 次の座標.x
d2.y = 次の座標.y
d2.z = 次の座標.z

// 方向を向かせる
d1.lookAt(d2);

// 元の平面に向きや位置をコピーする
現在の平面.copyTransform(d1.transform)

// 90度回転させる
現在の平面.pitch(90)

これだとダミーの DisplayObject3D をENTER_FRAME で量産することになるので負荷もよろしくないと思っていたりするので、やはり行列などの方法で実装するほうがスマートかと。行列は使いこなせるようになりたいですね。