홈 탐색 도움말
로그인
javascript
/
three.js
의 미러 https://github.com/tazdij/three.js.git
2
0
포크 0
파일 이슈 0 위키
소스 검색

Examples clean up.

Mr.doob 11 년 전
부모
444a8b9ff2
커밋
1ec37295bd
7개의 변경된 파일과 29개의 추가작업 그리고 102개의 파일을 삭제
통합 보기 변경상태 보기
  1. 4 0
      examples/index.html
  2. 2 2
      examples/misc_controls_deviceorientation.html
  3. 0 0
      examples/raytracing_sandbox.html
  4. 10 38
      examples/webgl_materials_cubemap_dynamic.html
  5. 2 5
      examples/webgl_shadowmap.html
  6. 2 6
      examples/webgl_shadowmap_performance.html
  7. 9 51
      examples/webgl_terrain_dynamic.html

+ 4 - 0
examples/index.html
파일 보기 

@@ -275,6 +275,7 @@
 
 			],
 
 			],
 
 			"misc": [
 
 			"misc": [
 
 				"misc_animation_keys",
 
 				"misc_animation_keys",
 
+				"misc_controls_deviceorientation",
 
 				"misc_controls_fly",
 
 				"misc_controls_fly",
 
 				"misc_controls_oculusrift",
 
 				"misc_controls_oculusrift",
 
 				"misc_controls_orbit",
 
 				"misc_controls_orbit",
 
@@ -327,6 +328,9 @@
 
 				"canvas_performance",
 
 				"canvas_performance",
 
 				"canvas_sandbox"
 
 				"canvas_sandbox"
 
 			],
 
 			],
 
+			"raytracing": [
 
+				"raytracing_sandbox"
 
+			],
 
 			"software": [
 
 			"software": [
 
 				"software_sandbox"
 
 				"software_sandbox"
 
 			]
 
 			]

+ 2 - 2
examples/misc_controls_deviceorientation.html
파일 보기 

@@ -29,13 +29,13 @@
 
 	</head>
 
 	</head>
 
 	<body>
 
 	<body>
 
 
 
+		<div id="container"></div>
 
+
 
 		<div id="info">
 
 		<div id="info">
 
 			<a href="http://threejs.org" target="_blank">three.js</a> - equirectangular panorama demo with DeviceOrientation controls.
 
 			<a href="http://threejs.org" target="_blank">three.js</a> - equirectangular panorama demo with DeviceOrientation controls.
 
 			photo by <a href="http://www.flickr.com/photos/jonragnarsson/2294472375/" target="_blank">Jón Ragnarsson</a>.
 
 			photo by <a href="http://www.flickr.com/photos/jonragnarsson/2294472375/" target="_blank">Jón Ragnarsson</a>.
 
 		</div>
 
 		</div>
 
 
 
-		<div id="container"></div>
 
-
 
 		<script src="../build/three.min.js"></script>
 
 		<script src="../build/three.min.js"></script>
 
 		<script src="js/controls/DeviceOrientationControls.js"></script>
 
 		<script src="js/controls/DeviceOrientationControls.js"></script>

+ 0 - 0
examples/raytracer_sandbox.html → examples/raytracing_sandbox.html
파일 보기


+ 10 - 38
examples/webgl_materials_cubemap_dynamic.html
파일 보기 

@@ -6,7 +6,7 @@
 
 		<style>
 
 		<style>
 
 			body {
 
 			body {
 
 				background: #000;
 
 				background: #000;
 
-				color: #999;
 
+				color: #333;
 
 				padding: 0;
 
 				padding: 0;
 
 				margin: 0;
 
 				margin: 0;
 
 				overflow: hidden;
 
 				overflow: hidden;
 
@@ -16,9 +16,9 @@
 
 			}
 
 			}
 
 			a { color: white }
 
 			a { color: white }
 
 
 
-			#info { margin-top: 2em; }
 
-			#footer { width: 100%; margin: 2em auto; text-align: center; position: absolute; bottom: 0 }
 
