javascript - three.jsはテクスチャ上のマウス座標を取得します

Question

このようなインタラクティブなパノラマを作成したい:

http://mrdoob.github.io/three.js/examples/webgl_panorama_equirectangular.html

しかし、私はユーザーがそれを操作できるようにしたいと考えています。

マウスの移動時にテクスチャから座標を取得して、three.js で 3D イメージ マップのようなものを作成することは可能ですか?

ありがとう！

Answer 1

これを確認してください:マウスの位置をオブジェクト座標に変換しています

光線が交差する三角形が見つかったら、その三角形の頂点の 3D 座標と UV を収集できます。交点の UV 位置を計算するのに十分なデータがあります。

擬似コード:

x0 = mouse.x; y0 = mouse.y;
vec3 samplePoint = unproject(x0, y0);  // returns (x, y, near-plane-z) coords
ray.origin = camera.position;
ray.direction = samplePoint - camera.position;
var triangleComplexObj = check_for_intersections( scene, ray );  // returns triangle, it's vertices and their UV and 3d coord and intersection coord
calulateUV( triangleComplexObj , triangleComplexObj.intersectionPoint );

理解するのは少し複雑かもしれませんが、うまくいくはずです。お役に立てれば。