I have created a 360 video player, using three.js. I am using raycasting to find the 3D world coordinates whenever I am clicking the mouse and I am successfully getting these coordinates.
Is there a way to map these 3D world coordinates to unwrapped(panoramic, equi-rectangular) video coordinates. I thought of converting 3D world coordinates to screen coordinates, but those coordinates mapping does not corresponds to actual 3D points. Any help would be highly appreciated.
here is the code I am using:
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r73/three.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/211120/orbitControls.js"></script>
<a href="#" id="testButton">TEST</a>
<!-- <a href="#" id="testButton2">TEST2</a> -->
<script>
var width = window.innerWidth;
var height = window.innerHeight;
var renderer = new THREE.WebGLRenderer({ antialias: true });
var projector = new THREE.Projector();
renderer.setSize(width, height);
document.body.appendChild(renderer.domElement);
var video = document.createElement('video');
video.autoplay = true;
video.src = 'https://streams.kolor.com/streams/833ec36d-b115-43a2-bbf1-aaca49046bab/source.02-720p_HD.mp4';
video.crossOrigin = '';
videoTexture = new THREE.Texture(video);
videoTexture.minFilter = THREE.LinearFilter;
videoTexture.magFilter = THREE.LinearFilter;
videoTexture.format = THREE.RGBFormat;
var scene = new THREE.Scene();
var cubeGeometry = new THREE.SphereGeometry(500, 60, 40);
var sphereMat = new THREE.MeshBasicMaterial({map: videoTexture});
sphereMat.side = THREE.BackSide;
var cube = new THREE.Mesh(cubeGeometry, sphereMat);
scene.add(cube);
var camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 10000);
camera.position.set(0,0,50);
scene.add(camera);
var controls = new THREE.OrbitControls( camera);
controls.rotateUp(Math.PI / 4);
controls.target.set(
camera.position.x + 0.1,
camera.position.y,
camera.position.z
);
//console.log('controls', controls);
//create controls
function onMouseMove( event ) {
// calculate mouse position in normalized device coordinates
// (-1 to +1) for both components
var vector = new THREE.Vector3( ( event.clientX / window.innerWidth ) * 2 - 1, - ( event.clientY / window.innerHeight ) * 2 + 1, 0.5 );
projector.unprojectVector( vector, camera);
var raycaster = new THREE.Raycaster( camera.position, vector.sub( camera.position ).normalize() );
var intersects = raycaster.intersectObjects(scene.children, true);
console.log(intersects[0].point);
var width = window.innerWidth, height = window.innerHeight;
var widthHalf = width / 2, heightHalf = height / 2;
/*camera.updateMatrixWorld(true);
scene.updateMatrixWorld();
var vector1 = new THREE.Vector3();
vector.setFromMatrixPosition(intersects[0].object.matrixWorld);
vector.project(camera);*/
var p = new THREE.Vector3(intersects[0].point.x,intersects[0].point.y,intersects[0].point.z);
var vector1 = p.project(camera);
vector1.x = ( vector1.x * widthHalf ) + widthHalf;
vector1.y = - ( vector1.y * heightHalf ) + heightHalf;
console.log(vector1);
}
function render() {
if( video.readyState === video.HAVE_ENOUGH_DATA ){
videoTexture.needsUpdate = true;
}
controls.update();
renderer.render(scene, camera);
requestAnimationFrame(render);
}
render();
window.addEventListener( 'mousedown', onMouseMove, false );
</script>
</body>
</html>
If I understand your question correctly, you don't even need the 3d coordinates to get the coordinates in the flat video: you can just use the UV-coordinates the raycaster reports for the sphere intersection.
Coordinates (0, 0) are the top left corner of the video and (1, 1) the bottom right corner.