Three.jsでCubeのテクスチャを一面だけ変更する方法

Question

現在、three.jsを使ったCubeのテクスチャマッピングで苦戦しています。

今作っているのは、画像テクスチャをを貼り付けたキューブを表示し、キューブをクリックするとレイキャスターでキューブをピッキングし、テクスチャが変更されるというものです。
デモ：http://jsdo.it/timext/p0Um

これを、例えば、上面（一面だけ）をクリックすると上面のマテリアルだけ画像テクスチャが変更されるという動きに変えたいのですが、なかなか実装できないでいます。

各面をピッキングし、その面だけ画像テクスチャを変更するにはどうすればいいのでしょうか。

何かヒントだけでも頂けたら嬉しいです。よろしくお願いします。

Answer 1

これ、キューブという形状が要件ですか？
もしそうであればむずかしく考えず、キューブ状にするための6面のPlaneGeometryを使って自分で適切に配置する、という方法が簡単そうです。

上記の実装であれば各面が独立しているのでそれぞれの面がRayで判別可能になります。
あとは検出された面のテクスチャを差し替えてやれば目的が達成できると思います。

ちなみに過去にサンプルとしてこんなものを作りました。
http://edom18.github.io/HTML5_conf_2015_sample/goal/

完全なキューブ状ではありませんが、各面を上記の方法で実装しています。
なにかのヒントになれば。

Comments

[peanuts]

なるほど、そういう方法もありますね！
独立しているので判定もシンプルに取得できそうです。
色々試してみたいと思います。

Answer 2

Three.jsは使った事がないので実はよく知らないのですが、リンクのコードを拝見したところ、課題が2つほどありそうですね。

1. 立方体をCubeGeometryで作成してるが、その個別の面へのアクセスはしていない

CubeGeometry作成したオブジェクトの個別の面に別々のテクスチャを貼る方法
ここでは色を変えているだけですが、参考にしたというリンク先では画像を使っています。

1. クリック時もレイと衝突するオブジェクトに対してアクセスしているが、面は検出していない

クリック面も検出できそう？
raycaster.intersectObjects にfaceというステータスがあって、そこに面の情報があるそうです。
実際にどういう情報かは試してないので分かりませんが、使えるかも？

クリック面を特定でき、個々の面に別々のテクスチャを貼れるなら、目的を達成できそうな気がします。

Comments

[peanuts]

的確な回答ありがとうございました。