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

【问题标题】：Converting screen point to point on equirectangular texture在 equirectangular 纹理上将屏幕点转换为点
【发布时间】：2012-12-19 23:10:17
【问题描述】：

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

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

【问题讨论】：

您找到解决方案了吗？我目前正在寻找完全相同的东西。

标签： math 3d three.js

【解决方案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 是一个数组。

three.js r.53

【讨论】：