Skip to content

T
three.js

Ablesons / three.js
与 Fork 源项目一致

从无法访问的项目Fork

通知 2
Star 0
Fork 0
T
three.js

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

切换分支/标签
查找文件 普通视图历史永久链接Permalink
webgl_multiple_views.html 7.8 KB
Newer Older
M
HTML correctness.  
Mr.doob 已提交
1 
<!DOCTYPE html>
G
Added multiple views example.  
gman 已提交
2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 
<html lang="en">
	<head>
		<title>three.js webgl - multiple views</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 {
				color: #000;
				font-family:Monospace;
				font-size:13px;
				text-align:center;

				background-color: #fff;
				margin: 0px;
				overflow: hidden;
			}

			#info {
				position: absolute;
				top: 0px; width: 100%;
				padding: 5px;
			}

			a {

				color: #0080ff;
			}

		</style>
	</head>
	<body>

		<div id="container"></div>
M
Changed three.js link in examples.  
Mr.doob 已提交
35 
		<div id="info"><a href="http://threejs.org" target="_blank">three.js</a> - multiple views - webgl</div>
G
Added multiple views example.  
gman 已提交
36
M
Updated examples with three.min.js include. Closes #2229.  
Mr.doob 已提交
37 
		<script src="../build/three.min.js"></script>
G
Added multiple views example.  
gman 已提交
38 39 

		<script src="js/Detector.js"></script>
M
Updated to latest stats.js and moved libs to js/libs.  
Mr.doob 已提交
40 
		<script src="js/libs/stats.min.js"></script>
