CanvasRenderer handles textures again.

Most of the examples working.

examples/camera_free.html

@@ -39,6 +39,7 @@
 		<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/Material.js"></script>
 		<script type="text/javascript" src="../src/materials/LineBasicMaterial.js"></script>
 		<script type="text/javascript" src="../src/materials/MeshBasicMaterial.js"></script>
 		<script type="text/javascript" src="../src/materials/MeshLambertMaterial.js"></script>
@@ -46,6 +47,7 @@
 		<script type="text/javascript" src="../src/materials/MeshFaceMaterial.js"></script>
 		<script type="text/javascript" src="../src/materials/ParticleBasicMaterial.js"></script>
 		<script type="text/javascript" src="../src/materials/ParticleCircleMaterial.js"></script>
+		<script type="text/javascript" src="../src/materials/Texture.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>
@@ -129,7 +131,7 @@
 				geometry = new Sphere( 100, 16, 8 );
 				material = new THREE.MeshLambertMaterial( { color: 0xffffff, opacity: 1 } );
 
-				for (var i = 0; i < 10; i ++ ) {
+				for ( var i = 0; i < 10; i ++ ) {
 
 					cube = new THREE.Mesh( geometry, material );
 					cube.overdraw = true;

examples/geometry/Qrcode.js

 var Qrcode = function () {
 
-	THREE.Geometry.call(this);
+	THREE.Geometry.call( this );
 
 	var scope = this,
-	m1 = new THREE.MeshColorFillMaterial( 0x000000 ),
-	m2 = new THREE.MeshColorFillMaterial( 0xc0c0c0 );
+	m1 = new THREE.MeshBasicMaterial( { color: 0x000000 } ),
+	m2 = new THREE.MeshBasicMaterial( { color: 0xc0c0c0 } );
 
 	v(-54,134,58);
 	v(-54,146,58);

examples/geometry_earth.html

@@ -36,13 +36,12 @@
 		<script type="text/javascript" src="js/Stats.js"></script>
 
 		<script type="text/javascript" src="../build/Three.js"></script>
+
 		<script type="text/javascript" src="../src/extras/primitives/Plane.js"></script>
 		<script type="text/javascript" src="../src/extras/primitives/Sphere.js"></script>
 
 		<script type="text/javascript">
 
-			var SCREEN_WIDTH = window.innerWidth, SCREEN_HEIGHT = window.innerHeight;
-
 			var container, stats;
 
 			var camera, scene, renderer;
@@ -64,7 +63,7 @@
 
 				container = document.getElementById( 'container' );
 
-				camera = new THREE.Camera( 60, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 10000 );
+				camera = new THREE.Camera( 60, window.innerWidth / window.innerHeight, 1, 10000 );
 				camera.position.z = 500;
 
 				scene = new THREE.Scene();
@@ -78,7 +77,7 @@
 				scene.addObject(mesh);
 
 				renderer = new THREE.CanvasRenderer();
-				renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
+				renderer.setSize( window.innerWidth, window.innerHeight );
 
 				container.appendChild( renderer.domElement );
 
@@ -87,7 +86,7 @@
 				stats.domElement.style.top = '0px';
 				container.appendChild( stats.domElement );
 
-				document.addEventListener('mousemove', onDocumentMouseMove, false);
+				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
 
 			}
 
@@ -97,13 +96,13 @@
 				canvas.width = 32;
 				canvas.height = 32;
 
-				var material =  new THREE.MeshBitmapMaterial( canvas );
+				var material =  new THREE.MeshBasicMaterial( { map: new THREE.Texture( canvas, THREE.UVMapping ) } );
 
 				var image = new Image();
 
 				image.onload = function () {
 
-					material.bitmap = this;
+					material.map.image = this;
 
 				};
 
@@ -122,12 +121,12 @@
 
 			function loop() {
 
-				camera.position.x += (mouseX - camera.position.x) * 0.05;
-				camera.position.y += (-mouseY - camera.position.y) * 0.05;
+				camera.position.x += ( mouseX - camera.position.x ) * 0.05;
+				camera.position.y += ( - mouseY - camera.position.y ) * 0.05;
 
 				mesh.rotation.y -= 0.005;
 
-				renderer.render(scene, camera);
+				renderer.render( scene, camera );
 				stats.update();
 
 			}

examples/geometry_terrain.html

@@ -41,8 +41,6 @@
 
 		<script type="text/javascript">
 
-			var SCREEN_WIDTH = window.innerWidth, SCREEN_HEIGHT = window.innerHeight;
-
 			var container, stats;
 
 			var camera, scene, renderer;
@@ -52,8 +50,8 @@
 			var mouseX = 0;
 			var mouseY = 0;
 
-			var windowHalfX = window.innerWidth >> 1;
-			var windowHalfY = window.innerHeight >> 1;
+			var windowHalfX = window.innerWidth / 2;
+			var windowHalfY = window.innerHeight / 2;
 
 
 			init();
@@ -64,14 +62,14 @@
 
 				container = document.getElementById( 'container' );
 
-				camera = new THREE.Camera( 60, SCREEN_WIDTH / SCREEN_HEIGHT, 0.0001, 10000 );
+				camera = new THREE.Camera( 60, window.innerWidth / window.innerHeight, 1, 10000 );
 				camera.position.z = 500;
 
 				scene = new THREE.Scene();
 
 				var heightMap = height( 1024, 1024 );
 				var textureMap = shadow( heightMap );
-				var material = new THREE.MeshBitmapMaterial( textureMap );
+				var material = new THREE.MeshBasicMaterial( { map: new THREE.Texture( textureMap, THREE.UVMapping ) } );
 
 				var quality = 20;
 				var quality1 = quality + 1;
@@ -79,7 +77,7 @@
 				var plane = new Plane( 2000, 2000, quality, quality );
 
 				var data = heightMap.getContext( '2d' ).getImageData( 0, 0, heightMap.width, heightMap.height ).data;
-				var pixelsPerTriangle = Math.floor(heightMap.width / quality);
+				var pixelsPerTriangle = Math.floor( heightMap.width / quality );
 
 				for ( var y = 0; y < quality1; y++ ) {
 
@@ -100,7 +98,7 @@
 				scene.addObject(mesh);
 
 				renderer = new THREE.CanvasRenderer();
-				renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
+				renderer.setSize( window.innerWidth, window.innerHeight );
 
 				container.innerHTML = "";
 
@@ -109,7 +107,7 @@
 				stats = new Stats();
 				stats.domElement.style.position = 'absolute';
 				stats.domElement.style.top = '0px';
-				container.appendChild(stats.domElement);
+				container.appendChild( stats.domElement );
 
 				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
 
@@ -117,22 +115,22 @@
 
 			function onDocumentMouseMove(event) {
 
-				mouseX = (event.clientX - windowHalfX);
-				mouseY = (event.clientY - windowHalfY);
+				mouseX = event.clientX - windowHalfX;
+				mouseY = event.clientY - windowHalfY;
 
 			}
 
 			function loop() {
 
-				camera.position.x += (mouseX - camera.position.x) * 0.05;
-				camera.position.y += (-mouseY - camera.position.y) * 0.05;
+				camera.position.x += ( mouseX - camera.position.x ) * 0.05;
+				camera.position.y += ( - mouseY - camera.position.y ) * 0.05;
 
 				renderer.render(scene, camera);
 				stats.update();
 
 			}
 
-			function height(width, height) {
+			function height( width, height ) {
 
 				var canvas, context, image, data;
 

examples/geometry_vr.html

@@ -35,8 +35,6 @@
 
 		<script type="text/javascript">
 
-			var SCREEN_WIDTH = window.innerWidth, SCREEN_HEIGHT = window.innerHeight;
-
 			var camera, scene, renderer;
 
 			var texture_placeholder, wireframe,
@@ -54,7 +52,7 @@
 
 				container = document.getElementById( 'container' );
 
-				camera = new THREE.Camera( 75, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 10000 );
+				camera = new THREE.Camera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
 
 				scene = new THREE.Scene();
 
@@ -62,7 +60,7 @@
 				texture_placeholder.width = 128;
 				texture_placeholder.height = 128;
 
-				wireframe = new THREE.MeshColorStrokeMaterial( 0xffffff, 0 );
+				wireframe = new THREE.MeshBasicMaterial( { color: 0xffffff, opacity: 0, wireframe: true } );
 
 				var context = texture_placeholder.getContext( '2d' );
 				context.fillStyle = 'rgba( 200, 200, 200, 1 )';
@@ -105,7 +103,7 @@
 
 
 				renderer = new THREE.CanvasRenderer();
-				renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
+				renderer.setSize( window.innerWidth, window.innerHeight );
 
 				container.appendChild( renderer.domElement );
 
@@ -120,13 +118,13 @@
 
 			function loadTexture( path ) {
 
-				var material = new THREE.MeshBitmapMaterial( texture_placeholder );
+				var material = new THREE.MeshBasicMaterial( { map: new THREE.Texture( texture_placeholder, THREE.UVMapping ) } );
 
 				var texture = new Image();
 
 				texture.onload = function () {
 
-					material.bitmap = this;
+					material.map.image = this;
 					render();
 
 				};
@@ -142,7 +140,7 @@
 
 				isUserInteracting = true;
 
-				wireframe.color.setRGBA( 1, 1, 1, 0.2 );
+				wireframe.opacity = 0.2;
 
 				onPointerDownPointerX = event.clientX;
 				onPointerDownPointerY = event.clientY;
@@ -168,7 +166,7 @@
 
 				isUserInteracting = false;
 
-				wireframe.color.setRGBA( 1, 1, 1, 0);
+				wireframe.opacity = 0;
 
 				render();
 			}
@@ -180,8 +178,8 @@
 
 					event.preventDefault();
 
-					onPointerDownPointerX = event.touches[0].pageX;
-					onPointerDownPointerY = event.touches[0].pageY;
+					onPointerDownPointerX = event.touches[ 0 ].pageX;
+					onPointerDownPointerY = event.touches[ 0 ].pageY;
 
 					onPointerDownLon = lon;
 					onPointerDownLat = lat;

examples/interactive_cubes.html

@@ -50,7 +50,7 @@
 
 				for ( var i = 0; i < 10; i ++ ) {
 
-					var object = new THREE.Mesh( geometry, [ new THREE.MeshBasicMaterial( { diffuse_color: Math.random() * 0xffffff, opacity: 0.5 } ), new THREE.MeshBasicMaterial( { diffuse_color: 0xffffff, opacity: 0.5, wireframe: true } ) ] );
+					var object = new THREE.Mesh( geometry, [ new THREE.MeshBasicMaterial( { color: Math.random() * 0xffffff, opacity: 0.5 } ), new THREE.MeshBasicMaterial( { color: 0xffffff, opacity: 0.5, wireframe: true } ) ] );
 					object.position.x = Math.random() * 800 - 400;
 					object.position.y = Math.random() * 800 - 400;
 					object.position.z = Math.random() * 800 - 400;
@@ -95,7 +95,7 @@
 
 					intersects[ 0 ].object.material[ 0 ].color.setHex( Math.random() * 0xffffff | 0x80000000 );
 
-					var particle = new THREE.Particle( new THREE.ParticleCircleMaterial( 0x000000 ) );
+					var particle = new THREE.Particle( new THREE.ParticleCircleMaterial( { color: 0x000000 } ) );
 					particle.position = intersects[ 0 ].point;
 					particle.scale.x = particle.scale.y = 8;
 					scene.addObject( particle );

examples/interactive_voxelpainter.html

@@ -14,7 +14,49 @@
 	</head>
 	<body>
 
-		<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/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/Ray.js"></script>
+		<script type="text/javascript" src="../src/core/Rectangle.js"></script>
+		<script type="text/javascript" src="../src/core/Matrix3.js"></script>
+		<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>
+		<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/Material.js"></script>
+		<script type="text/javascript" src="../src/materials/LineBasicMaterial.js"></script>
+		<script type="text/javascript" src="../src/materials/MeshBasicMaterial.js"></script>
+		<script type="text/javascript" src="../src/materials/MeshLambertMaterial.js"></script>
+		<script type="text/javascript" src="../src/materials/MeshPhongMaterial.js"></script>
+		<script type="text/javascript" src="../src/materials/MeshFaceMaterial.js"></script>
+		<script type="text/javascript" src="../src/materials/ParticleBasicMaterial.js"></script>
+		<script type="text/javascript" src="../src/materials/ParticleCircleMaterial.js"></script>
+		<script type="text/javascript" src="../src/materials/Texture.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>
 
 		<script type="text/javascript" src="../src/extras/primitives/Cube.js"></script>
 		<script type="text/javascript" src="../src/extras/primitives/Plane.js"></script>
@@ -58,13 +100,15 @@
 				geometry.vertices.push( new THREE.Vertex( new THREE.Vector3( - 500, 0, 0 ) ) );
 				geometry.vertices.push( new THREE.Vertex( new THREE.Vector3( 500, 0, 0 ) ) );
 
+				var material = new THREE.LineBasicMaterial( { color: 0x000000, opacity: 0.2 } );
+
 				for ( var i = 0; i <= 20; i ++ ) {
 
-					var line = new THREE.Line( geometry, new THREE.LineColorMaterial( 0x000000, 0.2 ) );
+					var line = new THREE.Line( geometry, material );
 					line.position.z = ( i * 50 ) - 500;
 					scene.addObject( line );
 
-					var line = new THREE.Line( geometry, new THREE.LineColorMaterial( 0x000000, 0.2 ) );
+					var line = new THREE.Line( geometry, material );
 					line.position.x = ( i * 50 ) - 500;
 					line.rotation.y = 90 * Math.PI / 180;
 					scene.addObject( line );
@@ -145,7 +189,7 @@
 
 						var position = new THREE.Vector3().add( intersects[ 0 ].point, intersects[ 0 ].object.matrixRotation.transform( intersects[ 0 ].face.normal.clone() ) );
 
-						var voxel = new THREE.Mesh( new Cube( 50, 50, 50 ), [ new THREE.MeshColorFillMaterial( 0x00ff80, 1 ), new THREE.MeshFaceMaterial() ] );
+						var voxel = new THREE.Mesh( new Cube( 50, 50, 50 ), [ new THREE.MeshLambertMaterial( { color: 0x00ff80, opacity: 1 } ), new THREE.MeshFaceMaterial() ] );
 						voxel.position.x = Math.floor( position.x / 50 ) * 50 + 25;
 						voxel.position.y = Math.floor( position.y / 50 ) * 50 + 25;
 						voxel.position.z = Math.floor( position.z / 50 ) * 50 + 25;
@@ -205,7 +249,7 @@
 
 						if ( rollOveredFace ) rollOveredFace.material = [];
 						rollOveredFace = intersects[ 0 ].face;
-						rollOveredFace.material = [ new THREE.MeshColorFillMaterial( 0xff0000, 0.5 ) ];
+						rollOveredFace.material = [ new THREE.MeshBasicMaterial( { color: 0xff0000, opacity: 0.5 } ) ];
 					}
 				} else if ( rollOveredFace ) {
 

examples/lines_sphere.html

@@ -60,7 +60,7 @@
 
 				// particles
 
-				material = new THREE.ParticleCircleMaterial(0xffffff, 1);
+				material = new THREE.ParticleCircleMaterial( { color: 0xffffff, opacity: 1 } );
 
 				for (var i = 0; i < 1000; i++) {
 
@@ -69,7 +69,7 @@
 					particle.position.y = Math.random() * 2 - 1;
 					particle.position.z = Math.random() * 2 - 1;
 					particle.position.normalize();
-					particle.position.multiplyScalar(Math.random() * 10 + 450);
+					particle.position.multiplyScalar( Math.random() * 10 + 450 );
 					scene.addObject( particle );
 
 				}
@@ -82,16 +82,16 @@
 
 					var vector = new THREE.Vector3( Math.random() * 2 - 1, Math.random() * 2 - 1, Math.random() * 2 - 1 );
 					vector.normalize();
-					vector.multiplyScalar(450);
+					vector.multiplyScalar( 450 );
 
-					geometry.vertices.push(new THREE.Vertex(vector));
+					geometry.vertices.push( new THREE.Vertex( vector ) );
 
 					var vector2 = vector.clone();
-					vector2.multiplyScalar(Math.random() * 0.3 + 1);
+					vector2.multiplyScalar( Math.random() * 0.3 + 1 );
 
-					geometry.vertices.push(new THREE.Vertex(vector2));
+					geometry.vertices.push( new THREE.Vertex( vector2 ) );
 
-					var line = new THREE.Line( geometry, new THREE.LineColorMaterial( 0xffffff, Math.random() ) );
+					var line = new THREE.Line( geometry, new THREE.LineBasicMaterial( { color: 0xffffff, opacity: Math.random() } ) );
 					scene.addObject(line);
 				}
 
@@ -102,9 +102,9 @@
 				container.appendChild(stats.domElement);
 				*/
 
-				document.addEventListener('mousemove', onDocumentMouseMove, false);
-				document.addEventListener('touchstart', onDocumentTouchStart, false);
-				document.addEventListener('touchmove', onDocumentTouchMove, false);
+				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
+				document.addEventListener( 'touchstart', onDocumentTouchStart, false );
+				document.addEventListener( 'touchmove', onDocumentTouchMove, false );
 			}
 
 			//
@@ -121,8 +121,8 @@
 
 					event.preventDefault();
 
-					mouseX = event.touches[0].pageX - windowHalfX;
-					mouseY = event.touches[0].pageY - windowHalfY;
+					mouseX = event.touches[ 0 ].pageX - windowHalfX;
+					mouseY = event.touches[ 0 ].pageY - windowHalfY;
 				}
 			}
 
@@ -132,8 +132,8 @@
 
 					event.preventDefault();
 
-					mouseX = event.touches[0].pageX - windowHalfX;
-					mouseY = event.touches[0].pageY - windowHalfY;
+					mouseX = event.touches[ 0 ].pageX - windowHalfX;
+					mouseY = event.touches[ 0 ].pageY - windowHalfY;
 				}
 			}
 
