Skip to content

T
three.js

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

从无法访问的项目Fork

通知 2
Star 0
Fork 0
T
three.js

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

“dd27dac124fa20f2111beef27ae98510da7828af”上不存在“examples/webgl_panorama_equirectangular.html”
切换分支/标签
查找文件 普通视图历史永久链接Permalink
webgl_panorama_equirectangular.html 5.0 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
Added drop events to equirectangular panorama example.  
Mr.doob 已提交
33 34 35 36 
		<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>.<br />
			drag equirectangular texture into the page.
		</div>
M
Added WebGL equirectangular panorama demo.  
Mr.doob 已提交
37
M
Updated examples with three.min.js include. Closes #2229.  
Mr.doob 已提交
38 
		<script src="../build/three.min.js"></script>
M
Added WebGL equirectangular panorama demo.  
Mr.doob 已提交
39
M
More examples clean up.  
Mr.doob 已提交
40 
		<script>
M
Added WebGL equirectangular panorama demo.  
Mr.doob 已提交
41 42 43 

			var camera, scene, renderer;
M
Removed unused var.  
Mr.doob 已提交
44 
			var isUserInteracting = false,
M
Added WebGL equirectangular panorama demo.  
Mr.doob 已提交
45 46 47 48 49 50 51 52 53 54 55 56 57 58 
			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' );
M
Made panorama examples auto-rotate.  
Mr.doob 已提交
59 
				camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 1100 );
A
Updated the rest of examples.  
alteredq 已提交
60 
				camera.target = new THREE.Vector3( 0, 0, 0 );
M
Removed unneded scene.add( camera ) from the examples.  
Mr.doob 已提交
61 62 

				scene = new THREE.Scene();
M
Added WebGL equirectangular panorama demo.  
Mr.doob 已提交
63
M
Moved scale.x -1 from mesh to geometry. See #3966.  
Mr.doob 已提交
64 65 66 67 68 69 70 71 72 
				var geometry = new THREE.SphereGeometry( 500, 60, 40 );
				geometry.applyMatrix( new THREE.Matrix4().makeScale( -1, 1, 1 ) );

				var material = new THREE.MeshBasicMaterial( {
					map: THREE.ImageUtils.loadTexture( 'textures/2294472375_24a3b8ef46_o.jpg' )
				} );

				mesh = new THREE.Mesh( geometry, material );
M
Updated examples with the new `.add`/`.remove` methods.  
Mr.doob 已提交
73 
				scene.add( mesh );
M
Added WebGL equirectangular panorama demo.  
Mr.doob 已提交
74 75 76 77 78 79 80 81 82 

				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 已提交
83 
				document.addEventListener( 'DOMMouseScroll', onDocumentMouseWheel, false);
M
Added WebGL equirectangular panorama demo.  
Mr.doob 已提交
84
A
Another batch of examples resizing.  
alteredq 已提交
85 86 
				//
M
Added drop events to equirectangular panorama example.  
Mr.doob 已提交
87 88 89 90 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 
				document.addEventListener( 'dragover', function ( event ) {

					event.preventDefault();
					event.dataTransfer.dropEffect = 'copy';

				}, false );

				document.addEventListener( 'dragenter', function ( event ) {

					document.body.style.opacity = 0.5;

				}, false );

				document.addEventListener( 'dragleave', function ( event ) {

					document.body.style.opacity = 1;

				}, false );

				document.addEventListener( 'drop', function ( event ) {

					event.preventDefault();

					var reader = new FileReader();
					reader.addEventListener( 'load', function ( event ) {

						material.map.image.src = event.target.result;
						material.map.needsUpdate = true;

					}, false );
					reader.readAsDataURL( event.dataTransfer.files[ 0 ] );

					document.body.style.opacity = 1;

				}, false );

				//
A
Another batch of examples resizing.  
alteredq 已提交
125 126 127 128 129 130 131 132 133 134 135 
				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 已提交
136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 
			}

			function onDocumentMouseDown( event ) {

				event.preventDefault();

				isUserInteracting = true;

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

				onPointerDownLon = lon;
				onPointerDownLat = lat;

			}

			function onDocumentMouseMove( event ) {
M
Made panorama examples auto-rotate.  
Mr.doob 已提交
154 
				if ( isUserInteracting === true ) {
M
Added WebGL equirectangular panorama demo.  
Mr.doob 已提交
155 156 157 158 159 

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

				}
M
Made panorama examples auto-rotate.  
Mr.doob 已提交
160
M
Added WebGL equirectangular panorama demo.  
Mr.doob 已提交
161 162 163 164 165 166 167 168 169 170 
			}

			function onDocumentMouseUp( event ) {

				isUserInteracting = false;

			}

			function onDocumentMouseWheel( event ) {
T
Added the same onDocumentMouseWheel() function and event handlers as in...  
Theo Armour 已提交
171 172 173 174 
				// WebKit

				if ( event.wheelDeltaY ) {
M
Made panorama examples auto-rotate.  
Mr.doob 已提交
175 
					camera.fov -= event.wheelDeltaY * 0.05;
T
Added the same onDocumentMouseWheel() function and event handlers as in...  
Theo Armour 已提交
176 177 178 179 180 

				// Opera / Explorer 9

				} else if ( event.wheelDelta ) {
M
Made panorama examples auto-rotate.  
Mr.doob 已提交
181 
					camera.fov -= event.wheelDelta * 0.05;
T
Added the same onDocumentMouseWheel() function and event handlers as in...  
Theo Armour 已提交
182 183 184 185 186 

				// Firefox

				} else if ( event.detail ) {
M
Made panorama examples auto-rotate.  
Mr.doob 已提交
187 
					camera.fov += event.detail * 1.0;
T
Added the same onDocumentMouseWheel() function and event handlers as in...  
Theo Armour 已提交
188 189 190 

				}
M
Made panorama examples auto-rotate.  
Mr.doob 已提交
191 
				camera.updateProjectionMatrix();
M
Added WebGL equirectangular panorama demo.  
Mr.doob 已提交
192 193 194 195 196 197 

			}

			function animate() {

				requestAnimationFrame( animate );
M
Made panorama examples auto-rotate.  
Mr.doob 已提交
198 
				update();
M
Added WebGL equirectangular panorama demo.  
Mr.doob 已提交
199 200 201 

			}
M
Made panorama examples auto-rotate.  
Mr.doob 已提交
202 203 204 205 206 207 208 
			function update() {

				if ( isUserInteracting === false ) {

					lon += 0.1;

				}
M
Added WebGL equirectangular panorama demo.  
Mr.doob 已提交
209 210 

				lat = Math.max( - 85, Math.min( 85, lat ) );
B
adopting THREE.Math.degToRad/radToDeg for code readability.  
Ben Houston 已提交
211 212 
				phi = THREE.Math.degToRad( 90 - lat );
				theta = THREE.Math.degToRad( lon );
M
Added WebGL equirectangular panorama demo.  
Mr.doob 已提交
213
A
Updated the rest of examples.  
alteredq 已提交
214 215 216 217 218 
				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 已提交
219 220 221 

				/*
				// distortion
M
Made panorama examples auto-rotate.  
Mr.doob 已提交
222 
				camera.position.copy( camera.target ).negate();
M
Added WebGL equirectangular panorama demo.  
Mr.doob 已提交
223 224 225 226 227 228 229 230 231 
				*/

				renderer.render( scene, camera );

			}

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