JavaScriptコードモードを使って物体をアニメーションさせる

BLOCKVROCKには、コードモードという機能があります。 コードモードでは、JavaScriptを使ったプログラミングが可能です。

BLOCKVROCKで作った物体や世界は、Webで使われるHTMLとJavaScriptで出来上がっているためJavaScriptを使うことで自由に操作することができます。

以下のサンプルでは物体に回転のアニメーションをつけています。

[公式]JavaScriptコードモードで物体にアニメーションをつける

BLOCKモードでシーンスタートと直方体だけを用意しておきます。

JavaScriptを使って物体をアニメーションさせる

コードタブに以下のプログラムを記述します。 //の部分はコメントなので記述する必要はありません。

let box1 = document.getElementById("block1");
// roには{x:"xの回転",y:"yの回転",z:"zの回転"}が取れる
let ro = box1.getAttribute("rotation");
forever(()=>{
    ro.y += 1;
    let roString = `${ro.x} ${ro.y} ${ro.z}`;
    box1.setAttribute("rotation", roString);
});

１行目のdocument.getElementById()は、HTMLで書かれた要素をJavaScriptの変数に取り込むための記述です。 これにより、box1という変数にid"block1"の物体が取り込まれます。

box1.getAttribute("rotation")は、id"block1"の物体の回転属性を取り出します。これもroという変数に取り込んでいます。

forever()という機能は、BLOCKVROCK特有の機能です。 ループを表すのですが、ループしている間もユーザー操作を止めないようになっています。

このforever()で属性値を変えると、徐々に値が変化するように見えるため物体がアニメーションします。

foreverの処理の内側では、yの回転を 1づつ増やして物体にセットし直しています。 rotationの属性は、"x y z"というスペース区切りで３軸の回転値を持つ文字列であり、値を組み立てなくてはいけません。

「`」（グレイヴ・アクセント）という記号で括られた文字列には、${}で変数を埋め込めます。これをつかって"x y z"になるような文字を組み立てています。