Home Explore Help
Sign In
javascript
/
three.js
mirror of https://github.com/tazdij/three.js.git
2
0
Fork 0
Files Issues 0 Wiki
Browse Source

Fixed ambient light computation in CanvasRenderer to get correct lighting when there is no ambient light specified in the scene.

alteredq 14 years ago
parent
9d2aaf4e4c
commit
a8ff77e1d4
4 changed files with 188 additions and 188 deletions
Unified View Show Diff Stats
  1. 0 0
      build/Three.js
  2. 0 0
      build/ThreeDebug.js
  3. 184 184
      examples/lights_test.html
  4. 4 4
      src/renderers/CanvasRenderer.js

File diff suppressed because it is too large
+ 0 - 0
build/Three.js


File diff suppressed because it is too large
+ 0 - 0
build/ThreeDebug.js


+ 184 - 184
examples/lights_test.html
View File 

@@ -6,42 +6,42 @@
 
 		<style type="text/css">
 
 		<style type="text/css">
 
 			body {
 
 			body {
 
 				background:#fff;
 
 				background:#fff;
 
-                padding:0;
 
+				padding:0;
 
 				margin:0;
 
 				margin:0;
 
 				overflow:hidden;
 
 				overflow:hidden;
 
-                font-family:georgia;
 
-                text-align:center;
 
+				font-family:georgia;
 
+				text-align:center;
 
 			}
 
 			}
 
-            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 }
 
+			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 }
 
 		</style>
 
 		</style>
 
 	</head>
 
 	</head>
 
 	
 	
-    <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/>
 
-            <p>Best viewed in Chrome 7/8 or Firefox 4 using WebGL renderer.
 
-            <p>Canvas renderer is very slow on anything other than Chrome.
 
-        </div>
 
-        
-        <pre id="log"></pre>
 
+	<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/>
 
+			<p>Best viewed in Chrome 7/8 or Firefox 4 using WebGL renderer.
 
+			<p>Canvas renderer is very slow on anything other than Chrome.
 
+		</div>
 
+		
+		<pre id="log"></pre>
 
 
 
 		<!--
 
 		<!--
 
-        <script type="text/javascript" src="../build/Three.js"></script> 
-        -->
 
+		<script type="text/javascript" src="../build/Three.js"></script> 
+		-->
 
 
 
 		<script type="text/javascript" src="../src/Three.js"></script>
 
 		<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/Color.js"></script>
 
@@ -83,7 +83,7 @@
 
 		<script type="text/javascript" src="../src/renderers/renderables/RenderableParticle.js"></script>
 
 		<script type="text/javascript" src="../src/renderers/renderables/RenderableParticle.js"></script>
 
 		<script type="text/javascript" src="../src/renderers/renderables/RenderableLine.js"></script>
 
 		<script type="text/javascript" src="../src/renderers/renderables/RenderableLine.js"></script>
 
 		<!--
 
 		<!--
 
-        -->
 
+		-->
 
 		
 		
 		<script type="text/javascript" src="geometry/primitives/Sphere.js"></script>
 
 		<script type="text/javascript" src="geometry/primitives/Sphere.js"></script>
 
 		<script type="text/javascript" src="geometry/primitives/Plane.js"></script>
 
 		<script type="text/javascript" src="geometry/primitives/Plane.js"></script>
 
@@ -104,144 +104,144 @@
 
 			var canvasRenderer, webglRenderer;
 
 			var canvasRenderer, webglRenderer;
 
 
 
 			var mesh, zmesh, lightMesh, geometry;
 
 			var mesh, zmesh, lightMesh, geometry;
 
-            
-            var directionalLight, pointLight;
 
-            
+			
+			var directionalLight, pointLight;
 
+			
 			var mouseX = 0;
 
 			var mouseX = 0;
 
 			var mouseY = 0;
 
 			var mouseY = 0;
 
 
 
 			var windowHalfX = window.innerWidth >> 1;
 
 			var windowHalfX = window.innerWidth >> 1;
 
 			var windowHalfY = window.innerHeight >> 1;
 
 			var windowHalfY = window.innerHeight >> 1;
 
 
 
