Zenn
Closed13

Babylon.js で遊ぶ

Babylon.js
薄田達哉 / tatsuyasusukida薄田達哉 / tatsuyasusukida

このスクラップについて

Three.js について色々と調べている時に Babylon.js を知った。

位置付けとしては Web 版 Unity といった感じでゲームやシミュレーションなどの開発に使えそう。

このスクラップでは Getting Started 的なものをやってみようと思う。

薄田達哉 / tatsuyasusukida薄田達哉 / tatsuyasusukida

地面を赤色にしてみる

最後の方に下記のコードを追加する。

    var groundMaterial = new BABYLON.StandardMaterial("Ground Material", scene);
    ground.material = groundMaterial;
    ground.material.diffuseColor = BABYLON.Color3.Red();

diffuseColor のコード補完が効かないので不安になる。

薄田達哉 / tatsuyasusukida薄田達哉 / tatsuyasusukida

地面をチェック柄にする

ground.material.diffuseColor = BABYLON.Color3.Red();

上記を下記で置換する。

    var groundTexture = new BABYLON.Texture(Assets.textures.checkerboard_basecolor_png.rootUrl, scene);
    ground.material.diffuseTexture = groundTexture;

薄田達哉 / tatsuyasusukida薄田達哉 / tatsuyasusukida

メッシュのインポート

return の前あたりに行を作って Ctrl + Space を押す。

Import a Mesh w/callback を選ぶ。

下記の内容を入力する。

    BABYLON.SceneLoader.ImportMesh("", Assets.meshes.Yeti.rootUrl, Assets.meshes.Yeti.filename, scene, function(newMeshes){
        newMeshes[0].scaling = new BABYLON.Vector3(0.1, 0.1, 0.1);
    });

画像だとわかりにくいけどイエティが動いている。

薄田達哉 / tatsuyasusukida薄田達哉 / tatsuyasusukida

カメラを変更する

var camera = new BABYLON.FreeCamera("camera1", new BABYLON.Vector3(0, 5, -10), scene);

上記を下記で置き換える。

var camera = new BABYLON.ArcRotateCamera("camera", BABYLON.Tools.ToRadians(90), BABYLON.Tools.ToRadians(65), 10, BABYLON.Vector3.Zero(), scene);

イエティを中心にくるくる回るようになった。

薄田達哉 / tatsuyasusukida薄田達哉 / tatsuyasusukida

ダウンロード

⬇️ ボタンか Ctrl + Shift + S を押すと zip ファイルのダウンロードが開始する。

zip ファイルに含まれる index.html を開くとシーンが再現される。

python -m http.server や npx http-server -c-1 とかを使わなくて良いのはすごい。

メッシュの読み込みとかはどうしてエラーにならないんだろう。

薄田達哉 / tatsuyasusukida薄田達哉 / tatsuyasusukida

おわりに

キリが良いのでここで一旦クローズしよう。

Play Ground も便利だが VSCode で TypeScript を使いたい。

あと Next.js で表示する時にどうすれば良いかも調べたい。

3D 系プログラミングは表示されるのが楽しくて良い。

引き続き楽しく学びを続けていきたい。

このスクラップは2023/05/01にクローズされました