Skip to content

T
three.js

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

从无法访问的项目Fork

通知 2
Star 0
Fork 0
T
three.js

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

切换分支/标签
查找文件 普通视图历史永久链接Permalink
webgl_panorama_dualfisheye.html 4.7 KB
Newer Older
M
Added webgl_panorama_dualfisheye (Ricoh Theta S) example.  
Mr.doob 已提交
1 2 3 4 5 6 
<!DOCTYPE html>
<html lang="en">
	<head>
		<title>three.js webgl - dual fisheye panorama</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
M
Examples: Unified CSS.  
Mr.doob 已提交
7 
		<link type="text/css" rel="stylesheet" href="main.css">
M
Added webgl_panorama_dualfisheye (Ricoh Theta S) example.  
Mr.doob 已提交
8 9 
		<style>
			body {
M
Examples: Unified CSS.  
Mr.doob 已提交
10 11 
				background-color: #fff;
				color: #444;
M
Added webgl_panorama_dualfisheye (Ricoh Theta S) example.  
Mr.doob 已提交
12 13 
			}
			a {
M
Examples: Unified CSS.  
Mr.doob 已提交
14 
				color: #08f;
M
Added webgl_panorama_dualfisheye (Ricoh Theta S) example.  
Mr.doob 已提交
15 16 17 18 19 20 21 
			}
		</style>
	</head>
	<body>

		<div id="container"></div>
		<div id="info">
M
Examples: Unified CSS.  
Mr.doob 已提交
22 
			<a href="http://threejs.org" target="_blank" rel="noopener">three.js webgl</a> - dualfisheye panorama
M
Added webgl_panorama_dualfisheye (Ricoh Theta S) example.  
Mr.doob 已提交
23 24 
		</div>
M
Examples: More module examples.  
Mugen87 已提交
25 26 27 28 29 30 31 32 33 34 35 36 37 
		<script type="module">
			import {
				LinearFilter,
				Math as _Math,
				Mesh,
				MeshBasicMaterial,
				PerspectiveCamera,
				RGBFormat,
				Scene,
				SphereBufferGeometry,
				TextureLoader,
				WebGLRenderer,
			} from "../build/three.module.js";
M
Added webgl_panorama_dualfisheye (Ricoh Theta S) example.  
Mr.doob 已提交
38 39 40 41 

			var camera, scene, renderer;

			var isUserInteracting = false,
L
fix linter errors in webgl M to W  
Lewy Blue 已提交
42 43 44 45 46 47 48 49 
				lon = 0, lat = 0,
				phi = 0, theta = 0,
				distance = 500,
				onPointerDownPointerX = 0,
				onPointerDownPointerY = 0,

				onPointerDownLon = 0,
				onPointerDownLat = 0;
M
Added webgl_panorama_dualfisheye (Ricoh Theta S) example.  
Mr.doob 已提交
50 51 52 53 54 55 56 57 58 59 

			init();
			animate();

			function init() {

				var container, mesh;

				container = document.getElementById( 'container' );
M
Examples: More module examples.  
Mugen87 已提交
60 
				camera = new PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 2000 );
M
Added webgl_panorama_dualfisheye (Ricoh Theta S) example.  
Mr.doob 已提交
61
M
Examples: More module examples.  
Mugen87 已提交
62 
				scene = new Scene();
M
Added webgl_panorama_dualfisheye (Ricoh Theta S) example.  
Mr.doob 已提交
63
M
Examples: More module examples.  
Mugen87 已提交
64 
				var geometry = new SphereBufferGeometry( 500, 60, 40 ).toNonIndexed();
M
Examples: Clean up  
Mugen87 已提交
65 
				// invert the geometry on the x-axis so that all of the faces point inward