-            var render_canvas = 1, render_gl = 1;
 
-            var has_gl = 0;
 
-            
-            var bcanvas = document.getElementById("rcanvas");
 
-            var bwebgl = document.getElementById("rwebgl");
 
-            
+			var render_canvas = 1, render_gl = 1;
 
+			var has_gl = 0;
 
+			
+			var bcanvas = document.getElementById("rcanvas");
 
+			var bwebgl = document.getElementById("rwebgl");
 
+			
 			document.addEventListener('mousemove', onDocumentMouseMove, false);
 
 			document.addEventListener('mousemove', onDocumentMouseMove, false);
 
 
 
 			init();
 
 			init();
 
-            
+			
 			loop();
 
 			loop();
 
-            
-            //render_canvas = !has_gl;
 
-            bwebgl.style.display = has_gl ? "inline" : "none";
 
-            bcanvas.className = render_canvas ? "button" : "button inactive";
 
-            
+			
+			//render_canvas = !has_gl;
 
+			bwebgl.style.display = has_gl ? "inline" : "none";
 
+			bcanvas.className = render_canvas ? "button" : "button inactive";
 
+			
 			setInterval(loop, 1000/60);
 
 			setInterval(loop, 1000/60);
 
-            
+			
 			function init() {
 
 			function init() {
 
 
 
 				container = document.createElement('div');
 
 				container = document.createElement('div');
 
 				document.body.appendChild(container);
 
 				document.body.appendChild(container);
 
 
 
 				camera = new THREE.Camera( 75, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 100000 );
 
 				camera = new THREE.Camera( 75, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 100000 );
 
-                camera.position.z = 500;
 
-                camera.updateMatrix();
 
+				camera.position.z = 500;
 
+				camera.updateMatrix();
 
 
 
 				scene = new THREE.Scene();
 
 				scene = new THREE.Scene();
 
-                
-                
-                // 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);
 
-                }
 
-                
+				
+				
+				// 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);
 
+				}
 
+				
 
 
 				// LIGHTS
 
 				// LIGHTS
 
 
 
-                var ambient = new THREE.AmbientLight( 0x101010 );
 
+				var ambient = new THREE.AmbientLight( 0x101010 );
 
 				scene.addLight( ambient );
 
 				scene.addLight( ambient );
 
 
 
-                directionalLight = new THREE.DirectionalLight( 0xffffff );
 
-                directionalLight.position.y = -70;
 
-                directionalLight.position.z = 100;
 
+				directionalLight = new THREE.DirectionalLight( 0xffffff );
 
+				directionalLight.position.y = -70;
 
+				directionalLight.position.z = 100;
 
 				directionalLight.position.normalize();
 
 				directionalLight.position.normalize();
 
 				scene.addLight( directionalLight );
 
 				scene.addLight( directionalLight );
 
 
 
 				pointLight = new THREE.PointLight( 0xffaa00 );
 
 				pointLight = new THREE.PointLight( 0xffaa00 );
 
-                pointLight.position.x = 0;
 
-                pointLight.position.y = 0;
 
-                pointLight.position.z = 0;
 
+				pointLight.position.x = 0;
 
+				pointLight.position.y = 0;
 
+				pointLight.position.z = 0;
 
 				scene.addLight( pointLight );
 
 				scene.addLight( pointLight );
 
 
 
 
 
-                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) {
 
-                    }
 
-                }
 
+				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) {
 
+					}
 
+				}
 
 
 
 				stats = new Stats();
 
 				stats = new Stats();
 
 				stats.domElement.style.position = 'absolute';
 
 				stats.domElement.style.position = 'absolute';
 
 				stats.domElement.style.top = '0px';
 
 				stats.domElement.style.top = '0px';
 
-                stats.domElement.style.zIndex = 100;
 
+				stats.domElement.style.zIndex = 100;
 
 				container.appendChild( stats.domElement );
 
 				container.appendChild( stats.domElement );
 
-                
-                bcanvas.addEventListener("click", toggleCanvas, false);
 