-			#loading { color: orange; margin-top: 1em }
 
+			#info { position: absolute; top: 10px; width: 100%; }
 
+			#container { position: absolute; top: 0px; }
 
+			#footer { position: absolute; bottom: 10px; width: 100%; }
 
 
 
 			.h { color: skyblue }
 
 			.h { color: skyblue }
 
 			.c { display: inline; margin-left: 1em }
 
 			.c { display: inline; margin-left: 1em }
 
@@ -31,16 +31,14 @@
 
 	</head>
 
 	</head>
 
 
 
 	<body>
 
 	<body>
 
+		<div id="container"></div>
 
+
 
 		<div id="info">
 
 		<div id="info">
 
 			<a href="http://threejs.org" target="_blank">three.js</a> - webgl dynamic cube reflection demo -
 
 			<a href="http://threejs.org" target="_blank">three.js</a> - webgl dynamic cube reflection demo -
 
 			veyron by <a href="http://artist-3d.com/free_3d_models/dnm/model_disp.php?uid=1129" target="_blank">Troyano</a> -
 
 			veyron by <a href="http://artist-3d.com/free_3d_models/dnm/model_disp.php?uid=1129" target="_blank">Troyano</a> -
 
 			gallardo by <a href="http://artist-3d.com/free_3d_models/dnm/model_disp.php?uid=1711" target="_blank">machman_3d</a>
 
 			gallardo by <a href="http://artist-3d.com/free_3d_models/dnm/model_disp.php?uid=1711" target="_blank">machman_3d</a>
 
 		</div>
 
 		</div>
 
 
 
-		<div id="loading">Loading...</div>
 
-
 
-		<div id="container"></div>
 
-
 
 		<div id="footer">
 
 		<div id="footer">
 
 			cars control: <span class="h">WASD</span> / <span class="h">arrows</span>
 
 			cars control: <span class="h">WASD</span> / <span class="h">arrows</span>
 
 
 
@@ -88,13 +86,8 @@
 
 
 
 			var FOLLOW_CAMERA = false;
 
 			var FOLLOW_CAMERA = false;
 
 
 
-			var MARGIN = 100;
 
-
 
-			var WIDTH = window.innerWidth || 2;
 
-			var HEIGHT = window.innerHeight || ( 2 + 2 * MARGIN );
 
-
 
-			var SCREEN_WIDTH = WIDTH;
 
-			var SCREEN_HEIGHT = HEIGHT - 2 * MARGIN;
 
+			var SCREEN_WIDTH = window.innerWidth;
 
+			var SCREEN_HEIGHT = window.innerHeight;
 
 
 
 			var SHADOW_MAP_WIDTH = 1024, SHADOW_MAP_HEIGHT = 1024;
 
 			var SHADOW_MAP_WIDTH = 1024, SHADOW_MAP_HEIGHT = 1024;
 
 
 
@@ -155,7 +148,7 @@
 
 				container = document.getElementById( 'container' );
 
 				container = document.getElementById( 'container' );
 
 
 
 				camera = new THREE.PerspectiveCamera( 18, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 100000 );
 
 				camera = new THREE.PerspectiveCamera( 18, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 100000 );
 
-				camera.position.set( 2000, 0, 2000 );
 
+				camera.position.set( 3000, 0, 3000 );
 
 
 
 				cameraTarget = new THREE.Vector3();
 
 				cameraTarget = new THREE.Vector3();
 
 
 
@@ -196,11 +189,6 @@
 
 				renderer = new THREE.WebGLRenderer( { antialias: false } );
 
 				renderer = new THREE.WebGLRenderer( { antialias: false } );
 
 				renderer.setClearColor( scene.fog.color, 1 );
 
 				renderer.setClearColor( scene.fog.color, 1 );
 
 				renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
 
 				renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
 
-
 
-				renderer.domElement.style.position = "absolute";
 
-				renderer.domElement.style.top = MARGIN + "px";
 
