CODEWITHSUNDEEP
javascriptthree.js
Toniq
Toniq

Reputation: 5006

three js video position inside sphere

I am using three js to display video where the user can move through the video using mouse, example here:

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

the code: https://github.com/mrdoob/three.js/blob/master/examples/webgl_video_panorama_equirectangular.html

Is there a way to display where user is watching (position and direction) inside container, something like this:

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

In the top left corner there is a little square showing current position. I would like to know position and direction in which view is facing (all in 2D)

How could I achieve that?

edit:

orientation has been solved.

I am looking for position on the layout within video, is this possible? Like on the picture: https://i.sstatic.net/AEmPp.jpg

Upvotes: 0

Views: 540

Answers (1)

Holger Ludvigsen
Holger Ludvigsen

Reputation: 2546

You can get the camera direction and calculate the angles. These angles will be your 2D orientation on a sphere:

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

Here is a running example: https://jsfiddle.net/holgerl/bqvdotps/

Upvotes: 1

Related Questions