Skip to content

T
three.js

车家大少爷 / three.js
与 Fork 源项目一致

从无法访问的项目Fork

通知 2
Star 0
Fork 0
T
three.js

体验新版 GitCode，发现更多精彩内容 >>

切换分支/标签
查找文件 普通视图历史永久链接Permalink
webgl_panorama_equirectangular.html 4.1 KB
Newer Older
M
HTML correctness.  
Mr.doob 已提交
1 
<!DOCTYPE html>
M
Added WebGL equirectangular panorama demo.  
Mr.doob 已提交
2 3 4 5 
<html lang="en">
	<head>
		<title>three.js webgl - equirectangular panorama demo</title>
		<meta charset="utf-8">
M
Updated HTML of the rest of the examples.  
Mr.doob 已提交
6 7 
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		<style>
M
Added WebGL equirectangular panorama demo.  
Mr.doob 已提交
8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 
			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>
A
Updated the rest of examples.  
alteredq 已提交
32 
		<div id="container"></div>
M
Changed three.js link in examples.  
Mr.doob 已提交
33 
		<div id="info"><a href="http://threejs.org" target="_blank">three.js webgl</a> - equirectangular panorama demo. photo by <a href="http://www.flickr.com/photos/jonragnarsson/2294472375/" target="_blank">Jón Ragnarsson</a>.</div>
M
Added WebGL equirectangular panorama demo.  
Mr.doob 已提交
34
M
Updated examples with three.min.js include. Closes #2229.  
Mr.doob 已提交
35 
		<script src="../build/three.min.js"></script>
M
Added WebGL equirectangular panorama demo.  
Mr.doob 已提交
36
M
More examples clean up.  
Mr.doob 已提交
37 
		<script>
M
Added WebGL equirectangular panorama demo.  
Mr.doob 已提交
38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 

			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' );
A
More fixing of runtime warnings in examples.  
alteredq 已提交
58 
				camera = new THREE.PerspectiveCamera( fov, window.innerWidth / window.innerHeight, 1, 1100 );
A
Updated the rest of examples.  
alteredq 已提交
59 
				camera.target = new THREE.Vector3( 0, 0, 0 );
M
Removed unneded scene.add( camera ) from the examples.  
Mr.doob 已提交
60 61 

				scene = new THREE.Scene();
M
Added WebGL equirectangular panorama demo.  
Mr.doob 已提交
62
M
Updated all examples so they use the renamed geometry classes.  
Mr.doob 已提交
63 
				mesh = new THREE.Mesh( new THREE.SphereGeometry( 500, 60, 40 ), new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'textures/2294472375_24a3b8ef46_o.jpg' ) } ) );
M
Added WebGL equirectangular panorama demo.  
Mr.doob 已提交
64 
				mesh.scale.x = -1;
M
Updated examples with the new `.add`/`.remove` methods.  
Mr.doob 已提交
65 
				scene.add( mesh );
M
Added WebGL equirectangular panorama demo.  
Mr.doob 已提交
66 67 68 69 70 71 72 73 74 75 

				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 );
T
Added the same onDocumentMouseWheel() function and event handlers as in...  
Theo Armour 已提交
76 
				document.addEventListener( 'DOMMouseScroll', onDocumentMouseWheel, false);
M
Added WebGL equirectangular panorama demo.  
Mr.doob 已提交
77
A
Another batch of examples resizing.  
alteredq 已提交
78 79 80 81 82 83 84 85 86 87 88 89 90 
				//

				window.addEventListener( 'resize', onWindowResize, false );

			}

			function onWindowResize() {

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

				renderer.setSize( window.innerWidth, window.innerHeight );
M
Added WebGL equirectangular panorama demo.  
Mr.doob 已提交
91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 
			}

			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 ) {
T
Added the same onDocumentMouseWheel() function and event handlers as in...  
Theo Armour 已提交
125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 
				// 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;

				}
M
Matrix4's static methods makeFrustum, makePerspective, makeOrtho are now...  
Mr.doob 已提交
145 
				camera.projectionMatrix.makePerspective( fov, window.innerWidth / window.innerHeight, 1, 1100 );
M
Added WebGL equirectangular panorama demo.  
Mr.doob 已提交
146 147 148 149 150 151 152 153 154 155 156 157 158 159 
				render();

			}

			function animate() {

				requestAnimationFrame( animate );
				render();

			}

			function render() {

				lat = Math.max( - 85, Math.min( 85, lat ) );
B
adopting THREE.Math.degToRad/radToDeg for code readability.  
Ben Houston 已提交
160 161 
				phi = THREE.Math.degToRad( 90 - lat );
				theta = THREE.Math.degToRad( lon );
M
Added WebGL equirectangular panorama demo.  
Mr.doob 已提交
162
A
Updated the rest of examples.  
alteredq 已提交
163 164 165 166 167 
				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 );
M
Added WebGL equirectangular panorama demo.  
Mr.doob 已提交
168 169 170 

				/*
				// distortion
A
Updated the rest of examples.  
alteredq 已提交
171 172 173 
				camera.position.x = - camera.target.x;
				camera.position.y = - camera.target.y;
				camera.position.z = - camera.target.z;
M
Added WebGL equirectangular panorama demo.  
Mr.doob 已提交
174 175 176 177 178 179 180 181 182 
				*/

				renderer.render( scene, camera );

			}

		</script>
	</body>
</html>