本文へスキップ

Google Photorealistic 3D Tiles, Flight Simulator

2023.10
Googleマップの3Dタイル上を飛ぶ

Screenshot 2025-07-17 at 11.06.21.png

通常の場合、Googleのマップのオブジェクトには衝突判定はできない。
googleマップの下に平面を敷いて、飛行機と衝突するとonCollideが発火するのですが、物理オブジェクトのタイプ(type: "Dynamic" | "Static" | "Kinematic")での挙動の違いなどいろいろある。

Kinematic: 飛行機 とStatic: 地面 は衝突イベントが発火しないらしいけど、飛行機をDynamic タイプにすると、重力の影響を受けるので、すごいブレブレになる。

<Physics gravity={[0, 0, 0]}> とするとブレなくなるけど、上下左右の操縦するとブレる。

useBox()のapiの位置をsubscribeして、カメラ位置を変えたら直った。

useEffect(() => {
    api.position.subscribe((p) => {
      const cameraMatrix = new THREE.Matrix4()
        .multiply(new THREE.Matrix4().makeTranslation(p[0], p[1] + 4, p[2])) // shift downard an airplane a bit
        .multiply(delayedRotMatrix)
        .multiply(new THREE.Matrix4().makeRotationX(-Math.PI * 0.025))
        .multiply(new THREE.Matrix4().makeTranslation(0, 0, 40))

      camera.matrixAutoUpdate = false
      camera.matrix.copy(cameraMatrix)
      camera.matrixWorldNeedsUpdate = true
    }),
      []
  })

参考