js获取鼠标在纹理上的坐标

Question

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

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

但是我想让用户与它交互

是否有可能从鼠标移动的纹理中获得坐标，以创建类似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 );

这可能有点复杂，但应该能做到。