All examples By author By category About

aman-tiwari

Full window Github gist

Pano 2 persp

Save perspective snapshots of equirectangular panos, by Aman tiwari THREE.js.

forked from erwaller's block: The SeatGeek Office

forked from anonymous's block: Pano 2 persp

<!DOCTYPE html>
<html lang="en">
  <head>
		<title> equirectangular panorama to perspective </title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		<style>
			body {
				background-color: #0000ff;
				margin: 0px;
				overflow: hidden;
			}

#info {
				position: absolute;
				top: 20px; width: 100%;
				color: #ffffff;
				padding: 5px;
				font-family:Monospace;
				font-size:13px;
				font-weight: bold;
				text-align:center;
			}

a {
				color: #ffffff;
			}
		</style>
	</head>
	<body>
    <div><input id="userImage" type="file" /></div>
    
		<div id="container"></div>
		<div id="info"><a href="#nothing" id="download">click me to download a picture, set fov, w and h query params in the url</a></div>
<script
  src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
  integrity="sha256-k2WSCIexGzOj3Euiig+TlR8gA0EmPjuc79OEeY5L45g="
  crossorigin="anonymous"></script>

var fov = 70,
			texture_placeholder,
			isUserInteracting = false,
			onMouseDownMouseX = 0, onMouseDownMouseY = 0,
			lon = 0, onMouseDownLon = 0,
			lat = 0, onMouseDownLat = 0,
			phi = 0, theta = 0;

var camera, scene, renderer;

var container, mesh;

container = document.getElementById( 'container' );

camera = new THREE.PerspectiveCamera( fov, w / h, 1, 1100 );
				camera.target = new THREE.Vector3( 0, 0, 0 );

scene = new THREE.Scene();
        console.log(image, texture);

mesh = new THREE.Mesh( new THREE.SphereGeometry( 500, 60, 40 ), new THREE.MeshBasicMaterial( { map: texture } ) );
				mesh.scale.x = -1;
				scene.add( mesh );

renderer = new THREE.WebGLRenderer({
            preserveDrawingBuffer: true
        });
				renderer.setSize( window.innerWidth, window.innerHeight );

document.addEventListener( 'mousedown', onDocumentMouseDown, false );
				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
				document.addEventListener( 'mouseup', onDocumentMouseUp, false );
				document.addEventListener( 'mousewheel', onDocumentMouseWheel, false );
				document.addEventListener( 'DOMMouseScroll', onDocumentMouseWheel, false);

$('#container').append(renderer.domElement);

var butt = document.querySelector("#download");
        butt.addEventListener('click', function (ev) {
          saveAsImage();
        })
				window.addEventListener( 'resize', onWindowResize, false );

}
			var imgData;
      
      function saveAsImage() {
        var imgData, imgNode;

try {
				camera.aspect = w / h;
				camera.updateProjectionMatrix();

renderer.setSize( w, h );
				render();
          
            var strMime = "image/jpeg";
            imgData = renderer.domElement.toDataURL(strMime);

saveFile(imgData.replace(strMime, strDownloadMime), "test.jpg");
				camera.aspect = window.innerWidth / window.innerHeight;
				camera.updateProjectionMatrix();

renderer.setSize( window.innerWidth, window.innerHeight );

} catch (e) {
            console.log(e);
            return;
        }

}

function onWindowResize() {

camera.aspect = window.innerWidth / window.innerHeight;
				camera.updateProjectionMatrix();

renderer.setSize( window.innerWidth, window.innerHeight );

}

function onDocumentMouseDown( event ) {

event.preventDefault();

isUserInteracting = true;

onPointerDownPointerX = event.clientX;
				onPointerDownPointerY = event.clientY;

onPointerDownLon = lon;
				onPointerDownLat = lat;

}

function onDocumentMouseMove( event ) {

if ( isUserInteracting ) {

lon = ( onPointerDownPointerX - event.clientX ) * 0.1 + onPointerDownLon;
					lat = ( event.clientY - onPointerDownPointerY ) * 0.1 + onPointerDownLat;

}
			}

function onDocumentMouseUp( event ) {

isUserInteracting = false;

}

function onDocumentMouseWheel( event ) {

// WebKit

if ( event.wheelDeltaY ) {

fov -= event.wheelDeltaY * 0.05;

// Opera / Explorer 9

} else if ( event.wheelDelta ) {

fov -= event.wheelDelta * 0.05;

// Firefox

} else if ( event.detail ) {

fov += event.detail * 1.0;

}

camera.projectionMatrix.makePerspective( fov, window.innerWidth / window.innerHeight, 1, 1100 );
				render();

}

function animate() {

requestAnimationFrame( animate );
				render();

}

function render() {

lat = Math.max( - 85, Math.min( 85, lat ) );
				phi = THREE.Math.degToRad( 90 - lat );
				theta = THREE.Math.degToRad( lon );

camera.target.x = 500 * Math.sin( phi ) * Math.cos( theta );
				camera.target.y = 500 * Math.cos( phi );
				camera.target.z = 500 * Math.sin( phi ) * Math.sin( theta );

camera.lookAt( camera.target );

/*
				// distortion
				camera.position.x = - camera.target.x;
				camera.position.y = - camera.target.y;
				camera.position.z = - camera.target.z;
				*/

renderer.render( scene, camera );

}

init();
    animate();

});		</script>
	</body>
</html>

https://cdnjs.cloudflare.com/ajax/libs/three.js/r58/three.min.js