math - 在 equirectangular 纹理上将屏幕点转换为点

Question

我有一个应用到球体内部的全景图的 equirectangular 纹理。摄像头放置在球体的中心，用户可以通过单击并拖动鼠标来旋转摄像头以环顾四周。但是，当用户单击而不拖动时，我希望能够将屏幕坐标转换为纹理上的坐标。给定用户单击的世界坐标位置，我可以确定纹理上的位置，但查看 Three.js 文档我无法辨别我将如何处理这个问题。

最终，问题是我将如何构建一个射线查询来获取来自给定屏幕点的射线与纹理球体之间的交点？

Answer 1

在three.js 示例目录中有很多这样的示例。例如，http ://mrdoob.github.com/three.js/examples/canvas_interactive_cubes.html 。

你想用谷歌搜索的模式是这样的：

var vector = new THREE.Vector3( ( event.clientX / window.innerWidth ) * 2 - 1, - ( event.clientY / window.innerHeight ) * 2 + 1, 0.5 );

projector.unprojectVector( vector, camera );

var ray = new THREE.Ray( camera.position, vector.subSelf( camera.position ).normalize() );

var intersects = ray.intersectObjects( objects );
if ( intersects.length > 0 ) {
    console.log( intersects[ 0 ].point );
}

如果画布是完整的浏览器，这将起作用。另外，objects是一个数组。

三.js r.53