three.js在纹理上得到鼠标coortinates

Question

我想创建一个像这样的交互式全景图：

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

但我想让用户与之互动。

可以在鼠标移动时从纹理获取坐标以创建类似于具有three.js的3D图像地图吗？

谢谢！

Answer 1

请检查：Translating mouse location to Object coordinates

当找到光线相交的三角形时，可以收集三角形顶点3d坐标和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 );

理解它可能有点复杂，但应该这样做。希望这会有所帮助。