@@ -141,11 +141,11 @@
 
 			function loop() {
 
-				camera.position.x += (mouseX - camera.position.x) * .05;
-				camera.position.y += (-mouseY + 200 - camera.position.y) * .05;
+				camera.position.x += ( mouseX - camera.position.x ) * .05;
+				camera.position.y += ( - mouseY + 200 - camera.position.y ) * .05;
 				camera.updateMatrix();
 
-				renderer.render(scene, camera);
+				renderer.render( scene, camera );
 
 				// stats.update();
 			}

examples/lines_test.html

@@ -22,10 +22,7 @@
 
 		<script type="text/javascript">
 
-			var SCREEN_WIDTH = window.innerWidth,
-			SCREEN_HEIGHT = window.innerHeight,
-
-			mouseX = 0, mouseY = 0,
+			var mouseX = 0, mouseY = 0,
 
 			windowHalfX = window.innerWidth / 2,
 			windowHalfY = window.innerHeight / 2,
@@ -49,18 +46,18 @@
 				container = document.createElement('div');
 				document.body.appendChild(container);
 
-				camera = new THREE.Camera( 75, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 10000 );
+				camera = new THREE.Camera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
 				camera.position.z = 1000;
 
 				scene = new THREE.Scene();
 
 				renderer = new THREE.CanvasRenderer();