M
Added webgl_panorama_dualfisheye (Ricoh Theta S) example.  
Mr.doob 已提交
66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 
				geometry.scale( - 1, 1, 1 );

				// Remap UVs

				var normals = geometry.attributes.normal.array;
				var uvs = geometry.attributes.uv.array;

				for ( var i = 0, l = normals.length / 3; i < l; i ++ ) {

					var x = normals[ i * 3 + 0 ];
					var y = normals[ i * 3 + 1 ];
					var z = normals[ i * 3 + 2 ];

					if ( i < l / 2 ) {

						var correction = ( x == 0 && z == 0 ) ? 1 : ( Math.acos( y ) / Math.sqrt( x * x + z * z ) ) * ( 2 / Math.PI );
						uvs[ i * 2 + 0 ] = x * ( 404 / 1920 ) * correction + ( 447 / 1920 );
						uvs[ i * 2 + 1 ] = z * ( 404 / 1080 ) * correction + ( 582 / 1080 );

					} else {

						var correction = ( x == 0 && z == 0 ) ? 1 : ( Math.acos( - y ) / Math.sqrt( x * x + z * z ) ) * ( 2 / Math.PI );
						uvs[ i * 2 + 0 ] = - x * ( 404 / 1920 ) * correction + ( 1460 / 1920 );
						uvs[ i * 2 + 1 ] = z * ( 404 / 1080 ) * correction + ( 582 / 1080 );

					}

				}

				geometry.rotateZ( - Math.PI / 2 );

				//
M
Examples: More module examples.  
Mugen87 已提交
99 100 101 
				var texture = new TextureLoader().load( 'textures/ricoh_theta_s.jpg' );
				texture.minFilter = LinearFilter;
				texture.format = RGBFormat;
M
Added webgl_panorama_dualfisheye (Ricoh Theta S) example.  
Mr.doob 已提交
102
M
Examples: More module examples.  
Mugen87 已提交
103 
				var material = new MeshBasicMaterial( { map: texture } );
M
Added webgl_panorama_dualfisheye (Ricoh Theta S) example.  
Mr.doob 已提交
104
M
Examples: More module examples.  
Mugen87 已提交
105 
				mesh = new Mesh( geometry, material );
M
Added webgl_panorama_dualfisheye (Ricoh Theta S) example.  
Mr.doob 已提交
106 107 
				scene.add( mesh );
M
Examples: More module examples.  
Mugen87 已提交
108 
				renderer = new WebGLRenderer();
M
Added webgl_panorama_dualfisheye (Ricoh Theta S) example.  
Mr.doob 已提交
109 110 111 112 113 114 115 
				renderer.setPixelRatio( window.devicePixelRatio );
				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 );
M
Mousewheel clean up. See #9526.  
Mr.doob 已提交
116 
				document.addEventListener( 'wheel', onDocumentMouseWheel, false );
M
Added webgl_panorama_dualfisheye (Ricoh Theta S) example.  
Mr.doob 已提交
117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 

				//

				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 === true ) {

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

				}

			}
L
fix linter errors in webgl M to W  
Lewy Blue 已提交
158 
			function onDocumentMouseUp() {
M
Added webgl_panorama_dualfisheye (Ricoh Theta S) example.  
Mr.doob 已提交
159 160 161 162 163 164 165 

				isUserInteracting = false;

			}

			function onDocumentMouseWheel( event ) {
M
Mousewheel clean up. See #9526.  
Mr.doob 已提交
166 
				distance += event.deltaY * 0.05;
M
Added webgl_panorama_dualfisheye (Ricoh Theta S) example.  
Mr.doob 已提交
167
M
Examples: More module examples.  
Mugen87 已提交
168 
				distance = _Math.clamp( distance, 400, 1000 );
W
Limit zooming  
WestLangley 已提交
169
M
Added webgl_panorama_dualfisheye (Ricoh Theta S) example.  
Mr.doob 已提交
170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 
			}

			function animate() {

				requestAnimationFrame( animate );
				update();

			}

			function update() {

				if ( isUserInteracting === false ) {

					lon += 0.1;

				}

				lat = Math.max( - 85, Math.min( 85, lat ) );
M
Examples: More module examples.  
Mugen87 已提交
188 189 
				phi = _Math.degToRad( 90 - lat );
				theta = _Math.degToRad( lon - 180 );
M
Added webgl_panorama_dualfisheye (Ricoh Theta S) example.  
Mr.doob 已提交
190 191 192 193 194 195 196 197 198 199 200 201 202 203 

				camera.position.x = distance * Math.sin( phi ) * Math.cos( theta );
				camera.position.y = distance * Math.cos( phi );
				camera.position.z = distance * Math.sin( phi ) * Math.sin( theta );

				camera.lookAt( scene.position );

				renderer.render( scene, camera );

			}

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