-				renderer.domElement.style.left = "0px";
 
-
 
 				container.appendChild( renderer.domElement );
 
 				container.appendChild( renderer.domElement );
 
 
 
 				// SHADOW
 
 				// SHADOW
 
@@ -319,8 +307,6 @@
 
 
 
 					}
 
 					}
 
 
 
-					checkStatus();
 
-
 
 				};
 
 				};
 
 
 
 				veyron.loadPartsBinary( "obj/veyron/parts/veyron_body_bin.js", "obj/veyron/parts/veyron_wheel_bin.js" );
 
 				veyron.loadPartsBinary( "obj/veyron/parts/veyron_body_bin.js", "obj/veyron/parts/veyron_wheel_bin.js" );
 
@@ -388,8 +374,6 @@
 
 
 
 					}
 
 					}
 
 
 
-					checkStatus();
 
-
 
 				};
 
 				};
 
 
 
 				gallardo.loadPartsBinary( "obj/gallardo/parts/gallardo_body_bin.js", "obj/gallardo/parts/gallardo_wheel_bin.js" );
 
 				gallardo.loadPartsBinary( "obj/gallardo/parts/gallardo_body_bin.js", "obj/gallardo/parts/gallardo_wheel_bin.js" );
 
@@ -487,18 +471,6 @@
 
 
 
 			//
 
 			//
 
 
 
-			function checkStatus() {
 
-
 
-				if ( gallardo.loaded && veyron.loaded ) {
 
-
 
-					document.getElementById( "loading" ).style.display = "none";
 
-
 
-				}
 
-
 
-			}
 
-
 
-			//
 
