Added vertex colors to ASCII model loader and to Blender exporter (plus corresponding example).

Also fixed quads vertex color bug in WebGLRenderer and did small optimization of face state handling.

Added vertex colors to ASCII model loader and to Blender exporter (plus corresponding example).
Also fixed quads vertex color bug in WebGLRenderer and did small optimization of face state handling.
a9af9481 · alteredq · be527d9f · a9af9481 · a9af9481 · a9af9481
11 changed file
--- a/build/Three.js
+++ b/build/Three.js
--- a/build/ThreeDebug.js
+++ b/build/ThreeDebug.js
--- a/build/ThreeExtras.js
+++ b/build/ThreeExtras.js
--- a/examples/io_blender_colors.html
+++ b/examples/io_blender_colors.html
+<!DOCTYPE HTML>
+<html lang="en">
+	<head>
+		<title>three.js - io - blender - vertex colors - webgl</title>
+		<meta charset="utf-8">
+		<style type="text/css">
+			body {
+				color: #eee;
+				font-family:Monospace;
+				font-size:13px;
+				text-align:center;
+
+				background-color: #000;
+				margin: 0px;
+				overflow: hidden;
+			}
+
+			#info {
+				position: absolute;
+				top: 0px; width: 100%;
+				padding: 5px;
+			}
+
+			a {
+
+				color: #0080ff;
+			}
+
+		</style>
+	</head>
+	<body>
+
+		<div id="container"></div> 
+		<div id="info"><a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - vertex colors - blender export - webgl</div>
+
+		<script type="text/javascript" src="../build/ThreeExtras.js"></script>
+		<script type="text/javascript" src="js/Stats.js"></script>		
+		
+		<script type="text/javascript">
+
+			if ( ! THREE.Detector.webgl ) THREE.Detector.addGetWebGLMessage();
+
+			var container, stats;
+
+			var camera, scene, renderer;
+
+			var mesh, mesh2, mesh3, light;
+
+			var mouseX = 0, mouseY = 0;
+
+			var windowHalfX = window.innerWidth / 2;
+			var windowHalfY = window.innerHeight / 2;
+
+
+			init();
+			setInterval( loop, 1000 / 60 );
+
+
+			function init() {
+
+				container = document.getElementById( 'container' );
+
+				camera = new THREE.Camera( 40, window.innerWidth / window.innerHeight, 1, 10000 );
+				camera.position.z = 1800;
+
+				scene = new THREE.Scene();
+				
+				//scene.addLight( new THREE.AmbientLight( 0x333333 )  );
+				
+				light = new THREE.DirectionalLight( 0xffffff );
+				light.position.set( 0, 0, 1 );
+				light.position.normalize();
+				scene.addLight( light );
+
+				var loader = new THREE.Loader();
+				loader.loadAscii( { model: "obj/cubecolors/cubecolors.js", callback: createScene } );
+				
+				renderer = new THREE.WebGLRenderer();
+				renderer.setSize( window.innerWidth, window.innerHeight );
+
+				container.appendChild( renderer.domElement );
+
+				stats = new Stats();
+				stats.domElement.style.position = 'absolute';
+				stats.domElement.style.top = '0px';
+				container.appendChild( stats.domElement );
+
+				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
+
+			}
+
+			function createScene( geometry ) {
+			
+				geometry.materials[0][0].shading = THREE.FlatShading;
+				
+				var material = [ new THREE.MeshFaceMaterial(), 
+								 new THREE.MeshLambertMaterial( { color: 0xffffff, opacity:0.9, shading:THREE.FlatShading, wireframe: true, wireframe_linewidth: 2 } )  
+								];
+				mesh = SceneUtils.addMesh( scene, geometry, 250, 0, 0, 0, 0, 0, 0, material );
+				
+			}
+			
+			function onDocumentMouseMove( event ) {
+
+				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;
+
+				if ( mesh ) {
+				
+					mesh.rotation.x += 0.01;
+					mesh.rotation.y += 0.01;
+					
+				}
+				
+				renderer.render( scene, camera );
+				stats.update();
+
+			}
+
+		</script>
+
+	</body>
+</html>
--- a/examples/obj/cubecolors/.htaccess
+++ b/examples/obj/cubecolors/.htaccess
+<Files *.js>
+SetOutputFilter DEFLATE
+</Files>
+
+<Files *.bin>
+SetOutputFilter DEFLATE
+</Files>
--- a/examples/obj/cubecolors/cubecolors.blend
+++ b/examples/obj/cubecolors/cubecolors.blend
--- a/examples/obj/cubecolors/cubecolors.js
+++ b/examples/obj/cubecolors/cubecolors.js
--- a/src/extras/io/Loader.js
+++ b/src/extras/io/Loader.js
@@ -766,7 +766,7 @@ THREE.Loader.prototype = {

 			function init_vertices() {

-				var i, l, x, y, z;
+				var i, l, x, y, z, r, g, b;

 				for( i = 0, l = data.vertices.length; i < l; i += 3 ) {

@@ -777,6 +777,20 @@ THREE.Loader.prototype = {
 					THREE.Loader.prototype.v( scope, x, y, z );

 				}
+				
+				if ( data.colors ) {
+					
+					for( i = 0, l = data.colors.length; i < l; i += 3 ) {
+						
+						r = data.colors[ i     ];
+						g = data.colors[ i + 1 ];
+						b = data.colors[ i + 2 ];
+
+						THREE.Loader.prototype.vc( scope, r, g, b );
+					
+					}
+					
+				}

 			}

@@ -1004,6 +1018,14 @@ THREE.Loader.prototype = {

 	},

+	vc: function( scope, r, g, b ) {
+
+		var color = new THREE.Color( 0xffffff );
+		color.setRGB( r, g, b );
+		scope.colors.push( color );
+
+	},
+
 	f3: function( scope, a, b, c, mi ) {

 		var material = scope.materials[ mi ];
@@ -1147,39 +1169,49 @@ THREE.Loader.prototype = {
 			
 		}
 		
-		var material, texture, color;
+		var material, mtype, mpars, texture, color;

+		// defaults
+		
+		mtype = "MeshLambertMaterial";
+		mpars = { color: 0xeeeeee, opacity: 1.0, map: null, light_map: null, vertex_colors: m.vertex_colors };
+		
+		// parameters from model file
+		
+		if ( m.shading ) {
+			
+			if ( m.shading == "Phong" ) mtype = "MeshPhongMaterial";
+			
+		}
+		
 		if ( m.map_diffuse && texture_path ) {

 			texture = document.createElement( 'canvas' );
-			material = new THREE.MeshLambertMaterial( { map: new THREE.Texture( texture ) } );
-
-			load_image( material.map, texture_path + "/" + m.map_diffuse );			
-
+			mpars.map = new THREE.Texture( texture );
+			load_image( mpars.map, texture_path + "/" + m.map_diffuse );

 		} else if ( m.col_diffuse ) {

-			color = (m.col_diffuse[0]*255 << 16) + (m.col_diffuse[1]*255 << 8) + m.col_diffuse[2]*255;
-			material = new THREE.MeshLambertMaterial( { color: color, opacity: m.transparency } );
+			color = ( m.col_diffuse[0] * 255 << 16 ) + ( m.col_diffuse[1] * 255 << 8 ) + m.col_diffuse[2] * 255;
+			mpars.color = color;
+			mpars.opacity =  m.transparency;

 		} else if ( m.a_dbg_color ) {

-			material = new THREE.MeshLambertMaterial( { color: m.a_dbg_color } );
-
-		} else {
-
-			material = new THREE.MeshLambertMaterial( { color: 0xeeeeee } );
+			mpars.color = m.a_dbg_color;

 		}
-		
+
 		if ( m.map_lightmap && texture_path ) {

 			texture = document.createElement( 'canvas' );
-			material.light_map = new THREE.Texture( texture );
+			mpars.light_map = new THREE.Texture( texture );
 			
-			load_image( material.light_map, texture_path + "/" + m.map_lightmap );			
+			load_image( mpars.light_map, texture_path + "/" + m.map_lightmap );			

 		}
+		
+		material = new THREE[ mtype ]( mpars );

 		return material;


--- a/src/renderers/WebGLRenderer.js
+++ b/src/renderers/WebGLRenderer.js
@@ -26,7 +26,8 @@ THREE.WebGLRenderer = function ( parameters ) {

 	// gl state cache
 	
-	_cullEnabled,
+	_oldDoubleSided = null,
+	_oldFlipSided = null,
 	_oldBlending = null,
 	
 	// camera matrices caches
@@ -531,7 +532,7 @@ THREE.WebGLRenderer = function ( parameters ) {
 					c1 = obj_colors[ face.a ];
 					c2 = obj_colors[ face.b ];
 					c3 = obj_colors[ face.c ];
-					c3 = obj_colors[ face.d ];
+					c4 = obj_colors[ face.d ];

 					colorArray[ offset_color ]     = c1.r;
 					colorArray[ offset_color + 1 ] = c1.g;
@@ -1364,34 +1365,35 @@ THREE.WebGLRenderer = function ( parameters ) {
 	
 	function setObjectFaces( object ) {
 		
-		if( object.doubleSided ) {
-
-			if ( _cullEnabled ) {
+		if ( _oldDoubleSided != object.doubleSided ) {
 			
-				_gl.disable( _gl.CULL_FACE );
-				_cullEnabled = false;
+			if( object.doubleSided ) {
 				
-			}
+				_gl.disable( _gl.CULL_FACE );

-		} else {
+			} else {

-			if ( ! _cullEnabled ) {
-			
 				_gl.enable( _gl.CULL_FACE );
-				_cullEnabled = true;
 			
 			}
-
+			
+			_oldDoubleSided = object.doubleSided;
+		
+		}
+		
+		if ( _oldFlipSided != object.flipSided ) {
+		
 			if( object.flipSided ) {

 				_gl.frontFace( _gl.CW );

-			}
-			else {
+			} else {

 				_gl.frontFace( _gl.CCW );

 			}
+			
+			_oldFlipSided = object.flipSided;

 		}
 		

--- a/utils/exporters/blender/2.55/scripts/op/io_mesh_threejs/__init__.py
+++ b/utils/exporters/blender/2.55/scripts/op/io_mesh_threejs/__init__.py
--- a/utils/exporters/blender/2.55/scripts/op/io_mesh_threejs/export_threejs.py
+++ b/utils/exporters/blender/2.55/scripts/op/io_mesh_threejs/export_threejs.py