偶然見つけた下記のサイトで、WebGLのアニメーションができることを知りました。
このサイトではThree.jsを使った例を紹介しているのですが、Babylon.jsでも動かすことができます。今回は最近紹介しているBabylon.js Editor v4.0を使って動かしてみたことを紹介します。
動作確認環境
・MacOSX 10.15.6
・Babylon.js Editor v4.0 beta7
1. GSAPとは？
こちらが公式サイトです。HTML5、WebGLに対応したアニメーションのフレームワークのようです。
使える範囲の幅が広いためか、いろいろと参考記事が見つかります。
2. Babylon.js で動かすには？
調べたら、動かす方法を書いた例がありました。
CodePenを使って動く例を紹介してくれているので、引用します。
codepen.io
3. Babylon.js Editorで動かすには？
Babylon.js Editorでは、ES6以降の書き方でTypeScriptを使うことが前提です。また、GSAPを使うにはnpmパッケージをインストールする必要があります。
Babylon.js Editorで作ったプロジェクトに新しいnpmパッケージを追加する方法は公式のマニュアルには書いてありませんが、作ったプロジェクトのトップディレクトリ (package.jsonがあるところ) で、npm install gsap を実行すると、import構文で使えるようになります。
Babylon.js Editorで新しいスクリプトを作り、以下のようなコードを書きます。
このスクリプトを使った例です。
モデルは以下を使用させていただいております。
poly.google.com ライセンス：CC-BY
Babylon.js Editorで任意の3Dモデルを追加して使うときは、glb形式にしたモデルをAssets / Meshesタブにドラッグします。読み込みが成功するとモデルがアイコンで表示されるので、アイコンをPreviewの中にドラッグします。
もちろん、カメラではなくcubeなどのオブジェクトにも使うことができます。以下は、cubeとカメラにモーションを当てた例です。
■カメラがcubeを追いかけるモーション
gist.github.com
■cubeがx方向に20移動、y方向に10移動するモーション gist.github.com
4. おわりに
GSAPは他のJavaScriptフレームワークでも使えるものなので、Babylon.jsの知識がなくてもアニメーションを作ることができて便利ですね。Babylon.js Editorと組み合わせると、より直感的にWebで動く3DCGアプリケーションを作れると思います。
ところで、Babylon.js Editorはbeta7になって、また少し便利になりました。また、簡単なゲームやデモを作りながら、使い方を紹介していく予定です。