-
 
 			function setSpritesOpacity( opacity ) {
 
 			function setSpritesOpacity( opacity ) {
 
 
 
 				for ( var i = 0; i < sprites.length; i ++ ) {
 
 				for ( var i = 0; i < sprites.length; i ++ ) {
 
@@ -766,7 +738,7 @@
 
 			function onWindowResize( event ) {
 
 			function onWindowResize( event ) {
 
 
 
 				SCREEN_WIDTH = window.innerWidth;
 
 				SCREEN_WIDTH = window.innerWidth;
 
-				SCREEN_HEIGHT = window.innerHeight - 2 * MARGIN;
 
+				SCREEN_HEIGHT = window.innerHeight;
 
 
 
 				camera.aspect = SCREEN_WIDTH / SCREEN_HEIGHT;
 
 				camera.aspect = SCREEN_WIDTH / SCREEN_HEIGHT;
 
 				camera.updateProjectionMatrix();
 
 				camera.updateProjectionMatrix();

+ 2 - 5
examples/webgl_shadowmap.html
파일 보기 

@@ -49,11 +49,10 @@
 
 
 
 			var SHADOW_MAP_WIDTH = 2048, SHADOW_MAP_HEIGHT = 1024;
 
 			var SHADOW_MAP_WIDTH = 2048, SHADOW_MAP_HEIGHT = 1024;
 
 
 
-			var MARGIN = 100;
 
 			var HUD_MARGIN = 0.05;
 
 			var HUD_MARGIN = 0.05;
 
 
 
 			var SCREEN_WIDTH = window.innerWidth;
 
 			var SCREEN_WIDTH = window.innerWidth;
 
-			var SCREEN_HEIGHT = window.innerHeight - 2 * MARGIN;
 
+			var SCREEN_HEIGHT = window.innerHeight;
 
 			var FLOOR = -250;
 
 			var FLOOR = -250;
 
 
 
 			var camera, controls, scene, renderer;
 
 			var camera, controls, scene, renderer;
 
@@ -134,8 +133,6 @@
 
 
 
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 
 				renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
 
 				renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
 
-				renderer.domElement.style.position = "relative";
 
-				renderer.domElement.style.top = MARGIN + 'px';
 
 				container.appendChild( renderer.domElement );
 
 				container.appendChild( renderer.domElement );
 
 
 
 				renderer.setClearColor( scene.fog.color, 1 );
 
 				renderer.setClearColor( scene.fog.color, 1 );
 
@@ -164,7 +161,7 @@
 
 			function onWindowResize() {
 
 			function onWindowResize() {
 
 
 
 				SCREEN_WIDTH = window.innerWidth;
 
 				SCREEN_WIDTH = window.innerWidth;
 
-				SCREEN_HEIGHT = window.innerHeight - 2 * MARGIN;
 
+				SCREEN_HEIGHT = window.innerHeight;
 
 
 
 				camera.aspect = SCREEN_WIDTH / SCREEN_HEIGHT;
 
 				camera.aspect = SCREEN_WIDTH / SCREEN_HEIGHT;
 
 				camera.updateProjectionMatrix();
 
 				camera.updateProjectionMatrix();

+ 2 - 6
examples/webgl_shadowmap_performance.html
파일 보기 

@@ -48,10 +48,8 @@
 
 
 
 			var SHADOW_MAP_WIDTH = 2048, SHADOW_MAP_HEIGHT = 1024;
 
 			var SHADOW_MAP_WIDTH = 2048, SHADOW_MAP_HEIGHT = 1024;
 
 
 
-			var MARGIN = 100;
 
-
 
 			var SCREEN_WIDTH = window.innerWidth;
 
 			var SCREEN_WIDTH = window.innerWidth;
 
-			var SCREEN_HEIGHT = window.innerHeight - 2 * MARGIN;
 
+			var SCREEN_HEIGHT = window.innerHeight;
 
 			var FLOOR = -250;
 
 			var FLOOR = -250;
 
 
 
 			var camera, controls, scene, renderer;
 
 			var camera, controls, scene, renderer;
 
@@ -130,8 +128,6 @@
 
 
 
 				renderer = new THREE.WebGLRenderer( { antialias: false } );
 
 				renderer = new THREE.WebGLRenderer( { antialias: false } );
 
 				renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
 
 				renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
 
-				renderer.domElement.style.position = "relative";
 
-				renderer.domElement.style.top = MARGIN + 'px';
 
 				container.appendChild( renderer.domElement );
 
 				container.appendChild( renderer.domElement );
 
 
 
 				renderer.setClearColor( scene.fog.color, 1 );
 
 				renderer.setClearColor( scene.fog.color, 1 );
 
@@ -159,7 +155,7 @@
 
 			function onWindowResize() {
 
 			function onWindowResize() {
 
 
 
 				SCREEN_WIDTH = window.innerWidth;
 
 				SCREEN_WIDTH = window.innerWidth;
 
-				SCREEN_HEIGHT = window.innerHeight - 2 * MARGIN;
 
+				SCREEN_HEIGHT = window.innerHeight;
 
 
 
 				camera.aspect = SCREEN_WIDTH / SCREEN_HEIGHT;
 
 				camera.aspect = SCREEN_WIDTH / SCREEN_HEIGHT;
 
 				camera.updateProjectionMatrix();
 
 				camera.updateProjectionMatrix();

+ 9 - 51
examples/webgl_terrain_dynamic.html
파일 보기 

@@ -15,16 +15,14 @@
 
 				text-align: center;
 
 				text-align: center;
 
 			}
 
 			}
 
 
 
-			#info { margin-top: 2em	}
 
+			#info { position: absolute; top: 10px; width: 100%; }
 
 
 
 			a { color: #fb0; }
 
 			a { color: #fb0; }
 
 
 
-			#footer { width: 100%; margin: 2em auto; text-align: center; position: absolute; bottom: 0 }
 
+			#footer { position: absolute; bottom: 10px; width: 100%; }
 
 			.h { color: #fb0 }
 
 			.h { color: #fb0 }
 
 			.c { display: inline; margin-left: 1em }
 
 			.c { display: inline; margin-left: 1em }
 
 
 
-			#loading { width: 100%; margin: 2em auto; text-align: center; position: absolute; top: 25em  }
 
-
 
 			#oldie a { color:#da0 }
 
 			#oldie a { color:#da0 }
 
 
 
 			#stats { position: absolute; top:0; left: 0 }
 
 			#stats { position: absolute; top:0; left: 0 }
 
@@ -46,8 +44,6 @@
 
 			music by <a href="http://incompetech.com/m/c/royalty-free/index.html?keywords=00875">Kevin MacLeod</a>
 
 			music by <a href="http://incompetech.com/m/c/royalty-free/index.html?keywords=00875">Kevin MacLeod</a>
 
 		</div>
 
 		</div>
 
 
 
-		<div id="loading">Loading...</div>
 
-
 
 		<div id="footer">
 
 		<div id="footer">
 
 			<div class="c">
 
 			<div class="c">
 
 			day / night: <span class="h">n</span>
 
 			day / night: <span class="h">n</span>
 
@@ -56,17 +52,8 @@
 
 			<div class="c">
 
 			<div class="c">
 
 			animate terrain: <span class="h">m</span>
 
 			animate terrain: <span class="h">m</span>
 
 			</div>
 
 			</div>
 
-
 
-			<div class="c">
 
-			toggle soundtrack: <span class="h">b</span>
 
-			</div>
 
 		</div>
 
 		</div>
 
-<!--
 
-		<audio id="soundtrack" autoplay loop style="display:none">
 
-			<source src="sounds/Five_Armies.mp3" type='audio/mp3'>
 
-			<source src="sounds/Five_Armies.ogg" type='audio/ogg'>
 
-		</audio>
 
--->
 
+
 
 		<script src="../build/three.min.js"></script>
 
 		<script src="../build/three.min.js"></script>
 
 
 
 		<script src="js/controls/TrackballControls.js"></script>
 
 		<script src="js/controls/TrackballControls.js"></script>
 
@@ -238,10 +225,8 @@
 
 
 
 			if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
 
 			if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
 
 
 
-			var MARGIN = 100;
 
-
 
 			var SCREEN_WIDTH = window.innerWidth;
 
 			var SCREEN_WIDTH = window.innerWidth;
 
-			var SCREEN_HEIGHT = window.innerHeight - 2 * MARGIN;
 
+			var SCREEN_HEIGHT = window.innerHeight;
 
 
 
 			var renderer, container, stats;
 
 			var renderer, container, stats;
 
 
 
@@ -260,7 +245,6 @@
 
 
 
 			var animDelta = 0, animDeltaDir = -1;
 
 			var animDelta = 0, animDeltaDir = -1;
 
 			var lightVal = 0, lightDir = 1;
 
 			var lightVal = 0, lightDir = 1;
 
-			var soundVal = 0, oldSoundVal = 0, soundDir = 1;
 
 
 
 			var clock = new THREE.Clock();
 
 			var clock = new THREE.Clock();
 
 
 
@@ -281,8 +265,6 @@
 
 
 
 				container = document.getElementById( 'container' );
 
 				container = document.getElementById( 'container' );
 
 
 
-				soundtrack = document.getElementById( "soundtrack" );
 
-
 
 				// SCENE (RENDER TARGET)
 
 				// SCENE (RENDER TARGET)
 
 
 
 				sceneRenderTarget = new THREE.Scene();
 
 				sceneRenderTarget = new THREE.Scene();
 
@@ -406,10 +388,10 @@
 
 				uniformsTerrain[ "uRepeatOverlay" ].value.set( 6, 6 );
 
 				uniformsTerrain[ "uRepeatOverlay" ].value.set( 6, 6 );
 
 
 
 				var params = [
 
 				var params = [
 
-								[ 'heightmap', 	document.getElementById( 'fragmentShaderNoise' ).textContent, 	vertexShader, uniformsNoise, false ],
 
-								[ 'normal', 	normalShader.fragmentShader,  normalShader.vertexShader, uniformsNormal, false ],
 
-								[ 'terrain', 	terrainShader.fragmentShader, terrainShader.vertexShader, uniformsTerrain, true ]
 
-							 ];
 
+					[ 'heightmap', 	document.getElementById( 'fragmentShaderNoise' ).textContent, 	vertexShader, uniformsNoise, false ],
 
+					[ 'normal', 	normalShader.fragmentShader,  normalShader.vertexShader, uniformsNormal, false ],
 
+					[ 'terrain', 	terrainShader.fragmentShader, terrainShader.vertexShader, uniformsTerrain, true ]
 
+				 ];
 
 
 
 				for( var i = 0; i < params.length; i ++ ) {
 
 				for( var i = 0; i < params.length; i ++ ) {
 
 
 
@@ -436,9 +418,6 @@
 
 				// TERRAIN MESH
 
 				// TERRAIN MESH
 
 
 
 				var geometryTerrain = new THREE.PlaneGeometry( 6000, 6000, 256, 256 );
 
 				var geometryTerrain = new THREE.PlaneGeometry( 6000, 6000, 256, 256 );
 
-
 
-				geometryTerrain.computeFaceNormals();
 
-				geometryTerrain.computeVertexNormals();
 
 				geometryTerrain.computeTangents();
 
 				geometryTerrain.computeTangents();
 
 
 
 				terrain = new THREE.Mesh( geometryTerrain, mlib[ "terrain" ] );
 
 				terrain = new THREE.Mesh( geometryTerrain, mlib[ "terrain" ] );
 
@@ -452,11 +431,6 @@
 
 				renderer = new THREE.WebGLRenderer();
 
 				renderer = new THREE.WebGLRenderer();
 
 				renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
 
 				renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
 
 				renderer.setClearColor( scene.fog.color, 1 );
 
 				renderer.setClearColor( scene.fog.color, 1 );
 
-
 
-				renderer.domElement.style.position = "absolute";
 
-				renderer.domElement.style.top = MARGIN + "px";
 
-				renderer.domElement.style.left = "0px";
 
-
 
 				container.appendChild( renderer.domElement );
 
 				container.appendChild( renderer.domElement );
 
 
 
 				//
 
 				//
 
@@ -597,7 +571,7 @@
 
 			function onWindowResize( event ) {
 
 			function onWindowResize( event ) {
 
 
 
 				SCREEN_WIDTH = window.innerWidth;
 
 				SCREEN_WIDTH = window.innerWidth;
 
-				SCREEN_HEIGHT = window.innerHeight - 2 * MARGIN;
 
+				SCREEN_HEIGHT = window.innerHeight;
 
 
 
 				renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
 
 				renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
 
 
 
@@ -614,7 +588,6 @@
 
 
 
 					case 78: /*N*/  lightDir *= -1; break;
 
 					case 78: /*N*/  lightDir *= -1; break;
 
 					case 77: /*M*/  animDeltaDir *= -1; break;
 
 					case 77: /*M*/  animDeltaDir *= -1; break;
 
-					case 66: /*B*/  soundDir *= -1; break;
 
 
 
 				}
 
 				}
 
 
 
@@ -655,8 +628,6 @@
 
 
 
 					terrain.visible = true;
 
 					terrain.visible = true;
 
 
 
-					document.getElementById( "loading" ).style.display = "none";
 
-
 
 				}
 
 				}
 
 
 
 			}
 
 			}
 
@@ -676,19 +647,6 @@
 
 
 
 				var delta = clock.getDelta();
 
 				var delta = clock.getDelta();
 
 
 
-				soundVal = THREE.Math.clamp( soundVal + delta * soundDir, 0, 1 );
 
-
 
-				if ( soundVal !== oldSoundVal ) {
 
-
 
-					if ( soundtrack ) {
 
-
 
-						soundtrack.volume = soundVal;
 
-						oldSoundVal = soundVal;
 
-
 
-					}
 
-
 
-				}
 
-
 
 				if ( terrain.visible ) {
 
 				if ( terrain.visible ) {
 
 
 
 					controls.update();
 
 					controls.update();