Three.jsで三次元オブジェクトのブラウザ座標を取得したいです

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

入れたい機能の例です(sketchfab) : https://sketchfab.com/models/56cce93abd8a485cbdc5bfff37a59f11

追記 : もし難しい場合にはオブジェクト座標とカメラ座標との距離からテクスチャ付きモデルの大きさを変えたりすれば・・いいのかなと思っています。

行動規範の内容に同意します

回答1件

ベストアンサー

こんなことに近いでしょうか？

実際の記事はこちらになります

表示したいものの場所のワールド座標がわかっているのであれば、
(vector3オブジェクト).project(camera);
で、スクリーン座標の位置を得ることができます。
このままだと、左上-1、右下+1、画面中央がゼロという値になってしまっています。これに画面のサイズをかけることで、２Ｄ画面上での位置を得ることができます。

投稿2017/06/12 15:19