转换屏幕点对点的equirectangular纹理 [英] Converting screen point to point on equirectangular texture

问题描述

我有一个equirectangular纹理一个被施加到一个球内部的全景。相机被放置在球体的中心，用户可以旋转​​相机通过点击和拖动他们的鼠标环视。但是，当用户点击，不拖，我希望能够把屏幕坐标来负责协调的质感。我能确定给定的纹理的位置的世界坐标位置的用户点击，但看在Three.js文档我无法辨别我怎么会去这一点。

I have an equirectangular texture of a panorama that is applied to the inside of a sphere. The camera is placed at the centre of the sphere and the user can rotate the camera to look around by clicking and dragging their mouse. However, when the user clicks and does not drag, I would like to be able to convert the screen co-ordinates to co-ordinates on the texture. I could determine the location on the texture given a the location in the world coordinates the user clicked but looking over the Three.js documentation I am unable to discern how I would go about this.

最后，问题是如何将我去构建一个射线查询来获取交点从给定的屏幕点的射线和纹理的领域之间？

Ultimately, the question is how would I go about constructing a ray query to get the point of intersection between a ray from a given screen point and the textured sphere?

推荐答案

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

There are a lot of examples of this in the three.js examples directory. For example, http://mrdoob.github.com/three.js/examples/canvas_interactive_cubes.html.

您想谷歌的模式是这样的：

The pattern your want to google for is this:

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

这将工作，如果在画布上是完整的浏览器。此外，对象是一个数组。

This will work if the canvas is full browser. Also, objects is an array.

three.js r.53

three.js r.53

这篇关于转换屏幕点对点的equirectangular纹理的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！