G
Added multiple views example.  
gman 已提交
41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 

		<script>

			if ( ! Detector.webgl ) Detector.addGetWebGLMessage();

			var container, stats;

			var views, scene, renderer;

			var mesh, group1, group2, group3, light;

			var mouseX = 0, mouseY = 0;

			var windowWidth, windowHeight;

			var views = [
M
Clean up.  
Mr.doob 已提交
57 
				{
G
Added multiple views example.  
gman 已提交
58 59 60 61 
					left: 0,
					bottom: 0,
					width: 0.5,
					height: 1.0,
M
Fixed yet more breakage in the examples. Only one left.  
Mr.doob 已提交
62 
					background: new THREE.Color().setRGB( 0.5, 0.5, 0.7 ),
G
Added multiple views example.  
gman 已提交
63 64 65 66 67 68 69 70 71 
					eye: [ 0, 300, 1800 ],
					up: [ 0, 1, 0 ],
					fov: 30,
					updateCamera: function ( camera, scene, mouseX, mouseY ) {
					  camera.position.x += mouseX * 0.05;
					  camera.position.x = Math.max( Math.min( camera.position.x, 2000 ), -2000 );
					  camera.lookAt( scene.position );
					}
				},
M
Fixed BufferMaterial.setFromObject fromGeometry call.  
Mr.doob 已提交
72 
				{
G
Added multiple views example.  
gman 已提交
73 74 75 76 
					left: 0.5,
					bottom: 0,
					width: 0.5,
					height: 0.5,
M
Fixed yet more breakage in the examples. Only one left.  
Mr.doob 已提交
77 
					background: new THREE.Color().setRGB( 0.7, 0.5, 0.5 ),
G
Added multiple views example.  
gman 已提交
78 79 80 81 82 83 84 85 86 
					eye: [ 0, 1800, 0 ],
					up: [ 0, 0, 1 ],
					fov: 45,
					updateCamera: function ( camera, scene, mouseX, mouseY ) {
					  camera.position.x -= mouseX * 0.05;
					  camera.position.x = Math.max( Math.min( camera.position.x, 2000 ), -2000 );
					  camera.lookAt( camera.position.clone().setY( 0 ) );
					}
				},
M
Fixed BufferMaterial.setFromObject fromGeometry call.  
Mr.doob 已提交
87 
				{
G
Added multiple views example.  
gman 已提交
88 89 90 91 
					left: 0.5,
					bottom: 0.5,
					width: 0.5,
					height: 0.5,
M
Fixed yet more breakage in the examples. Only one left.  
Mr.doob 已提交
92 
					background: new THREE.Color().setRGB( 0.5, 0.7, 0.7 ),
G
Added multiple views example.  
gman 已提交
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 
					eye: [ 1400, 800, 1400 ],
					up: [ 0, 1, 0 ],
					fov: 60,
					updateCamera: function ( camera, scene, mouseX, mouseY ) {
					  camera.position.y -= mouseX * 0.05;
					  camera.position.y = Math.max( Math.min( camera.position.y, 1600 ), -1600 );
					  camera.lookAt( scene.position );
					}
				}
			];

			init();
			animate();

			function init() {

				container = document.getElementById( 'container' );

				for (var ii =  0; ii < views.length; ++ii ) {

					var view = views[ii];
					camera = new THREE.PerspectiveCamera( view.fov, window.innerWidth / window.innerHeight, 1, 10000 );
					camera.position.x = view.eye[ 0 ];
					camera.position.y = view.eye[ 1 ];
					camera.position.z = view.eye[ 2 ];
					camera.up.x = view.up[ 0 ];
					camera.up.y = view.up[ 1 ];
					camera.up.z = view.up[ 2 ];
					view.camera = camera;
				}
M
Removed unneded scene.add( camera ) from the examples.  
Mr.doob 已提交
124 125 
				scene = new THREE.Scene();
G
Added multiple views example.  
gman 已提交
126 127 128 129 
				light = new THREE.DirectionalLight( 0xffffff );
				light.position.set( 0, 0, 1 );
				scene.add( light );
M
Shadow done with canvas instead.  
Mr.doob 已提交
130 131 132 133 134 135 136 137 138 139 140 141 142 143 
				// shadow

				var canvas = document.createElement( 'canvas' );
				canvas.width = 128;
				canvas.height = 128;

				var context = canvas.getContext( '2d' );
				var gradient = context.createRadialGradient( canvas.width / 2, canvas.height / 2, 0, canvas.width / 2, canvas.height / 2, canvas.width / 2 );
				gradient.addColorStop( 0.1, 'rgba(0,0,0,0.15)' );
				gradient.addColorStop( 1, 'rgba(0,0,0,0)' );

				context.fillStyle = gradient;
				context.fillRect( 0, 0, canvas.width, canvas.height );
M
Examples: Replaced relevant Textures with CanvasTextures.  
Mr.doob 已提交
144 
				var shadowTexture = new THREE.CanvasTexture( canvas );
M
Shadow done with canvas instead.  
Mr.doob 已提交
145
M
Fixed more examples that relied on NormalBlending.  
Mr.doob 已提交
146 
				var shadowMaterial = new THREE.MeshBasicMaterial( { map: shadowTexture, transparent: true } );
M
Updated examples that could use PlaneBufferGeometry.  
Mr.doob 已提交
147 
				var shadowGeo = new THREE.PlaneBufferGeometry( 300, 300, 1, 1 );
G
Added multiple views example.  
gman 已提交
148 149 150 

				mesh = new THREE.Mesh( shadowGeo, shadowMaterial );
				mesh.position.y = - 250;
M
Reverted PlaneGeometry XY to XZ change.  
Mr.doob 已提交
151 
				mesh.rotation.x = - Math. PI / 2;
G
Added multiple views example.  
gman 已提交
152 153 154 155 
				scene.add( mesh );

				mesh = new THREE.Mesh( shadowGeo, shadowMaterial );
				mesh.position.x = - 400;
M
Reverted PlaneGeometry XY to XZ change.  
Mr.doob 已提交
156 157 
				mesh.position.y = - 250;
				mesh.rotation.x = - Math. PI / 2;
G
Added multiple views example.  
gman 已提交
158 159 160 161 
				scene.add( mesh );

				mesh = new THREE.Mesh( shadowGeo, shadowMaterial );
				mesh.position.x = 400;
M
Reverted PlaneGeometry XY to XZ change.  
Mr.doob 已提交
162 163 
				mesh.position.y = - 250;
				mesh.rotation.x = - Math. PI / 2;
G
Added multiple views example.  
gman 已提交
164 165 
				scene.add( mesh );
M
Fixed BufferMaterial.setFromObject fromGeometry call.  
Mr.doob 已提交
166 
				var faceIndices = [ 'a', 'b', 'c' ];
G
Added multiple views example.  
gman 已提交
167
M
Fixed BufferMaterial.setFromObject fromGeometry call.  
Mr.doob 已提交
168 
				var color, f, f2, f3, p, vertexIndex,
G
Added multiple views example.  
gman 已提交
169
M
Made shadow transparent (albeit doesn't go well with canvas_geometry_earth...  
Mr.doob 已提交
170 171 172 173 174 
					radius = 200,

					geometry  = new THREE.IcosahedronGeometry( radius, 1 ),
					geometry2 = new THREE.IcosahedronGeometry( radius, 1 ),
					geometry3 = new THREE.IcosahedronGeometry( radius, 1 );
G
Added multiple views example.  
gman 已提交
175 176 177 178 179 180 181 

				for ( var i = 0; i < geometry.faces.length; i ++ ) {

					f  = geometry.faces[ i ];
					f2 = geometry2.faces[ i ];
					f3 = geometry3.faces[ i ];
M
Fixed BufferMaterial.setFromObject fromGeometry call.  
Mr.doob 已提交
182 
					for( var j = 0; j < 3; j++ ) {
G
Added multiple views example.  
gman 已提交
183 184 185 

						vertexIndex = f[ faceIndices[ j ] ];
M
Changed Vertex so it's just a Vector3 and updated all the examples. Fixes #1703.  
Mr.doob 已提交
186 
						p = geometry.vertices[ vertexIndex ];
G
Added multiple views example.  
gman 已提交
187 188 

						color = new THREE.Color( 0xffffff );
M
Replaced yet some more setHSV with setHSL.  
Mr.doob 已提交
189 
						color.setHSL( ( p.y / radius + 1 ) / 2, 1.0, 0.5 );
G
Added multiple views example.  
gman 已提交
190 191 192 193 

						f.vertexColors[ j ] = color;

						color = new THREE.Color( 0xffffff );
M
Replaced yet some more setHSV with setHSL.  
Mr.doob 已提交
194 
						color.setHSL( 0.0, ( p.y / radius + 1 ) / 2, 0.5 );
G
Added multiple views example.  
gman 已提交
195 196 197 198 

						f2.vertexColors[ j ] = color;

						color = new THREE.Color( 0xffffff );
M
Replaced yet some more setHSV with setHSL.  
Mr.doob 已提交
199 
						color.setHSL( 0.125 * vertexIndex/geometry.vertices.length, 1.0, 0.5 );
G
Added multiple views example.  
gman 已提交
200 201 202 203 204 205 206 207 208 209 

						f3.vertexColors[ j ] = color;

					}

				}


				var materials = [
M
refactor materials in examples  
Mugen87 已提交
210 
					new THREE.MeshPhongMaterial( { color: 0xffffff, shading: THREE.FlatShading, vertexColors: THREE.VertexColors, shininess: 0 } ),
G
Added multiple views example.  
gman 已提交
211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 
					new THREE.MeshBasicMaterial( { color: 0x000000, shading: THREE.FlatShading, wireframe: true, transparent: true } )

				];

				group1 = THREE.SceneUtils.createMultiMaterialObject( geometry, materials );
				group1.position.x = -400;
				group1.rotation.x = -1.87;
				scene.add( group1 );

				group2 = THREE.SceneUtils.createMultiMaterialObject( geometry2, materials );
				group2.position.x = 400;
				group2.rotation.x = 0;
				scene.add( group2 );

				group3 = THREE.SceneUtils.createMultiMaterialObject( geometry3, materials );
				group3.position.x = 0;
				group3.rotation.x = 0;
				scene.add( group3 );
M
Reverted webgl_multiple_views to use WebGLRenderer.  
Mr.doob 已提交
230 
				renderer = new THREE.WebGLRenderer( { antialias: true } );
M
Examples: Added setPixelRatio(). See #5627.  
Mr.doob 已提交
231 
				renderer.setPixelRatio( window.devicePixelRatio );
G
Added multiple views example.  
gman 已提交
232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 
				renderer.setSize( window.innerWidth, window.innerHeight );
				container.appendChild( renderer.domElement );

				stats = new Stats();
				stats.domElement.style.position = 'absolute';
				stats.domElement.style.top = '0px';
				container.appendChild( stats.domElement );

				document.addEventListener( 'mousemove', onDocumentMouseMove, false );

			}

			function onDocumentMouseMove( event ) {

				mouseX = ( event.clientX - windowWidth / 2 );
				mouseY = ( event.clientY - windowHeight / 2 );

			}

			function updateSize() {

				if ( windowWidth != window.innerWidth || windowHeight != window.innerHeight ) {

					windowWidth  = window.innerWidth;
					windowHeight = window.innerHeight;

					renderer.setSize ( windowWidth, windowHeight );

				}

			}

			function animate() {

				render();
				stats.update();

				requestAnimationFrame( animate );
			}

			function render() {

				updateSize();

				for ( var ii = 0; ii < views.length; ++ii ) {

					view = views[ii];
					camera = view.camera;

					view.updateCamera( camera, scene, mouseX, mouseY );
J
no need for application to worry about devicePixelRatio any more  
Juergen Ahting 已提交
283 284 285 286 
					var left   = Math.floor( windowWidth  * view.left );
					var bottom = Math.floor( windowHeight * view.bottom );
					var width  = Math.floor( windowWidth  * view.width );
					var height = Math.floor( windowHeight * view.height );
G
Added multiple views example.  
gman 已提交
287 288 
					renderer.setViewport( left, bottom, width, height );
					renderer.setScissor( left, bottom, width, height );
M
Docs/Examples: enableScissorTest to setScissorTest.  
Mr.doob 已提交
289 
					renderer.setScissorTest( true );
M
Fixed yet more breakage in the examples. Only one left.  
Mr.doob 已提交
290 
					renderer.setClearColor( view.background );
G
Added multiple views example.  
gman 已提交
291 292 293 294 295 296 297 298 299 300 301 302 303 

					camera.aspect = width / height;
					camera.updateProjectionMatrix();

					renderer.render( scene, camera );
				}

			}

		</script>

	</body>
</html>