-				renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
-				container.appendChild(renderer.domElement);
+				renderer.setSize( window.innerWidth, window.innerHeight );
+				container.appendChild( renderer.domElement );
 
 				// particles
 
-				material = new THREE.ParticleCircleMaterial( 0xffffff, 1 );
+				material = new THREE.ParticleCircleMaterial( { color: 0xffffff, opacity: 1 } );
 				var geometry = new THREE.Geometry();
 
 				for (var i = 0; i < 100; i++) {
@@ -80,7 +77,7 @@
 
 				// lines
 
-				var line = new THREE.Line( geometry, new THREE.LineColorMaterial( 0xffffff, Math.random(), 1 ) );
+				var line = new THREE.Line( geometry, new THREE.LineBasicMaterial( { color: 0xffffff, opacity: Math.random() } ) );
 				scene.addObject(line);
 
 				/*

examples/materials_video.html

@@ -27,8 +27,6 @@
 
 		<script type="text/javascript">
 
-			var SCREEN_WIDTH = window.innerWidth;
-			var SCREEN_HEIGHT = window.innerHeight;
 			var AMOUNT = 100;
 
 			var container, stats;
@@ -43,20 +41,20 @@
 			var mouseX = 0;
 			var mouseY = 0;
 
-			var windowHalfX = window.innerWidth >> 1;
-			var windowHalfY = window.innerHeight >> 1;
+			var windowHalfX = window.innerWidth / 2;
+			var windowHalfY = window.innerHeight / 2;
 
 
-			document.addEventListener('mousemove', onDocumentMouseMove, false);
+			document.addEventListener( 'mousemove', onDocumentMouseMove, false );
 
 			init();
-			setInterval(loop, 1000/60);
+			setInterval( loop, 1000 / 60 );
 
 
 			function init() {
 
 				container = document.createElement('div');
-				document.body.appendChild(container);
+				document.body.appendChild( container );
 
 				var info = document.createElement('div');
 				info.style.position = 'absolute';
@@ -66,7 +64,7 @@
 				info.innerHTML = '<a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - video demo. playing <a href="http://durian.blender.org/" target="_blank">sintel</a> trailer';
 				container.appendChild(info);
 
-				camera = new THREE.Camera( 45, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 10000 );
+				camera = new THREE.Camera( 45, window.innerWidth / window.innerHeight, 1, 10000 );
 				camera.position.z = 1000;
 
 				scene = new THREE.Scene();
@@ -83,7 +81,7 @@
 				textureContext.fillStyle = '#000000';
 				textureContext.fillRect( 0, 0, 480, 204 );
 
-				var material = new THREE.MeshBitmapMaterial( texture );
+				var material = new THREE.MeshBasicMaterial( { map: new THREE.Texture( texture, THREE.UVMapping ) } );
 
 				textureReflection = document.createElement( 'canvas' );
 				textureReflection.width = 480;
@@ -97,7 +95,7 @@
 				textureReflectionGradient.addColorStop( 0.2, 'rgba(240, 240, 240, 1)' );
 				textureReflectionGradient.addColorStop( 1, 'rgba(240, 240, 240, 0.8)' );
 
-				var materialReflection = new THREE.MeshBitmapMaterial( textureReflection );
+				var materialReflection = new THREE.MeshBasicMaterial( { map: new THREE.Texture( textureReflection, THREE.UVMapping ) } );
 
 				//
 
@@ -114,7 +112,7 @@
 				mesh.rotation.x = 180 * Math.PI / 180;
 				mesh.doubleSided = true;
 				mesh.overdraw = true;
-				scene.addObject(mesh);
+				scene.addObject( mesh );
 
 				//
 
@@ -122,54 +120,54 @@
 				var amountx = 10;
 				var amounty = 10;
 
-				var material = new THREE.ParticleCircleMaterial(0x808080);
+				var material = new THREE.ParticleCircleMaterial( { color: 0x808080 } );
 
-				for (var ix = 0; ix < amountx; ix++) {
+				for ( var ix = 0; ix < amountx; ix++ ) {
 
-					for(var iy = 0; iy < amounty; iy++) {
+					for ( var iy = 0; iy < amounty; iy++ ) {
 
 						particle = new THREE.Particle( material );
-						particle.position.x = ix * separation - ((amountx * separation) / 2);
+						particle.position.x = ix * separation - ( ( amountx * separation ) / 2 );
 						particle.position.y = -153
-						particle.position.z = iy * separation - ((amounty * separation) / 2);
+						particle.position.z = iy * separation - ( ( amounty * separation ) / 2 );
 						scene.addObject( particle );
 					}
 				}
 
 				renderer = new THREE.CanvasRenderer();
-				renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
+				renderer.setSize( window.innerWidth, window.innerHeight );
 
-				container.appendChild(renderer.domElement);
+				container.appendChild( renderer.domElement );
 
 				stats = new Stats();
 				stats.domElement.style.position = 'absolute';
 				stats.domElement.style.top = '0px';
-				container.appendChild(stats.domElement);
+				container.appendChild( stats.domElement );
 
 			}
 
 			function onDocumentMouseMove(event) {
 
-				mouseX = (event.clientX - windowHalfX);
-				mouseY = (event.clientY - windowHalfY) * .2;
+				mouseX = ( event.clientX - windowHalfX );
+				mouseY = ( event.clientY - windowHalfY ) * 0.2;
 
 			}
 
 			function loop() {
 
-				camera.position.x += (mouseX - camera.position.x) * .05;
-				camera.position.y += (-mouseY - camera.position.y) * .05;
+				camera.position.x += ( mouseX - camera.position.x ) * 0.05;
+				camera.position.y += ( - mouseY - camera.position.y ) * 0.05;
 
-				if (video.readyState === video.HAVE_ENOUGH_DATA) {
+				if ( video.readyState === video.HAVE_ENOUGH_DATA ) {
 
 					textureContext.drawImage( video, 0, 0 );
 				}
 
 				textureReflectionContext.drawImage( texture, 0, 0 );
 				textureReflectionContext.fillStyle = textureReflectionGradient;
-				textureReflectionContext.fillRect(0, 0, 480, 204);
+				textureReflectionContext.fillRect( 0, 0, 480, 204 );
 
-				renderer.render(scene, camera);
+				renderer.render( scene, camera );
 				stats.update();
 
 			}

examples/test.html

@@ -20,6 +20,7 @@
 		<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/Ray.js"></script>
 		<script type="text/javascript" src="../src/core/Rectangle.js"></script>
 		<script type="text/javascript" src="../src/core/Matrix3.js"></script>
 		<script type="text/javascript" src="../src/core/Matrix4.js"></script>
@@ -34,17 +35,18 @@
 		<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/objects/Mesh.js"></script>
-		<script type="text/javascript" src="../src/materials/LineColorMaterial.js"></script>
+		<script type="text/javascript" src="../src/materials/Material.js"></script>
+		<script type="text/javascript" src="../src/materials/LineBasicMaterial.js"></script>
+		<script type="text/javascript" src="../src/materials/MeshBasicMaterial.js"></script>
+		<script type="text/javascript" src="../src/materials/MeshLambertMaterial.js"></script>
 		<script type="text/javascript" src="../src/materials/MeshPhongMaterial.js"></script>
-		<script type="text/javascript" src="../src/materials/MeshBitmapMaterial.js"></script>
-		<script type="text/javascript" src="../src/materials/MeshColorFillMaterial.js"></script>
-		<script type="text/javascript" src="../src/materials/MeshColorStrokeMaterial.js"></script>
 		<script type="text/javascript" src="../src/materials/MeshFaceMaterial.js"></script>
+		<script type="text/javascript" src="../src/materials/ParticleBasicMaterial.js"></script>
 		<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/materials/Texture.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>
@@ -80,11 +82,11 @@
 			var mouseX = 0;
 			var mouseY = 0;
 
-			var windowHalfX = window.innerWidth >> 1;
-			var windowHalfY = window.innerHeight >> 1;
+			var windowHalfX = window.innerWidth / 2;
+			var windowHalfY = window.innerHeight / 2;
 
 
-			document.addEventListener('mousemove', onDocumentMouseMove, false);
+			document.addEventListener( 'mousemove', onDocumentMouseMove, false );
 
 			init();
 			// loop();
@@ -114,7 +116,7 @@
 
 				var cube = new Cube(100, 100, 100);
 
-				mesh = new THREE.Mesh( cube, new THREE.MeshColorFillMaterial( 0x0000ff, 0.5 ) );
+				mesh = new THREE.Mesh( cube, new THREE.MeshBasicMaterial( { color: 0x0000ff, opacity: 0.5 } ) );
 				mesh.position.x = 500;
 				mesh.rotation.x = Math.random();
 				mesh.rotation.y = Math.random();
@@ -122,7 +124,7 @@
 				mesh.updateMatrix();
 				scene.addObject(mesh);
 
-				mesh = new THREE.Mesh( cube, new THREE.MeshColorFillMaterial( Math.random() * 0xffffff ) );
+				mesh = new THREE.Mesh( cube, new THREE.MeshBasicMaterial( { color: Math.random() * 0xffffff } ) );
 				mesh.position.x = 500;
 				mesh.position.y = 500;
 				mesh.rotation.x = Math.random();
@@ -133,7 +135,7 @@
 
 				// PLANE
 
-				mesh = new THREE.Mesh( new Plane( 100, 100 ), new THREE.MeshColorFillMaterial( Math.random() * 0xffffff ) );
+				mesh = new THREE.Mesh( new Plane( 100, 100 ), new THREE.MeshBasicMaterial( { color: Math.random() * 0xffffff } ) );
 				mesh.position.y = -500;
 				mesh.scale.x = mesh.scale.y = mesh.scale.z = 2;
 				mesh.doubleSided = true;
@@ -142,7 +144,7 @@
 
 				// CYLINDER
 
-				mesh = new THREE.Mesh( new Cylinder( 10, 20, 100, 200, - 50, - 20 ), new THREE.MeshColorFillMaterial( Math.random() * 0xffffff ) );
+				mesh = new THREE.Mesh( new Cylinder( 10, 20, 100, 200, - 50, - 20 ), new THREE.MeshBasicMaterial( { color: Math.random() * 0xffffff } ) );
 				mesh.position.x = -500;
 				mesh.scale.x = mesh.scale.y = mesh.scale.z = 2;
 				mesh.updateMatrix();
@@ -164,7 +166,7 @@
 					v1.position.addSelf( v );
 					v2.position.addSelf( v );
 
-					var face = new THREE.Face3( geometry.vertices.push( v0 ) - 1, geometry.vertices.push( v1 ) - 1, geometry.vertices.push( v2 ) - 1, null, new THREE.MeshColorFillMaterial( Math.random() * 0xffffff ) );
+					var face = new THREE.Face3( geometry.vertices.push( v0 ) - 1, geometry.vertices.push( v1 ) - 1, geometry.vertices.push( v2 ) - 1, null, new THREE.MeshBasicMaterial( { color: Math.random() * 0xffffff } ) );
 
 					geometry.faces.push( face );
 				}
@@ -172,21 +174,21 @@
 				geometry.computeNormals();
 				geometry.computeCentroids();
 
-				mesh = new THREE.Mesh( geometry, [ new THREE.MeshFaceMaterial(), new THREE.MeshColorStrokeMaterial( 0xff0000, 0.5, 10 ) ] );
+				mesh = new THREE.Mesh( geometry, [ new THREE.MeshFaceMaterial(), new THREE.MeshBasicMaterial( { color: 0xff0000, opacity: 0.5, linewidth: 10 } ) ] );
 				mesh.doubleSided = true;
 				mesh.scale.x = mesh.scale.y = mesh.scale.z = 2;
-				scene.addObject(mesh);
+				scene.addObject( mesh );
 
 				// PARTICLES
 
-				for (var i = 0; i < 100; i ++) {
+				for ( var i = 0; i < 100; i ++ ) {
 
-					particle = new THREE.Particle( new THREE.ParticleCircleMaterial( Math.random() * 0xffffff ) );
+					particle = new THREE.Particle( new THREE.ParticleCircleMaterial( { color: Math.random() * 0xffffff } ) );
 					particle.position.x = Math.random() * 1000 - 500;
 					particle.position.y = Math.random() * 1000 - 500;
 					particle.position.z = Math.random() * 1000 - 500;
 					particle.scale.x = particle.scale.y = 10;
-					scene.addObject(particle);
+					scene.addObject( particle );
 
 				}
 

src/materials/Texture.js

@@ -6,7 +6,7 @@
 THREE.Texture = function ( image, mapping ) {
 
 	this.image = image;
-	this.mapping = mapping;
+	this.mapping = mapping ? mapping : THREE.UVMapping;
 
 	this.toString = function () {
 

src/renderers/CanvasRenderer.js

@@ -107,8 +107,7 @@ THREE.CanvasRenderer = function () {
 				for ( m = 0, ml = element.material.length; m < ml; m++ ) {
 
 					material = element.material[ m ];
-
-					renderParticle( v1x, v1y, element, material, scene );
+					material && renderParticle( v1x, v1y, element, material, scene );
 
 				}
 
@@ -131,8 +130,7 @@ THREE.CanvasRenderer = function () {
 				while ( m < ml ) {
 
 					material = element.material[ m ++ ];
-
-					renderLine( v1x, v1y, v2x, v2y, element, material, scene );
+					material && renderLine( v1x, v1y, v2x, v2y, element, material, scene );
 
 				}
 
@@ -177,8 +175,7 @@ THREE.CanvasRenderer = function () {
 						while ( fm < fml ) {
 
 							material = element.faceMaterial[ fm ++ ];
-
-							renderFace3( v1x, v1y, v2x, v2y, v3x, v3y, element, material, scene );
+							material && renderFace3( v1x, v1y, v2x, v2y, v3x, v3y, element, material, scene );
 
 						}
 
@@ -246,8 +243,7 @@ THREE.CanvasRenderer = function () {
 						while ( fm < fml ) {
 
 							material = element.faceMaterial[ fm ++ ];
-
-							renderFace4( v1x, v1y, v2x, v2y, v3x, v3y, v4x, v4y, v5x, v5y, v6x, v6y, element, material, scene );
+							material && renderFace4( v1x, v1y, v2x, v2y, v3x, v3y, v4x, v4y, v5x, v5y, v6x, v6y, element, material, scene );
 
 						}
 
@@ -384,6 +380,12 @@ THREE.CanvasRenderer = function () {
 		var width, height, scaleX, scaleY, offsetX, offsetY,
 		bitmap, bitmapWidth, bitmapHeight;
 
+		if ( _contextGlobalAlpha != material.opacity ) {
+
+			_context.globalAlpha = _contextGlobalAlpha = material.opacity;
+
+		}
+
 		if ( material instanceof THREE.ParticleBasicMaterial ) {
 
 			bitmap = material.bitmap;
@@ -525,7 +527,7 @@ THREE.CanvasRenderer = function () {
 
 		if ( material.map ) {
 
-			bitmap = material.map;
+			bitmap = material.map.image;
 			bitmapWidth = bitmap.width - 1;
 			bitmapHeight = bitmap.height - 1;
 
@@ -617,7 +619,7 @@ THREE.CanvasRenderer = function () {
 
 		if ( material.map ) {
 
-			bitmap = material.map;
+			bitmap = material.map.image;
 			bitmapWidth = bitmap.width - 1;
 			bitmapHeight = bitmap.height - 1;
 

utils/build.py

@@ -108,6 +108,7 @@ def buildFull(debug):
 		'objects/Particle.js',
 		'objects/Line.js',
 		'objects/Mesh.js',
+		'materials/Material.js',
 		'materials/LineBasicMaterial.js',
 		'materials/MeshBasicMaterial.js',
 		'materials/MeshLambertMaterial.js',
@@ -116,6 +117,7 @@ def buildFull(debug):
 		'materials/ParticleBasicMaterial.js',
 		'materials/ParticleCircleMaterial.js',
 		'materials/ParticleDOMMaterial.js',
+		'materials/Texture.js',
 		'scenes/Scene.js',
 		'renderers/Projector.js',
 		'renderers/DOMRenderer.js',
@@ -158,6 +160,7 @@ def buildCanvas(debug):
 		'objects/Particle.js',
 		'objects/Line.js',
 		'objects/Mesh.js',
+		'materials/Material.js',
 		'materials/LineBasicMaterial.js',
 		'materials/MeshBasicMaterial.js',
 		'materials/MeshLambertMaterial.js',
@@ -165,6 +168,7 @@ def buildCanvas(debug):
 		'materials/MeshFaceMaterial.js',
 		'materials/ParticleBasicMaterial.js',
 		'materials/ParticleCircleMaterial.js',
+		'materials/Texture.js',
 		'scenes/Scene.js',
 		'renderers/Projector.js',
 		'renderers/CanvasRenderer.js',
@@ -204,6 +208,7 @@ def buildWebGL(debug):
 		'objects/Particle.js',
 		'objects/Line.js',
 		'objects/Mesh.js',
+		'materials/Material.js',
 		'materials/LineBasicMaterial.js',
 		'materials/MeshBasicMaterial.js',
 		'materials/MeshLambertMaterial.js',
@@ -211,6 +216,7 @@ def buildWebGL(debug):
 		'materials/MeshFaceMaterial.js',
 		'materials/ParticleBasicMaterial.js',
 		'materials/ParticleCircleMaterial.js',
+		'materials/Texture.js',
 		'scenes/Scene.js',
 		'renderers/WebGLRenderer.js',
 	]
@@ -245,6 +251,7 @@ def buildSVG(debug):
 		'objects/Particle.js',
 		'objects/Line.js',
 		'objects/Mesh.js',
+		'materials/Material.js',
 		'materials/LineBasicMaterial.js',
 		'materials/MeshBasicMaterial.js',
 		'materials/MeshLambertMaterial.js',