Macのローカル環境にVScodeを使ってBabylon.jsの基礎的なものを動かしてみた

今年のGWにBabylon.jsのHello World!をローカル環境で実行しましたという記事を書いてから、その後、babylon.jsに触れておらず、久しぶりにやろうとおもったら完全に忘れていたので、まずはMacのローカル環境で動かす方法をメモとして残しておきます。

VScodeでフォルダ＆ファイルを作成
index.htmlファイル
main.js
Live Serverという拡張機能をインストール
Live Serverの実行
まとめ

VScodeでフォルダ＆ファイルを作成

まずは、”tutorial-01″というフォルダをつくります。

VScodeのファイルメニューから”フォルダーを開く”でこのフォルダーを開きます。

上のスクリーンショットのとおりに、index.htmlとjsフォルダー下にmain.jsファイルを作成します。

index.htmlファイル

<!DOCTYPE html>
<html>
    <head>
        <title>aaa</title>
        <style>
            canvas {
                width: 100%;
                height: 100%;
            }
            html, body {
                margin: 0;
            }
 
        </style>
    </head>
    <body>
        <canvas id="renderCanvas"></canvas>
        <script src="https://cdn.babylonjs.com/babylon.js"></script>
        <script src="https://cdn.babylonjs.com/viewer/babylon.viewer.js"></script>
        <script src="js/main.js"></script>
    </body>
</html>

index.htmlファイルは上記コードをコピペして保存。

main.js

console.log('hello world');
 
// get our canvas
const canvas = document.getElementById('renderCanvas');
 
// create a BabylonJS engine
const engine = new BABYLON.Engine(canvas, true);
 
// create a scene
function createScene() {
    // create a scene
    const scene = new BABYLON.Scene(engine);
 
    // create a camera
    const camera = new BABYLON.FreeCamera('camera', new BABYLON.Vector3(0,0,-10),scene);
    camera.attachControl(canvas, true);
    // create a light
    const light = new BABYLON.HemisphericLight('light', new BABYLON.Vector3(0,1,0),scene);
 
    // create a box
    const box = BABYLON.MeshBuilder.CreateBox('box', {
        size : 1
    }, scene);
 
    // create a sphere
    const sphere = BABYLON.MeshBuilder.CreateSphere('sphere', {
        segments: 32,
        diameter: 2,
    }, scene);
    sphere.position = new BABYLON.Vector3(3,0,0);
 
    // create a plane
    const plane = BABYLON.MeshBuilder.CreatePlane('plane',{},scene);
    plane.position = new BABYLON.Vector3(-3,0,0);
    return scene;
 
}
 
// create our scene
 
const scene = createScene();
 
engine.runRenderLoop(() => {
    scene.render();
 
});

Main.jsはこちらのコードをコピペして保存。