Equirectangular panorama of the SeatGeek office, rendered with THREE.js.
Last active
December 21, 2015 15:19
-
-
Save erwaller/6325706 to your computer and use it in GitHub Desktop.
The SeatGeek Office
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <title>three.js webgl - equirectangular panorama demo</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: #000000; | |
| margin: 0px; | |
| overflow: hidden; | |
| } | |
| #info { | |
| position: absolute; | |
| top: 0px; 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 id="container"></div> | |
| <div id="info"><a href="http://threejs.org" target="_blank">three.js webgl</a> - equirectangular panorama demo</a>.</div> | |
| <script src="//cdnjs.cloudflare.com/ajax/libs/three.js/r58/three.min.js"></script> | |
| <script> | |
| var camera, scene, renderer; | |
| var fov = 70, | |
| texture_placeholder, | |
| isUserInteracting = false, | |
| onMouseDownMouseX = 0, onMouseDownMouseY = 0, | |
| lon = 0, onMouseDownLon = 0, | |
| lat = 0, onMouseDownLat = 0, | |
| phi = 0, theta = 0; | |
| init(); | |
| animate(); | |
| function init() { | |
| var container, mesh; | |
| container = document.getElementById( 'container' ); | |
| camera = new THREE.PerspectiveCamera( fov, window.innerWidth / window.innerHeight, 1, 1100 ); | |
| camera.target = new THREE.Vector3( 0, 0, 0 ); | |
| scene = new THREE.Scene(); | |
| mesh = new THREE.Mesh( new THREE.SphereGeometry( 500, 60, 40 ), new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'panorama.jpg' ) } ) ); | |
| mesh.scale.x = -1; | |
| scene.add( mesh ); | |
| renderer = new THREE.WebGLRenderer(); | |
| renderer.setSize( window.innerWidth, window.innerHeight ); | |
| container.appendChild( renderer.domElement ); | |
| 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); | |
| // | |
| window.addEventListener( 'resize', onWindowResize, false ); | |
| } | |
| 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 ); | |
| } | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment