three.js获取鼠标在纹理上的协同

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。有了足够的数据来计算交点的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 );

理解起来可能有点复杂，但应该可以解决问题。希望这能有所帮助。