ReflectionMapping working with MeshBasicMaterial/CanvasRenderer \:D/

TODO: Add computeVertexNormals on geometry so any object can use it.

examples/canvasrenderer_sandbox.html

@@ -133,12 +133,12 @@
 				objects = [];
 
 				geometry = new Sphere( 100, 16, 8 );
-				material = new THREE.MeshBasicMaterial( { env_map: ImageUtils.loadTexture( 'textures/uvgrid.png', THREE.ReflectionMapping ) } );
+				material = new THREE.MeshBasicMaterial( { env_map: ImageUtils.loadTexture( 'textures/envmap.png', THREE.ReflectionMapping ) } );
 
 				for ( var i = 0; i < 10; i ++ ) {
 
 					sphere = new THREE.Mesh( geometry, material );
-					sphere.overdraw = true;
+					// sphere.overdraw = true;
 
 					sphere.position.x = Math.random() * 1000 - 500;
 					sphere.position.y = Math.random() * 1000 - 500;

examples/materials.html

@@ -60,6 +60,7 @@
 		<script type="text/javascript" src="../src/renderers/renderables/RenderableLine.js"></script>
 
 		<script type="text/javascript" src="../src/extras/primitives/Sphere.js"></script>
+		<script type="text/javascript" src="../src/extras/ImageUtils.js"></script>
 
 		<script type="text/javascript" src="js/Stats.js"></script>
 
@@ -120,7 +121,8 @@
 				// materials.push( { material: new THREE.MeshPhongMaterial( { ambient: 0x030383, color: 0xf55555, specular: 0x66f6f6, shininess: 10, shading: THREE.FlatShading } ), overdraw: true, doubleSided: false } );
 				materials.push( { material: new THREE.MeshDepthMaterial( { near: 1, far: 2000 } ), overdraw: true, doubleSided: false } );
 				materials.push( { material: new THREE.MeshNormalMaterial(), overdraw: true, doubleSided: false } );
-				materials.push( { material: new THREE.MeshLambertMaterial( { map: loadImage( 'textures/land_ocean_ice_cloud_2048.jpg' ) } ), overdraw: false, doubleSided: false } );
+				materials.push( { material: new THREE.MeshLambertMaterial( { map: ImageUtils.loadTexture( 'textures/land_ocean_ice_cloud_2048.jpg', THREE.UVMapping ) } ), overdraw: false, doubleSided: false } );
+				materials.push( { material: new THREE.MeshBasicMaterial( { env_map: ImageUtils.loadTexture( 'textures/envmap.png', THREE.ReflectionMapping ) } ), overdraw: false, doubleSided: false } );
 
 				for ( var i = 0, l = geometry.faces.length; i < l; i ++ ) {
 

examples/textures/uvgrid.nfo

-http://www.flickr.com/photos/seeminglee/1791052516/

src/core/Vector3.js

@@ -34,11 +34,11 @@ THREE.Vector3.prototype = {
 
 	},
 
-	add: function ( v1, v2 ) {
+	add: function ( a, b ) {
 
-		this.x = v1.x + v2.x;
-		this.y = v1.y + v2.y;
-		this.z = v1.z + v2.z;
+		this.x = a.x + b.x;
+		this.y = a.y + b.y;
+		this.z = a.z + b.z;
 
 		return this;
 
@@ -64,11 +64,11 @@ THREE.Vector3.prototype = {
 
 	},
 
-	sub: function( v1, v2 ) {
+	sub: function( a, b ) {
 
-		this.x = v1.x - v2.x;
-		this.y = v1.y - v2.y;
-		this.z = v1.z - v2.z;
+		this.x = a.x - b.x;
+		this.y = a.y - b.y;
+		this.z = a.z - b.z;
 
 		return this;
 
@@ -84,11 +84,11 @@ THREE.Vector3.prototype = {
 
 	},
 
-	cross: function ( v1, v2 ) {
+	cross: function ( a, b ) {
 
-		this.x = v1.y * v2.z - v1.z * v2.y;
-		this.y = v1.z * v2.x - v1.x * v2.z;
-		this.z = v1.x * v2.y - v1.y * v2.x;
+		this.x = a.y * b.z - a.z * b.y;
+		this.y = a.z * b.x - a.x * b.z;
+		this.z = a.x * b.y - a.y * b.x;
 
 		return this;
 
@@ -106,6 +106,16 @@ THREE.Vector3.prototype = {
 
 	},
 
+	multiply: function ( a, b ) {
+
+		this.x = a.x * b.x;
+		this.y = a.y * b.y;
+		this.z = a.z * b.z;
+
+		return this;
+
+	},
+
 	multiplySelf: function ( v ) {
 
 		this.x *= v.x;

src/renderers/CanvasRenderer.js

@@ -30,6 +30,7 @@ THREE.CanvasRenderer = function () {
 	_2near, _farPlusNear, _farMinusNear,
 
 	_bitmap,
+	_uv1x, _uv1y, _uv2x, _uv2y, _uv3x, _uv3y,
 
 	_clipRect = new THREE.Rectangle(),
 	_clearRect = new THREE.Rectangle(),
@@ -470,17 +471,23 @@ THREE.CanvasRenderer = function () {
 				fillPath( material.color.__styleString );
 				*/
 
-			} else {
+			} else if ( material.env_map && material.env_map.loaded ) {
 
-				material.wireframe ? strokePath( material.color.__styleString, material.wireframe_linewidth ) : fillPath( material.color.__styleString );
+				if ( material.env_map.mapping == THREE.ReflectionMapping ) {
 
-			}
+					_vector3.copy( element.vertexNormalsWorld[ 0 ] );
+					_uv1x = ( _vector3.x * camera.matrix.n11 + _vector3.y * camera.matrix.n12 + _vector3.z * camera.matrix.n13 ) * 0.5 + 0.5;
+					_uv1y = - ( _vector3.x * camera.matrix.n21 + _vector3.y * camera.matrix.n22 + _vector3.z * camera.matrix.n23 ) * 0.5 + 0.5;
 
-			if ( material.env_map && material.env_map.loaded ) {
+					_vector3.copy( element.vertexNormalsWorld[ 1 ] );
+					_uv2x = ( _vector3.x * camera.matrix.n11 + _vector3.y * camera.matrix.n12 + _vector3.z * camera.matrix.n13 ) * 0.5 + 0.5;
+					_uv2y = - ( _vector3.x * camera.matrix.n21 + _vector3.y * camera.matrix.n22 + _vector3.z * camera.matrix.n23 ) * 0.5 + 0.5;
 
-				if ( material.env_map.mapping == THREE.ReflectionMapping ) {
+					_vector3.copy( element.vertexNormalsWorld[ 2 ] );
+					_uv3x = ( _vector3.x * camera.matrix.n11 + _vector3.y * camera.matrix.n12 + _vector3.z * camera.matrix.n13 ) * 0.5 + 0.5;
+					_uv3y = - ( _vector3.x * camera.matrix.n21 + _vector3.y * camera.matrix.n22 + _vector3.z * camera.matrix.n23 ) * 0.5 + 0.5;
 
-					texturePath( _v1x, _v1y, _v2x, _v2y, _v3x, _v3y, material.env_map.image, element.vertexNormalsWorld[ 0 ].x * 0.5 + 0.5, element.vertexNormalsWorld[ 0 ].y * 0.5 + 0.5, element.vertexNormalsWorld[ 1 ].x * 0.5 + 0.5, element.vertexNormalsWorld[ 1 ].y * 0.5 + 0.5, element.vertexNormalsWorld[ 2 ].x * 0.5 + 0.5, element.vertexNormalsWorld[ 2 ].y * 0.5 + 0.5 );
+					texturePath( _v1x, _v1y, _v2x, _v2y, _v3x, _v3y, material.env_map.image, _uv1x, _uv1y, _uv2x, _uv2y, _uv3x, _uv3y );
 
 				}/* else if ( material.env_map.mapping == THREE.RefractionMapping ) {
 
@@ -488,6 +495,10 @@ THREE.CanvasRenderer = function () {
 
 				}*/
 
+			} else {
+
+				material.wireframe ? strokePath( material.color.__styleString, material.wireframe_linewidth ) : fillPath( material.color.__styleString );
+
 			}
 
 		} else if ( material instanceof THREE.MeshLambertMaterial ) {