質問編集履歴

2 追記しました

nasikusa

nasikusa score 9

2017/06/12 23:59  投稿

Three.jsで三次元オブジェクトのブラウザ座標を取得したいです
現在、自分が作成したCGモデルの配布サイトでsketchfabのような数字の付いた画像(①のような感じです)をクリックするとその場所へ移動する機能を入れたいと思っているのですが、方法がわからず困っています。
Raycasterを使うことで、ブラウザ座標から3次元空間のオブジェクトの位置等を取得することは出来たのですが、逆に3次元空間のオブジェクトの位置(正確に書くとオブジェクトのある一点の座標です)からブラウザ座標を取得して、画像をその位置に追従させることの方法が皆目検討が付きません。
最初は数字の書かれたテクスチャで機能を実現できないかなぁと思ってたのですが、そうしてしまうと離れたら見えないし、近くなったら邪魔なので(それにdepthTestをfalseにしないと近くにオブジェクトがある状況で埋まってしまいました・・)、やはり画像をそのまま表示して追従させるのが良いのかなと思いました。
面倒くさい質問かもしれないですが、よろしくお願いしますm(__)m。
入れたい機能の例です(sketchfab) : https://sketchfab.com/models/56cce93abd8a485cbdc5bfff37a59f11
入れたい機能の例です(sketchfab) : https://sketchfab.com/models/56cce93abd8a485cbdc5bfff37a59f11
追記 : もし難しい場合にはオブジェクト座標とカメラ座標との距離からテクスチャ付きモデルの大きさを変えたりすれば・・いいのかなと思っています。
  • Three.js

    231 questions

    Three.jsはWebGLをサポートしているJavaScriptの3D描画用ライブラリです。

1 誤字を修正しました。

nasikusa

nasikusa score 9

2017/06/12 23:47  投稿

Three.jsで三次元オブジェクトのブラウザ座標を取得したいです
Raycasterを使うことで、ブラウザ座標から3次元空間のオブジェクトの位置等を取得することは出来たのですが、逆に3次元空間のオブジェクトの位置(正確に書くとオブジェクトのある一点の座標です)からブラウザ座標を取得して、画像をその位置に追従させることの方法が皆目検討が付きません。
最初は数字の書かれたテクスチャで機能を実現できないかなぁと思ってたのですが、そうしてしまうと離れたら見えないし、近くなったら邪魔なので(それにdepthTestをfalseにしないと近くにオブジェクトがある状況で埋まってしまいました・・)、やはり画像をそのまま表示して追従させるのが良いのかなと思いました。
面倒くさい質問かもしれないですが、よろしくお願いしますm(__)m。
入れたい機能の例です(sketchfab) : https://sketchfab.com/models/56cce93abd8a485cbdc5bfff37a59f11
  • Three.js

    231 questions

    Three.jsはWebGLをサポートしているJavaScriptの3D描画用ライブラリです。

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る