three.jsで物体が衝突したことを検知する

概要

three.jsで物体が衝突したことを検知したくて色々ググって実践してみたんですが、どうもうまくいきませんでした。英語のサイトなども探してまわって最終的に以下で説明するようなコードで実現できたのですが、どうもすっきりしない…謎のあるコードになってしましました。とりあえず現時点でのコードを備忘録として載せます。

衝突検知のサンプル

二つの球体があり、一つの球体がもう一つの球体に衝突したら停止するという非常にシンプルな動作です。intersectsSphereを使って衝突を検知しています。動作自体は想定通りの動作です。

See the Pen three.js intersectsSphere by tosi (@tosizo) on CodePen.

個人的に謎の箇所

私のthree.jsの知識が足りてないからだと思いますが、以下の点が謎でした。

  sphere.geometry.computeBoundingSphere();
  // 球体（緑）用のBoundingSphere
  var sphereBBox = new THREE.Sphere(sphere.position, sphere.geometry.boundingSphere.radius);

衝突検知用のBoundingSphereを作成しているんですが、そもそもcomputeBoundingSphere()によってsphere.geometryにboundingSphereオブジェクトが生成されているんですよね。以下のような感じ。

  sphere.geometry.computeBoundingSphere();
  // sphere.geometry.boundingSphereが生成される
  // 但し、このオブジェクトで衝突検知しようとしてもうまくいかない?

  // 球体（緑）用のBoundingSphere ← 結局これが必要になった
  var sphereBBox = new THREE.Sphere(sphere.position, sphere.geometry.boundingSphere.radius);

sphere.geometry.boundingSphereが生成されているのだからこれで衝突判定すればいいように思うんですがどうしてもうまくいかない。（厳密にはboundingSphereの位置をうまくセットできなかった。）結局、判定用にSphereを作成してradiusの値などをコピーすることでうまくいきました。

初歩的な何かを見逃しているような気もしますので、判明したら追記していきます。