BabylonJS attachCamera(canvas,true)のcanvas引数は無視される

attachControl 関数

Babylon.js Playground の初期サンプルコードにも登場する camera.attachControl(canvas, true) ですが、2023年12月2日現在の Babylon.js 6.32.1 では、boolean 型でない先頭の引数は無視するようになっています。

例えば FreeCamera.attachControl では以下の2つが定義されていますが後者は後方互換の目的で残されています。

• attachControl(noPreventDefault?: boolean): void
• attachControl(ignored: any, noPreventDefault?: boolean): void

そのため、attachControl の引数にHTML要素を指定しても制御入力対象にはならず、Engine初期化時に渡したHTMLCanvasElementが制御入力対象となります。

コントロール入力要素の指定

では、制御入力対象のHTML要素を Engine 初期化時の canvas 以外から変更するにはどうするようになったか、ですが、これは engine.inputElement に代入するようになったようです。

以下は Babylon.js Playground Javascript で実行可能なコードです。

var createScene = function () {
    var scene = new BABYLON.Scene(engine);
    var camera = new BABYLON.FreeCamera("camera1", new BABYLON.Vector3(0, 5, -10), scene);
    camera.setTarget(BABYLON.Vector3.Zero());

    engine.inputElement = document.getElementById('footer');
    camera.attachControl(true);

    var light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 1, 0), scene);
    light.intensity = 0.7;
    var sphere = BABYLON.MeshBuilder.CreateSphere("sphere", {diameter: 2, segments: 32}, scene);
    sphere.position.y = 1;
    var ground = BABYLON.MeshBuilder.CreateGround("ground", {width: 6, height: 6}, scene);
    return scene;
};

実行結果
最下段のフッター部分でマウスドラッグなどすることでカメラを制御できます

リンク

• ArcRotateCamera.attachControl
  https://doc.babylonjs.com/typedoc/classes/BABYLON.ArcRotateCamera#attachControl