Babylon.js JP

Appearance

Babylon.js 逆引きリファレンス ​

とりあえず最低限描画するには？ ​

html
<style>
    * { margin: 0; }
    canvas { width: 100vw; height: 100vh; }
</style>
<canvas id="render-canvas"></canvas>
<script type="module">
import * as BABYLON from "https://esm.sh/@babylonjs/core";

const canvas = document.getElementById("render-canvas");
const engine = new BABYLON.Engine(canvas);
const scene = new BABYLON.Scene(engine);

// デフォルトのカメラとライトを生成
scene.createDefaultCameraOrLight(true, true, true);

// デフォルトの地面などを生成
scene.createDefaultEnvironment();

// 球を生成
const sphere = BABYLON.MeshBuilder.CreateSphere("Sphere", {}, scene);

// 少し上に移動
sphere.position.y = 0.5;

// 描画関数の定義
engine.runRenderLoop(() => {
    scene.render();
});
// リサイズ関数の定義
window.addEventListener("resize", () => {
    engine.resize();
});
</script>

背景色しか見えない ​

  1. 開発者コンソール(F12) で赤文字のエラーが出ていないか確認しましょう
    • No camera found と出ている場合は、 1 つ以上のカメラを生成しましょう
  2. 見える位置にオブジェクトがあるか確認しましょう
    • マウスでカメラを動かしてみましょう
  3. engine.runRenderLoop を呼んでいるか確認しましょう

カメラが動かない ​

js
const camera = new UniversalCamera("camera", Vector3.Zero(), scene);
camera.attachControl(true); // このメソッドを呼んでいるか確認しましょう

描画サイズが小さい、ブラウザの画面いっぱいにならない ​

デフォルトで <canvas> は小さい状態で描画されます。 CSS を使って大きくしましょう。

また、 body { margin: 0; } を追加して画面端の隙間をなくしましょう。

css
body {
    margin: 0;
}
canvas {
    width: 100vw;
    height: 100vh;
}

ポリゴンの色を変えたい ​

js
const material = new StandardMaterial("mat", scene);
material.diffuseColor = Color3.Red(); // 見た目の色を赤にする
mesh.material = material;

ポリゴンを少しずつ移動させたい ​

js
scene.onBeforeRenderObservable.add(() => {
  mesh.position.x += 0.01;
});

ポリゴンを少しずつ回転させたい ​

js
scene.onBeforeRenderObservable.add(() => {
  mesh.rotation.y += 0.01;
});

UniversalCamera の移動を矢印キーから WASD に変えたい ​

js
camera.keysUp = ["W".charCodeAt(0)];
camera.keysDown = ["S".charCodeAt(0)];
camera.keysLeft = ["A".charCodeAt(0)];
camera.keysRight = ["D".charCodeAt(0)];

キーボード入力でポリゴンを移動させたい ​

js
const deviceSourceManager = new DeviceSourceManager(scene.getEngine());
let movingForward = false;
let movingBackward = false;
let movingLeft = false;
let movingRight = false;
deviceSourceManager.onDeviceConnectedObservable.add((device) => {
  if (device.deviceType === DeviceType.Keyboard) {
    device.onInputChangedObservable.add((event) => {
      if (event.metaKey) {
        return;
      }

      if (event.type === "keydown") {
        if (event.key === "w") {
          movingForward = true;
        }
        if (event.key === "a") {
          movingLeft = true;
        }
        if (event.key === "s") {
          movingBackward = true;
        }
        if (event.key === "d") {
          movingRight = true;
        }
      } else if (event.type === "keyup") {
        if (event.key === "w") {
          movingForward = false;
        }
        if (event.key === "a") {
          movingLeft = false;
        }
        if (event.key === "s") {
          movingBackward = false;
        }
        if (event.key === "d") {
          movingRight = false;
        }
      }
    });
  }
});
scene.onBeforeRenderObservable.add(() => {
  const speed = 0.01;
  if (movingForward) {
    mesh.position.z -= speed;
  }
  if (movingBackward) {
    mesh.position.z += speed;
  }
  if (movingLeft) {
    mesh.position.x += speed;
  }
  if (movingRight) {
    mesh.position.x -= speed;
  }
});