日本語は勿論英語のStack Overflowやその他色々Three.jsの事を扱っている記事を見ても現行のr73について扱った記事が無かったので備忘録。

結論から言うと以前のバージョンよりかなり簡単になっています。

「Three.js Collada Raycaster」とググって一番最初に出てくるMouse-Picking Collada Models with three.js, Part IIではr62を扱っていますがこれと比べればどの程度簡単になったのか一目瞭然。

開発者様達には感謝です。

まずcolladaLoaderでモデルを読み込む場合以下のように読み込みます。

var loader = new THREE.ColladaLoader();
loader.load(
  'models/model.dae',
  function ( collada ) {
    var model=collada.scene;
    var loader = new THREE.TextureLoader();
    texture = loader.load('textures/texture.jpg');
    scene.add(model);
    model.children[0].children[0].material.map = texture;
   }
);

出力したソフトや設定によってはMeshの場所が異なる場合があるのでconsole.log()等を使って予めMeshの場所を特定してテクスチャやサイズの変更を行います。
※MAYAの場合はcollada.scene.children[0].children[0]にMeshがありました。

しかしcollada.sceneをそのままシーンに追加するとTHREE.Groupとして出力されるためraycasterでピッキングできません。

r73ではレンダリングされたMeshオブジェクトをピッキングしているのでColladaモデルもMeshとしてシーンに追加します。

collada.scene内にMeshが１つの場合はscene.add(model)をscene.add(model.children[0].children[0])に書き換えてMeshを直接シーンに追加できますが、複数のMeshある場合は一つずつ取り出します。

 loader.load(
    'models.dae',
    function(collada) {
      var models = collada.scene;
      var loader = new THREE.TextureLoader();
      texture = loader.load('textures/models.jpg');
      num = models.children.length;
      for (i = 0; i < num; i++) {
        modelsMesh = models.children[i].children[0];
        modelsMesh.material.map = texture;
        scene.add(modelsMesh);
      }
    }
  );

これ全く同じものがレンダリングされますがTHREE.GroupではなくTHREE.Meshとして出力されるため他のMeshと同様にRaycasterでピッキング可能になります。

シーンごと追加した時と違うサイズや座標で出力されてしまう場合はモデル作成時に位置やサイズ情報をフリーズ(全値をデフォルト化)してない可能性があります。

MAYAの場合は「修正(Modify)＞トランスフォームのフリーズ(Freeze Transformations)」
Blenderは分からないので自分で調べてください。

この方法で追加したデモがこちら。

colladaLoaderのraycasterデモ
http://cityjumperweb.com/webgl/colladaPick/

See the Pen ZQpZdZ by Yuya Saito (@U-YA) on CodePen.

これは静止したモデルでの場合なのでまだ試していませんが、アニメーションが付いている場合は勝手が違うかもしれません。

順序が逆になりましたがraycasterやcolladaLoaderの使い方については後日書く予定。