Babylon.js v3.3.0 Practiceめも②

めも①のつづきで、CodePenに投稿したBabylon.js v3.3.0を使用した3Dプログラミングのリストを作成しています。　今回は主にBabylon.jsのGUI機能についてのプログラミングです。　GUI機能が標準で用意されているのは、自分としてはThree.jsに比べてBabylon.jsの優位であると思っています。　

途中から同じような画像が続くようになりますが仕様ですw。　なんだか今回は地味なプログラムの並びになってしまった。。。

文字列リンクはコード付きのCodePenページへの、サムネイル画像リンクはコードなしのフルスクリーンのCodePenページへのリンクとなっています。

まずBabylon.jsの基本的なGUI機能をコピペでお試し。　3Dオブジェクトによるボタンとのことです。

Babylon.js v3.3.0 Practice#11 GUI Test01

Babylon.jsの基本的なGUI機能をコピペでお試しその２。　いろいろなGUI機能がテンコ盛りのコードをコピペして実行しています。　

このコードに含まれるGUIから、自分が使いたい、使い易そうなものを切り出して手本として、後々の自分のコードの中で必要に応じて編集しつつ使いまわしています。　

Babylon.js v3.3.0 Practice#12 GUI Test02

以下２つのコードでは音に関する機能を試しています。　リンクからページを開くと、いきなり音が出るので音量等注意です。　音を出すのがプログラムのメインの機能なのでサムネイル画像は貼り付けていません。

Babylon.js v3.3.0 Practice#13 Sound Test01

Babylon.js v3.3.0 Practice#14 Sound Test02

手本にしたGUIからボタンを切り出して、少し編集したいろいろなボタンを貼り付けてテストしています。

Babylon.js v3.3.0 Practice#15 Button And Label Test

ここからボタンを使用して3Dオブジェクトを操作できるかいろいろテストしています。

Babylon.js v3.3.0 Practice#16 Box Control by GUI Button

Babylon.js v3.3.0 Practice#17 Collision Detection Test

Babylon.js v3.3.0 Practice#18 Camera Movement Around Target Object

Babylon.js v3.3.0 Practice#19 Forward and Rotation GUI Control on Target Object

Babylon.js v3.3.0 Practice#20 ArcRotateCamera Test

テスト兼手本用にサンプルにあったコードをほぼそのまま動かしたもの、かな？　自分で作っておいて何だったかよくおぼえていません。。。

Babylon.js v3.3.0 Practice#21 Click/Touch Test by Trigger Function

このコードでGUIを使用したいろいろなテストは一段落して、GUI関連コードは終了です。

Babylon.js v3.3.0 Practice#22 Click/Touch on Target Object

おまけ

以下はTweenという機能を使って、立法体の3Dオブジェクトに規則的な動きを繰り返させているコードです。　タイトルを間違ってTweenとするところをTweetとしていますｗ。

おまけとしてこのGUIプログラムの並びの最後に置いておきます。　見た目の画像はほぼ同じなので1つだけ画像サムネイルを貼り付けておきましす。　リンク先のページを開いてコードが実行されると、白い立法体が左右に移動したり回転したりします。　

Babylon.js v3.3.0 Practice#23 Tweet Like Animation Test01

Babylon.js v3.3.0 Practice#24 Tweet Like Animation Test02

Babylon.js v3.3.0 Practice#25 Tweet Like Animation Test03

参考まとめ
Babylon.js v3.3.0　CodePen投稿コードまとめ