javascript - 球体内的三个js视频位置

Question

我使用三个js来显示视频，用户可以使用鼠标在视频中移动，示例如下:

https://threejs.org/examples/?q=video#webgl_video_panorama_equirectangular

代码:https://github.com/mrdoob/three.js/blob/master/examples/webgl_video_panorama_equirectangular.html

有没有办法显示用户在容器内观看的位置(位置和方向)，如下所示:

http://ignitersworld.com/lab/imageViewer.html

左上角有一个小方 block 显示当前位置。我想知道 View 所面向的位置和方向(全部为二维)

我怎样才能实现这一目标？

<小时/>

编辑:

方向已解决。

我正在寻找视频布局上的位置，这可能吗？如图所示:/image/AEmPp.jpg

Answer 1

您可以获取相机方向并计算 Angular 。这些 Angular 将是您在球体上的 2D 方向:

var dir = camera.getWorldDirection();
var groundProjection = dir.clone().projectOnPlane(new THREE.Vector3(0,1,0))
var longitudeRadians = Math.atan2(groundProjection.x, groundProjection.z);
var latitudeRadians = Math.atan2(groundProjection.length(), dir.y)

// longitudeRadians is now an angle between -3.14 and 3.14
// latitudeRadians is now an angle between 0 and 3.14

这是一个运行示例:https://jsfiddle.net/holgerl/bqvdotps/