JavaScript
3D
Web3D
Mithril.js
Solufa

Solufaを使って簡単にWebで3Dをアニメーションさせる[回転編] + オブジェクトのグループ化

More than 1 year has passed since last update.


導入

今回は回転のアニメーションを実装していきます。

Quaternionによる回転もできるのですが、そちらはまた別に解説します。今回はジンバルロックを気にしないでやっていきます。

また、オブジェクトのグループ化についても書きます。

Solufaを使って簡単にWebで3Dを扱ってみる(入門)

Solufaを使って簡単にWebで3Dをアニメーションさせる[移動編]


前回より

入門編からソースコードを持ってきます。

S(function(m) {

var App = {
controller: function() {
return {
geo: {
type: "Box",
value: [ 1, 1, 1 ]
},
mtl: {
type: "MeshPhong",
value: {
color: "#00f",
specular: "#999"
}
}
};
},
view: function( ctrl ) {
return <scene>
<obj>
<mesh geo={ ctrl.geo } mtl={ ctrl.mtl } style={{ rotate: [ 30*Math.PI/180, 45*Math.PI/180, 0 ] }}/>
</obj>
<cam id="cam" style={{ posZ: 10 }}/>
<light init={{ type: "Dir" }} style={{ pos: [ 0, 2, 0 ] }}/>
<light init={{ type: "Amb" }}/>
</scene>;
}
};
m.mount( S.document.body, App );
m.render( S.document.head, <rdr init={{ frame: "#solufa", antialias: true, preserveDrawingBuffer: true }}>
<OrbitVp cam="#cam"/>
</rdr> );
});


アニメーション

回転アニメーションを作成していきます。

前回同様、Controller内に書きます。


実装

回転するアニメーションを作ってみましょう。

rotate: function( elem, isInit ) {

if ( isInit ) return;
S.update( function(delta) {
elem.style.rotateX += delta * 1;
});
}

これで回転します。

次にViewに流し込みます。

<mesh geo={ ctrl.geo } mtl={ ctrl.mtl } config={ctrl.rotate} style={{ rotate: [ 30*Math.PI/180, 45*Math.PI/180, 0 ] }}/>/>

以上でアニメーションが描画されるようになりました。

rotateZ.gif]


ソースの解説

前回同様にupdateまで書きます。

elem.style.rotateZ += delta * 1;

これでZ軸で1秒に1ラジアンずつ回転します。

rotateX,rotateYなどに変えることで別の軸で回転できます。

ここまでは前回と同じことをしているだけです。

今までオブジェクトを中心にアニメーションをしていましたが、今回は軸を変えてアニメーションをさせてみましょう。


オブジェクトのグループ化

オブジェクトを別の軸で動かすために、別の軸を持つオブジェクトの子に入れます。

入門編でView側に書いていたobjタグを使用したいと思います。

<obj>

<mesh geo={ ctrl.geo } mtl={ ctrl.mtl } config={ctrl.rotate} style={{ rotate: [ 30*Math.PI/180, 45*Math.PI/180, 0 ] }}/>
</obj>

これでmeshがobjの子に入りました。

objをアニメーションさせることでmeshがobjに追従してアニメーションします。

ただしこのままではobjもmeshも中心が(0,0,0)なのでobjを動かしても今までと変わりません。

なのでmeshの座標を動かしてアニメーションさせましょう。

rotateZwithP.gif]

<obj config={ctrl.rotate}>

<mesh geo={ ctrl.geo } mtl={ ctrl.mtl } style={{ posY:2, rotate: [ 30*Math.PI/180, 45*Math.PI/180, 0 ] }}/>
</obj>

これでY座標が2のオブジェクトが(0,0,0)を中心に回転するようになりました。

このおかげで複数のオブジェクトをまとめてアニメーションできるようになりました。

rotate4.gif]


最後に

前回と同じような記事になってしまうのでグループ化についても書いてみました。

移動と回転とグループ化を駆使して色々なアニメーションを作ってみましょう!