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 );

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