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://imgur.com/a/xsNYM
1 Answers
Answers 1
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/
0 comments:
Post a Comment