Skip to content

T
three.js

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

从无法访问的项目Fork

通知 2
Star 0
Fork 0
T
three.js

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

切换分支/标签
查找文件 普通视图历史永久链接Permalink
lights_test.html 10.5 KB
Newer Older
A
Added point light / fixed directional light in WebGLRenderer / added light test example.  
alteredq 已提交
1 2 3 4 5 6 7 8 
<!DOCTYPE HTML>
<html lang="en">
	<head>
		<title>three.js - Lights test</title>
		<meta charset="utf-8">
		<style type="text/css">
			body {
				background:#fff;
A
Fixed ambient light computation in CanvasRenderer to get correct lighting when...  
alteredq 已提交
9 
				padding:0;
A
Added point light / fixed directional light in WebGLRenderer / added light test example.  
alteredq 已提交
10 11 
				margin:0;
				overflow:hidden;
A
Fixed ambient light computation in CanvasRenderer to get correct lighting when...  
alteredq 已提交
12 13 
				font-family:georgia;
				text-align:center;
A
Added point light / fixed directional light in WebGLRenderer / added light test example.  
alteredq 已提交
14 
			}
A
Fixed ambient light computation in CanvasRenderer to get correct lighting when...  
alteredq 已提交
15 16 17 18 19 20 21 
			h1 { }
			a { color:skyblue }
			canvas { pointer-events:none; z-index:10; position:relative; }
			#log { position:absolute; top:50px; text-align:left; display:block; z-index:100; }
			#d { text-align:center; margin:1em 0 -15.7em 0; z-index:0; position:relative; display:block }
			.button { background:#000; color:#fff; padding:0.2em 0.5em; cursor:pointer }
			.inactive { background:#999; color:#eee }
A
Added point light / fixed directional light in WebGLRenderer / added light test example.  
alteredq 已提交
22 23 24 
		</style>
	</head>
A
Fixed ambient light computation in CanvasRenderer to get correct lighting when...  
alteredq 已提交
25 26 27 28 29 30 31 32 33 34 35 
	<body>
		<div id="d">
			<h1>Lights test</h1>

			<span id="rcanvas" class="button inactive">2d canvas renderer</span>
			<span id="rwebgl" class="button">WebGL renderer</span>
			<br/>
			
			<p>Using a modified version of <a href="http://github.com/alteredq/three.js">Three.js</a> by mrdoob.
			
			<br/>
A
Added Loader class providing both asynchronous JS and web worker based loading of models.  
alteredq 已提交
36 
			<p>Best viewed in Chrome 8/9 or Firefox 4 using WebGL renderer.
A
Fixed ambient light computation in CanvasRenderer to get correct lighting when...  
alteredq 已提交
37 38 39 40 
			<p>Canvas renderer is very slow on anything other than Chrome.
		</div>
		
		<pre id="log"></pre>
A
Added point light / fixed directional light in WebGLRenderer / added light test example.  
alteredq 已提交
41
A
Fixed ambient light computation in CanvasRenderer to get correct lighting when...  
alteredq 已提交
42 
		<script type="text/javascript" src="../build/Three.js"></script>
A
Forgot to build one-file version and to bump up version number.  
alteredq 已提交
43 
		<!--
A
Fixed ambient light computation in CanvasRenderer to get correct lighting when...  
alteredq 已提交
44 
		-->
A
Added point light / fixed directional light in WebGLRenderer / added light test example.  
alteredq 已提交
45
A
Forgot to build one-file version and to bump up version number.  
alteredq 已提交
46 
		<!--
A
Added point light / fixed directional light in WebGLRenderer / added light test example.  
alteredq 已提交
47 48 49 50 51 52 
		<script type="text/javascript" src="../src/Three.js"></script>
		<script type="text/javascript" src="../src/core/Color.js"></script>
		<script type="text/javascript" src="../src/core/Vector2.js"></script>
		<script type="text/javascript" src="../src/core/Vector3.js"></script>
		<script type="text/javascript" src="../src/core/Vector4.js"></script>
		<script type="text/javascript" src="../src/core/Rectangle.js"></script>
M
* Code clean up (yuicompressor doesn't throw a single warning :D) and some reformating  
Mr.doob 已提交
53 
		<script type="text/javascript" src="../src/core/Matrix3.js"></script>
A
Added point light / fixed directional light in WebGLRenderer / added light test example.  
alteredq 已提交
54 55 56 57 58 59 60 
		<script type="text/javascript" src="../src/core/Matrix4.js"></script>
		<script type="text/javascript" src="../src/core/Vertex.js"></script>
		<script type="text/javascript" src="../src/core/Face3.js"></script>
		<script type="text/javascript" src="../src/core/Face4.js"></script>
		<script type="text/javascript" src="../src/core/UV.js"></script>
		<script type="text/javascript" src="../src/core/Geometry.js"></script>
		<script type="text/javascript" src="../src/cameras/Camera.js"></script>
A
Added Loader class providing both asynchronous JS and web worker based loading of models.  
alteredq 已提交
61 
		<script type="text/javascript" src="../src/io/Loader.js"></script>
A
Added point light / fixed directional light in WebGLRenderer / added light test example.  
alteredq 已提交
62 63 64 65 66 67 68 69 70 
		<script type="text/javascript" src="../src/lights/Light.js"></script>
		<script type="text/javascript" src="../src/lights/AmbientLight.js"></script>
		<script type="text/javascript" src="../src/lights/DirectionalLight.js"></script>
		<script type="text/javascript" src="../src/lights/PointLight.js"></script>
		<script type="text/javascript" src="../src/objects/Object3D.js"></script>
		<script type="text/javascript" src="../src/objects/Mesh.js"></script>
		<script type="text/javascript" src="../src/objects/Particle.js"></script>
		<script type="text/javascript" src="../src/objects/Line.js"></script>
		<script type="text/javascript" src="../src/materials/LineColorMaterial.js"></script>
A
Added Blinn-Phong material for WebGLRenderer.  
alteredq 已提交
71 
		<script type="text/javascript" src="../src/materials/MeshPhongMaterial.js"></script>
M
* MeshBitmapUVMappingMaterial -> MeshBitmapMaterial. Second param is mode,...  
Mr.doob 已提交
72 
		<script type="text/javascript" src="../src/materials/MeshBitmapMaterial.js"></script>
A
Added point light / fixed directional light in WebGLRenderer / added light test example.  
alteredq 已提交
73 74 
		<script type="text/javascript" src="../src/materials/MeshColorFillMaterial.js"></script>
		<script type="text/javascript" src="../src/materials/MeshColorStrokeMaterial.js"></script>
M
* MeshBitmapUVMappingMaterial -> MeshBitmapMaterial. Second param is mode,...  
Mr.doob 已提交
75 
		<script type="text/javascript" src="../src/materials/MeshFaceMaterial.js"></script>
A
Added point light / fixed directional light in WebGLRenderer / added light test example.  
alteredq 已提交
76 77 78 79 80 81 82 83 84 85 86 
		<script type="text/javascript" src="../src/materials/ParticleCircleMaterial.js"></script>
		<script type="text/javascript" src="../src/materials/ParticleBitmapMaterial.js"></script>
		<script type="text/javascript" src="../src/scenes/Scene.js"></script>
		<script type="text/javascript" src="../src/renderers/Projector.js"></script>
		<script type="text/javascript" src="../src/renderers/CanvasRenderer.js"></script>
		<script type="text/javascript" src="../src/renderers/SVGRenderer.js"></script>
		<script type="text/javascript" src="../src/renderers/WebGLRenderer.js"></script>
		<script type="text/javascript" src="../src/renderers/renderables/RenderableFace3.js"></script>
		<script type="text/javascript" src="../src/renderers/renderables/RenderableFace4.js"></script>
		<script type="text/javascript" src="../src/renderers/renderables/RenderableParticle.js"></script>
		<script type="text/javascript" src="../src/renderers/renderables/RenderableLine.js"></script>
A
Fixed ambient light computation in CanvasRenderer to get correct lighting when...  
alteredq 已提交
87 
		-->
M
* `examples/geometry/primitives` ⟶ `src/extras/primitives`  
Mr.doob 已提交
88 89 90 

		<script type="text/javascript" src="../src/extras/primitives/Sphere.js"></script>
		<script type="text/javascript" src="../src/extras/primitives/Plane.js"></script>
A
Added point light / fixed directional light in WebGLRenderer / added light test example.  
alteredq 已提交
91 92 93 94 95 

		<script type="text/javascript" src="js/Stats.js"></script>

		<script type="text/javascript">
M
* `examples/geometry/primitives` ⟶ `src/extras/primitives`  
Mr.doob 已提交
96 
			var SCREEN_WIDTH = window.innerWidth / 2;
A
Added point light / fixed directional light in WebGLRenderer / added light test example.  
alteredq 已提交
97 98 99 100 101 102 103 104 105 106 107 
			var SCREEN_HEIGHT = window.innerHeight;
			var FLOOR = -250;

			var container;
			var stats;

			var camera;
			var scene;
			var canvasRenderer, webglRenderer;

			var mesh, zmesh, lightMesh, geometry;
M
* `examples/geometry/primitives` ⟶ `src/extras/primitives`  
Mr.doob 已提交
108
A
Fixed ambient light computation in CanvasRenderer to get correct lighting when...  
alteredq 已提交
109 
			var directionalLight, pointLight;
M
* `examples/geometry/primitives` ⟶ `src/extras/primitives`  
Mr.doob 已提交
110
A
Added point light / fixed directional light in WebGLRenderer / added light test example.  
alteredq 已提交
111 112 113 114 115 116 
			var mouseX = 0;
			var mouseY = 0;

			var windowHalfX = window.innerWidth >> 1;
			var windowHalfY = window.innerHeight >> 1;
A
Fixed ambient light computation in CanvasRenderer to get correct lighting when...  
alteredq 已提交
117 118 119 120 121 122 
			var render_canvas = 1, render_gl = 1;
			var has_gl = 0;
			
			var bcanvas = document.getElementById("rcanvas");
			var bwebgl = document.getElementById("rwebgl");
A
Added point light / fixed directional light in WebGLRenderer / added light test example.  
alteredq 已提交
123 124 125 
			document.addEventListener('mousemove', onDocumentMouseMove, false);

			init();
A
Fixed ambient light computation in CanvasRenderer to get correct lighting when...  
alteredq 已提交
126
A
Added point light / fixed directional light in WebGLRenderer / added light test example.  
alteredq 已提交
127 
			loop();
A
Fixed ambient light computation in CanvasRenderer to get correct lighting when...  
alteredq 已提交
128 129 130 131 132 
			
			//render_canvas = !has_gl;
			bwebgl.style.display = has_gl ? "inline" : "none";
			bcanvas.className = render_canvas ? "button" : "button inactive";
A
Added point light / fixed directional light in WebGLRenderer / added light test example.  
alteredq 已提交
133 
			setInterval(loop, 1000/60);
A
Fixed ambient light computation in CanvasRenderer to get correct lighting when...  
alteredq 已提交
134
A
Added point light / fixed directional light in WebGLRenderer / added light test example.  
alteredq 已提交
135 136 137 138 139 140 
			function init() {

				container = document.createElement('div');
				document.body.appendChild(container);

				camera = new THREE.Camera( 75, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 100000 );
A
Fixed ambient light computation in CanvasRenderer to get correct lighting when...  
alteredq 已提交
141 142 
				camera.position.z = 500;
				camera.updateMatrix();
A
Added point light / fixed directional light in WebGLRenderer / added light test example.  
alteredq 已提交
143 144 

				scene = new THREE.Scene();
A
Fixed ambient light computation in CanvasRenderer to get correct lighting when...  
alteredq 已提交
145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 
				
				
				// SPHERES
				
				sphere = new Sphere( 100, 16, 8, 0 );
				for (var i=0; i<30; i++) {
					mesh = new THREE.Mesh( sphere, new THREE.MeshColorFillMaterial( 0xffffff ) );
					mesh.position.x = 500 * (Math.random() - 0.5);
					mesh.position.y = 500 * (Math.random() - 0.5);
					mesh.position.z = 500 * (Math.random() - 0.5);
					mesh.scale.x = mesh.scale.y = mesh.scale.z = 0.25 * (Math.random() + 0.5);
					mesh.overdraw = true;
					mesh.updateMatrix();
					scene.addObject(mesh);
				}
A
Added point light / fixed directional light in WebGLRenderer / added light test example.  
alteredq 已提交
161 162 163 

				// LIGHTS
A
Fixed ambient light computation in CanvasRenderer to get correct lighting when...  
alteredq 已提交
164 
				var ambient = new THREE.AmbientLight( 0x101010 );
A
Added point light / fixed directional light in WebGLRenderer / added light test example.  
alteredq 已提交
165 166 
				scene.addLight( ambient );
A
Fixed ambient light computation in CanvasRenderer to get correct lighting when...  
alteredq 已提交
167 168 169 
				directionalLight = new THREE.DirectionalLight( 0xffffff );
				directionalLight.position.y = -70;
				directionalLight.position.z = 100;
A
Added point light / fixed directional light in WebGLRenderer / added light test example.  
alteredq 已提交
170 171 172 173 
				directionalLight.position.normalize();
				scene.addLight( directionalLight );

				pointLight = new THREE.PointLight( 0xffaa00 );
A
Fixed ambient light computation in CanvasRenderer to get correct lighting when...  
alteredq 已提交
174 175 176 
				pointLight.position.x = 0;
				pointLight.position.y = 0;
				pointLight.position.z = 0;
A
Added point light / fixed directional light in WebGLRenderer / added light test example.  
alteredq 已提交
177 178 179 
				scene.addLight( pointLight );
A
Fixed ambient light computation in CanvasRenderer to get correct lighting when...  
alteredq 已提交
180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 
				sphere = new Sphere( 100, 16, 8, 1 );
				lightMesh = new THREE.Mesh( sphere, new THREE.MeshColorFillMaterial( 0xffaa00 ) );
				lightMesh.scale.x = lightMesh.scale.y = lightMesh.scale.z = 0.05;
				lightMesh.position = pointLight.position;
				lightMesh.overdraw = true;
				lightMesh.updateMatrix();
				scene.addObject(lightMesh);


				if( render_canvas ) {
					canvasRenderer = new THREE.CanvasRenderer();
					canvasRenderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
					container.appendChild( canvasRenderer.domElement );
				}

				if ( render_gl ) {
					try {
						webglRenderer = new THREE.WebGLRenderer( scene );
						webglRenderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
						container.appendChild( webglRenderer.domElement );
						has_gl = 1;
					}
					catch (e) {
					}
				}
A
Added point light / fixed directional light in WebGLRenderer / added light test example.  
alteredq 已提交
205 206 207 208 

				stats = new Stats();
				stats.domElement.style.position = 'absolute';
				stats.domElement.style.top = '0px';
A
Fixed ambient light computation in CanvasRenderer to get correct lighting when...  
alteredq 已提交
209 
				stats.domElement.style.zIndex = 100;
A
Added point light / fixed directional light in WebGLRenderer / added light test example.  
alteredq 已提交
210 
				container.appendChild( stats.domElement );
A
Fixed ambient light computation in CanvasRenderer to get correct lighting when...  
alteredq 已提交
211 212 213 214 215 
				
				bcanvas.addEventListener("click", toggleCanvas, false);
				bwebgl.addEventListener("click", toggleWebGL, false);
A
Added Loader class providing both asynchronous JS and web worker based loading of models.  
alteredq 已提交
216 
				var loader = new THREE.Loader();
A
Added experimental binary mesh loader. Updated OBJ converter and examples accordingly.  
alteredq 已提交
217 218 219 
				//loader.loadAsciiOld( "obj/torus/Torus.js", function() { createScene( new Torus() ) } );
				//loader.loadAscii( "obj/torus/Torus_slim.js", function( geometry ) { createScene( geometry ) } );
                loader.loadBinary( "obj/torus/Torus_bin.js", function( geometry ) { createScene( geometry ) }, "obj/torus" );
A
Added point light / fixed directional light in WebGLRenderer / added light test example.  
alteredq 已提交
220 221 222 

			}
A
Added Loader class providing both asynchronous JS and web worker based loading of models.  
alteredq 已提交
223 224 225 226 227 228 229 230 231 232 
			function createScene( geometry ) {
				
				zmesh = new THREE.Mesh( geometry, new THREE.MeshColorFillMaterial( 0xffffff ) );
				zmesh.position.x = 0;
				zmesh.position.z = 0;
				zmesh.position.y = 0;
				zmesh.scale.x = zmesh.scale.y = zmesh.scale.z = 100;
				zmesh.overdraw = true;
				zmesh.updateMatrix();
				scene.addObject(zmesh);
A
Fixed ambient light computation in CanvasRenderer to get correct lighting when...  
alteredq 已提交
233 234 
				
			}
A
Added point light / fixed directional light in WebGLRenderer / added light test example.  
alteredq 已提交
235
A
Fixed ambient light computation in CanvasRenderer to get correct lighting when...  
alteredq 已提交
236
A
Added point light / fixed directional light in WebGLRenderer / added light test example.  
alteredq 已提交
237 238 239 240 241 242 243 
			function onDocumentMouseMove(event) {

				mouseX = ( event.clientX - windowHalfX );
				mouseY = ( event.clientY - windowHalfY );

			}
A
Fixed ambient light computation in CanvasRenderer to get correct lighting when...  
alteredq 已提交
244 245 
			var r = 0;
A
Added point light / fixed directional light in WebGLRenderer / added light test example.  
alteredq 已提交
246 247 248 249 250 
			function loop() {

				camera.position.x += ( mouseX - camera.position.x ) * .05;
				camera.position.y += ( - mouseY - camera.position.y ) * .05;
				camera.updateMatrix();
A
Fixed ambient light computation in CanvasRenderer to get correct lighting when...  
alteredq 已提交
251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 
				
				
				for(var i=0; i<scene.objects.length; ++i) {
					if ( i%3 == 1 )
						scene.objects[i].rotation.x += 0.05;
					else if ( i%3 == 2 )
						scene.objects[i].rotation.y += 0.05;
					else if ( i%3 == 0 )
						scene.objects[i].rotation.z += 0.05;
						
					scene.objects[i].updateMatrix();
				}
				
				
				lightMesh.position.x = 200*Math.cos(r);
				lightMesh.position.z = 200*Math.sin(r);
				lightMesh.updateMatrix();

				r += 0.1;
A
Added point light / fixed directional light in WebGLRenderer / added light test example.  
alteredq 已提交
271 272 273 274 275 276 277 
				if ( render_canvas ) canvasRenderer.render( scene, camera );
				if ( render_gl && has_gl ) webglRenderer.render( scene, camera );

				stats.update();

			}
A
Fixed ambient light computation in CanvasRenderer to get correct lighting when...  
alteredq 已提交
278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 
			function log(text) {
			
				var e = document.getElementById("log");
				e.innerHTML = text + "<br/>" + e.innerHTML;
				
			}
			
			function toggleCanvas() {
			
				render_canvas = !render_canvas;
				bcanvas.className = render_canvas ? "button" : "button inactive";
				
				render_gl = !render_canvas;
				bwebgl.className = render_gl ? "button" : "button inactive";
				
				if( has_gl )
					webglRenderer.domElement.style.display = render_gl ? "block" : "none";
				
				canvasRenderer.domElement.style.display = render_canvas ? "block" : "none";
				
			}
			
			function toggleWebGL() {
			
				render_gl = !render_gl;
				bwebgl.className = render_gl ? "button" : "button inactive";
				
				render_canvas = !render_gl;
				bcanvas.className = render_canvas ? "button" : "button inactive";
				
				if( has_gl )
					webglRenderer.domElement.style.display = render_gl ? "block" : "none";
					
				canvasRenderer.domElement.style.display = render_canvas ? "block" : "none";
				
			}
A
Added point light / fixed directional light in WebGLRenderer / added light test example.  
alteredq 已提交
314 315 316 317 
		</script>

	</body>
</html>