-                bwebgl.addEventListener("click", toggleWebGL, false);
 
-
 
-                function createModel() {
 
-                    
-                    // MESH
 
-                    
-                    geometry = new Torus( );
 
-                    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);
 
-                    
-                }
 
-
 
-                loadAsync( "obj/torus/Torus.js", createModel);
 
+				
+				bcanvas.addEventListener("click", toggleCanvas, false);
 
+				bwebgl.addEventListener("click", toggleWebGL, false);
 
+
 
+				function createModel() {
 
+					
+					// MESH
 
+					
+					geometry = new Torus( );
 
+					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);
 
+					
+				}
 
+
 
+				loadAsync( "obj/torus/Torus.js", createModel);
 
 
 
 			}
 
 			}
 
 
 
-            function loadAsync( url, callback ) {
 
-                
-                var el = document.createElement( 'script' );
 
-                el.type = 'text/javascript';
 
-                el.onload = callback;
 
-                el.src = url;
 
-                document.getElementsByTagName("head")[0].appendChild(el);
 
+			function loadAsync( url, callback ) {
 
+				
+				var el = document.createElement( 'script' );
 
+				el.type = 'text/javascript';
 
+				el.onload = callback;
 
+				el.src = url;
 
+				document.getElementsByTagName("head")[0].appendChild(el);
 
 
 
-            }
 
+			}
 
 
 
-            
+			
 			function onDocumentMouseMove(event) {
 
 			function onDocumentMouseMove(event) {
 
 
 
 				mouseX = ( event.clientX - windowHalfX );
 
 				mouseX = ( event.clientX - windowHalfX );
 
@@ -249,33 +249,33 @@
 
 
 
 			}
 
 			}
 
 
 
-            var r = 0;
 
-            
+			var r = 0;
 
+			
 			function loop() {
 
 			function loop() {
 
 
 
 				camera.position.x += ( mouseX - camera.position.x ) * .05;
 
 				camera.position.x += ( mouseX - camera.position.x ) * .05;
 
 				camera.position.y += ( - mouseY - camera.position.y ) * .05;
 
 				camera.position.y += ( - mouseY - camera.position.y ) * .05;
 
 				camera.updateMatrix();
 
 				camera.updateMatrix();
 
-                
-                
-                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;
 
-                
+				
+				
+				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;
 
+				
 				if ( render_canvas ) canvasRenderer.render( scene, camera );
 
 				if ( render_canvas ) canvasRenderer.render( scene, camera );
 
 				if ( render_gl && has_gl ) webglRenderer.render( scene, camera );
 
 				if ( render_gl && has_gl ) webglRenderer.render( scene, camera );
 
 
 
@@ -283,42 +283,42 @@
 
 
 
 			}
 
 			}
 
 
 
-            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";
 
-                
-            }
 
+			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";
 
+				
+			}
 
 		</script>
 
 		</script>
 
 
 
 	</body>
 
 	</body>

+ 4 - 4
src/renderers/CanvasRenderer.js
View File 

@@ -278,7 +278,7 @@ THREE.CanvasRenderer = function () {
 
 
 
 		var l, ll, light;
 
 		var l, ll, light;
 
 
 
-		color.setRGBA( 1, 1, 1, 1 );
 
+		color.setRGBA( 0, 0, 0, 1 );
 
 
 
 		for ( l = 0, ll = scene.lights.length; l < ll; l++ ) {
 
 		for ( l = 0, ll = scene.lights.length; l < ll; l++ ) {
 
 
 
@@ -286,9 +286,9 @@ THREE.CanvasRenderer = function () {
 
 
 
 			if ( light instanceof THREE.AmbientLight ) {
 
 			if ( light instanceof THREE.AmbientLight ) {
 
 
 
-				color.r *= light.color.r;
 
-				color.g *= light.color.g;
 
-				color.b *= light.color.b;
 
+				color.r += light.color.r;
 
+				color.g += light.color.g;
 
+				color.b += light.color.b;
 
 
 
 			}
 
 			}

Some files were not shown because too many files changed in this diff