babylonjs の実験的機能 GeospatialCamera

babylon.js ではGeospatialCameraというカメラが実験的機能として用意されています。GeospatialCameraは地球の表面を移動するようなカメラ操作を提供してくれます。実験的機能ということでコンストラクタの定義を含めて今後仕様変更の可能性があるとのことです。

GeospatialCameraにはデフォルトでマウスによる移動と向きの変更が実装されています。マウス左ボタンドラッグで地球の表面を移動できます。マウス右ボタンドラッグで位置はそのままでカメラの向きを変えます。右ドラッグ中にX成分を変更すると方角が変更され、Y成分を変更すると仰角を変更します。
仰角はpitch値として得られ0の場合は地表から地球を表面を見る向きで、$\pi/2$の場合には地表から水平に見る角度となります。方角はyaw値として得られます。

以下のコードは 2025年12月3日の Babylon.js Playground 8.39.2(WebGL2) Javascript で動作したことがあります。

export const createScene = async () => {
  const scene = new BABYLON.Scene(engine);
  const planetRadius = 100;
  const globe = BABYLON.MeshBuilder.CreateSphere('globe',
    {diameter: planetRadius * 2}, scene);
  const mtl = new BABYLON.StandardMaterial('globemtl');
  mtl.emissiveTexture = new BABYLON.Texture('textures/earth.jpg')
  globe.material = mtl;
  globe.rotation = new BABYLON.Vector3(-Math.PI * 0.5, 0, 0);

  const meshMtl = new BABYLON.StandardMaterial('meshmtl');
  meshMtl.emissiveColor = new BABYLON.Color3(1, 0, 0);
  const size = 5;
  for (let i = 0; i < 100; ++i) {
    const m = BABYLON.MeshBuilder.CreateBox(`point${i}`,
      {size}, scene);
    const hang = Math.random() * 2 * Math.PI;
    const vang = (Math.random() - 0.5) * Math.PI;
    const r = Math.cos(vang) * (planetRadius + 4);
    m.position = new BABYLON.Vector3(Math.sin(hang) * r, Math.sin(vang) * r, Math.cos(hang) * r);
    m.material = meshMtl;
  }

  const camera = new BABYLON.GeospatialCamera('camera1',
    scene, {planetRadius},
    (mesh, index) => mesh.id === 'globe',
  );
  camera.attachControl(false);

  setTimeout(() => {
    camera.flyToPointAsync(
      new BABYLON.Vector3(1, 1, 1).scale(planetRadius),
      0.7);
  }, 3000);

  return scene;
};

実行結果(1)

マウス左ボタンドラッグで移動し、マウス右ボタンドラッグで位置はそのままで方角と仰角を変更します

実行結果(2)

マウス右ボタンドラッグで真下ではなく水平に近い仰角を向いた場合

コード中のコンストラクタにmesh引数で判定してtrue/falseを返す関数を渡していますがこれはマウス左ボタンドラッグ時に反応するメッシュかどうかを判定する関数を渡します。上記実装では地球メッシュのみつかめるようにしています。無指定の場合は常にtrueを返す動作をするようで、このときは例えば地球と重なって表示されていない状態の赤い箱をつかむことができるようになります。