r73】colladaLoaderのモデルをRaycasterでピッキング(クリック可能)にする。Overflowやその他色々Three.jsの事を扱っている記事を見ても現行のr73について扱った記事が無かったので備忘録。結論から言うと以前のバージョンよりかなり簡単になっています。colladaLoaderでモデルを読み込む場合以下のように読み込みます。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が1つの場合はscene.add(model)をscene.add(model.children[0].children[0])に書き換えてMeshを直接シーンに追加できますが、複数のMeshある場合は一つずつ取り出します。texture;scene.add(modelsMesh);}});これ全く同じものがレンダリングされますがTHREE.GroupではなくTHREE.Meshとして出力されるため他のMeshと同様にRaycasterでピッキング可能になります。シーンごと追加した時と違うサイズや座標で出力されてしまう場合はモデル作成時に位置やサイズ情報をフリーズ(全値をデフォルト化)してない可能性があります。Transformations)」Blenderは分からないので自分で調べてください。この方法で追加したデモがこちら。CodePen.これは静止したモデルでの場合なのでまだ試していませんが、アニメーションが付いている場合は勝手が違うかもしれません。順序が逆になりましたがraycasterやcolladaLoaderの使い方については後日書く予定。video)を書き出す方法。2017/12/07やりたくない事は全力でやらないという選択。2017/09/04何故かロリポップ無料SSL導入後にWAF設定が勝手に有効化する件。2017/07/25ロリポップが無料SSL始めたってよ!実装もめちゃくちゃ簡単でした。Experienceが立ち上がる件。素人でもすぐに分かる!アイスホッケールールまとめ。47ビューRBGからRGBA(白背景)に変換する方法。28ビューjQuery(JavaScript)でスクロールに合わせて少しずつ背景画像を動かす方法。2017/12/07やりたくない事は全力でやらないという選択。2017/09/04何故かロリポップ無料SSL導入後にWAF設定が勝手に有効化する件。2017/07/25ロリポップが無料SSL始めたってよ!実装もめちゃくちゃ簡単でした。