Skip to content

Commit a9af948

Browse files
alteredqalteredq
committed
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.
1 parent be527d9 commit a9af948

File tree

11 files changed

+805
-515
lines changed

11 files changed

+805
-515
lines changed

‎build/Three.js

+139-139
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎build/ThreeDebug.js

+140-140
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎build/ThreeExtras.js

+172-171
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎examples/io_blender_colors.html

+130
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,130 @@
1+
<!DOCTYPE HTML>
2+
<html lang="en">
3+
<head>
4+
<title>three.js - io - blender - vertex colors - webgl</title>
5+
<meta charset="utf-8">
6+
<style type="text/css">
7+
body {
8+
color: #eee;
9+
font-family:Monospace;
10+
font-size:13px;
11+
text-align:center;
12+
13+
background-color: #000;
14+
margin: 0px;
15+
overflow: hidden;
16+
}
17+
18+
#info {
19+
position: absolute;
20+
top: 0px; width: 100%;
21+
padding: 5px;
22+
}
23+
24+
a {
25+
26+
color: #0080ff;
27+
}
28+
29+
</style>
30+
</head>
31+
<body>
32+
33+
<div id="container"></div>
34+
<div id="info"><a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - vertex colors - blender export - webgl</div>
35+
36+
<script type="text/javascript" src="../build/ThreeExtras.js"></script>
37+
<script type="text/javascript" src="js/Stats.js"></script>
38+
39+
<script type="text/javascript">
40+
41+
if ( ! THREE.Detector.webgl ) THREE.Detector.addGetWebGLMessage();
42+
43+
var container, stats;
44+
45+
var camera, scene, renderer;
46+
47+
var mesh, mesh2, mesh3, light;
48+
49+
var mouseX = 0, mouseY = 0;
50+
51+
var windowHalfX = window.innerWidth / 2;
52+
var windowHalfY = window.innerHeight / 2;
53+
54+
55+
init();
56+
setInterval( loop, 1000 / 60 );
57+
58+
59+
function init() {
60+
61+
container = document.getElementById( 'container' );
62+
63+
camera = new THREE.Camera( 40, window.innerWidth / window.innerHeight, 1, 10000 );
64+
camera.position.z = 1800;
65+
66+
scene = new THREE.Scene();
67+
68+
//scene.addLight( new THREE.AmbientLight( 0x333333 ) );
69+
70+
light = new THREE.DirectionalLight( 0xffffff );
71+
light.position.set( 0, 0, 1 );
72+
light.position.normalize();
73+
scene.addLight( light );
74+
75+
var loader = new THREE.Loader();
76+
loader.loadAscii( { model: "obj/cubecolors/cubecolors.js", callback: createScene } );
77+
78+
renderer = new THREE.WebGLRenderer();
79+
renderer.setSize( window.innerWidth, window.innerHeight );
80+
81+
container.appendChild( renderer.domElement );
82+
83+
stats = new Stats();
84+
stats.domElement.style.position = 'absolute';
85+
stats.domElement.style.top = '0px';
86+
container.appendChild( stats.domElement );
87+
88+
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
89+
90+
}
91+
92+
function createScene( geometry ) {
93+
94+
geometry.materials[0][0].shading = THREE.FlatShading;
95+
96+
var material = [ new THREE.MeshFaceMaterial(),
97+
new THREE.MeshLambertMaterial( { color: 0xffffff, opacity:0.9, shading:THREE.FlatShading, wireframe: true, wireframe_linewidth: 2 } )
98+
];
99+
mesh = SceneUtils.addMesh( scene, geometry, 250, 0, 0, 0, 0, 0, 0, material );
100+
101+
}
102+
103+
function onDocumentMouseMove( event ) {
104+
105+
mouseX = ( event.clientX - windowHalfX );
106+
mouseY = ( event.clientY - windowHalfY );
107+
108+
}
109+
110+
function loop() {
111+
112+
camera.position.x += ( mouseX - camera.position.x ) * 0.05;
113+
camera.position.y += ( - mouseY - camera.position.y ) * 0.05;
114+
115+
if ( mesh ) {
116+
117+
mesh.rotation.x += 0.01;
118+
mesh.rotation.y += 0.01;
119+
120+
}
121+
122+
renderer.render( scene, camera );
123+
stats.update();
124+
125+
}
126+
127+
</script>
128+
129+
</body>
130+
</html>

‎examples/obj/cubecolors/.htaccess

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<Files *.js>
2+
SetOutputFilter DEFLATE
3+
</Files>
4+
5+
<Files *.bin>
6+
SetOutputFilter DEFLATE
7+
</Files>

‎examples/obj/cubecolors/cubecolors.blend

543 KB
Binary file not shown.

‎examples/obj/cubecolors/cubecolors.js

+48
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/extras/io/Loader.js

+48-16
Original file line numberDiff line numberDiff line change
@@ -766,7 +766,7 @@ THREE.Loader.prototype = {
766766

767767
function init_vertices() {
768768

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

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

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

779779
}
780+
781+
if ( data.colors ) {
782+
783+
for( i = 0, l = data.colors.length; i < l; i += 3 ) {
784+
785+
r = data.colors[ i ];
786+
g = data.colors[ i + 1 ];
787+
b = data.colors[ i + 2 ];
788+
789+
THREE.Loader.prototype.vc( scope, r, g, b );
790+
791+
}
792+
793+
}
780794

781795
}
782796

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

10051019
},
10061020

1021+
vc: function( scope, r, g, b ) {
1022+
1023+
var color = new THREE.Color( 0xffffff );
1024+
color.setRGB( r, g, b );
1025+
scope.colors.push( color );
1026+
1027+
},
1028+
10071029
f3: function( scope, a, b, c, mi ) {
10081030

10091031
var material = scope.materials[ mi ];
@@ -1147,39 +1169,49 @@ THREE.Loader.prototype = {
11471169

11481170
}
11491171

1150-
var material, texture, color;
1172+
var material, mtype, mpars, texture, color;
11511173

1174+
// defaults
1175+
1176+
mtype = "MeshLambertMaterial";
1177+
mpars = { color: 0xeeeeee, opacity: 1.0, map: null, light_map: null, vertex_colors: m.vertex_colors };
1178+
1179+
// parameters from model file
1180+
1181+
if ( m.shading ) {
1182+
1183+
if ( m.shading == "Phong" ) mtype = "MeshPhongMaterial";
1184+
1185+
}
1186+
11521187
if ( m.map_diffuse && texture_path ) {
11531188

11541189
texture = document.createElement( 'canvas' );
1155-
material = new THREE.MeshLambertMaterial( { map: new THREE.Texture( texture ) } );
1156-
1157-
load_image( material.map, texture_path + "/" + m.map_diffuse );
1158-
1190+
mpars.map = new THREE.Texture( texture );
1191+
load_image( mpars.map, texture_path + "/" + m.map_diffuse );
11591192

11601193
} else if ( m.col_diffuse ) {
11611194

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

11651199
} else if ( m.a_dbg_color ) {
11661200

1167-
material = new THREE.MeshLambertMaterial( { color: m.a_dbg_color } );
1168-
1169-
} else {
1170-
1171-
material = new THREE.MeshLambertMaterial( { color: 0xeeeeee } );
1201+
mpars.color = m.a_dbg_color;
11721202

11731203
}
1174-
1204+
11751205
if ( m.map_lightmap && texture_path ) {
11761206

11771207
texture = document.createElement( 'canvas' );
1178-
material.light_map = new THREE.Texture( texture );
1208+
mpars.light_map = new THREE.Texture( texture );
11791209

1180-
load_image( material.light_map, texture_path + "/" + m.map_lightmap );
1210+
load_image( mpars.light_map, texture_path + "/" + m.map_lightmap );
11811211

11821212
}
1213+
1214+
material = new THREE[ mtype ]( mpars );
11831215

11841216
return material;
11851217

‎src/renderers/WebGLRenderer.js

+17-15
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,8 @@ THREE.WebGLRenderer = function ( parameters ) {
2626

2727
// gl state cache
2828

29-
_cullEnabled,
29+
_oldDoubleSided = null,
30+
_oldFlipSided = null,
3031
_oldBlending = null,
3132

3233
// camera matrices caches
@@ -531,7 +532,7 @@ THREE.WebGLRenderer = function ( parameters ) {
531532
c1 = obj_colors[ face.a ];
532533
c2 = obj_colors[ face.b ];
533534
c3 = obj_colors[ face.c ];
534-
c3 = obj_colors[ face.d ];
535+
c4 = obj_colors[ face.d ];
535536

536537
colorArray[ offset_color ] = c1.r;
537538
colorArray[ offset_color + 1 ] = c1.g;
@@ -1364,34 +1365,35 @@ THREE.WebGLRenderer = function ( parameters ) {
13641365

13651366
function setObjectFaces( object ) {
13661367

1367-
if( object.doubleSided ) {
1368-
1369-
if ( _cullEnabled ) {
1368+
if ( _oldDoubleSided != object.doubleSided ) {
13701369

1371-
_gl.disable( _gl.CULL_FACE );
1372-
_cullEnabled = false;
1370+
if( object.doubleSided ) {
13731371

1374-
}
1372+
_gl.disable( _gl.CULL_FACE );
13751373

1376-
} else {
1374+
} else {
13771375

1378-
if ( ! _cullEnabled ) {
1379-
13801376
_gl.enable( _gl.CULL_FACE );
1381-
_cullEnabled = true;
13821377

13831378
}
1384-
1379+
1380+
_oldDoubleSided = object.doubleSided;
1381+
1382+
}
1383+
1384+
if ( _oldFlipSided != object.flipSided ) {
1385+
13851386
if( object.flipSided ) {
13861387

13871388
_gl.frontFace( _gl.CW );
13881389

1389-
}
1390-
else {
1390+
} else {
13911391

13921392
_gl.frontFace( _gl.CCW );
13931393

13941394
}
1395+
1396+
_oldFlipSided = object.flipSided;
13951397

13961398
}
13971399

‎utils/exporters/blender/2.55/scripts/op/io_mesh_threejs/__init__.py

+3
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@ class ExportTHREEJS(bpy.types.Operator, ExportHelper):
3636

3737
use_modifiers = BoolProperty(name="Apply Modifiers", description="Apply modifiers to the exported mesh", default=True)
3838
use_normals = BoolProperty(name="Normals", description="Export normals", default=True)
39+
use_colors = BoolProperty(name="Colors", description="Export vertex colors", default=True)
3940
use_uv_coords = BoolProperty(name="UVs", description="Export texture coordinates", default=True)
4041

4142
align_types = [("None","None","None"), ("Center","Center","Center"), ("Bottom","Bottom","Bottom"), ("Top","Top","Top")]
@@ -63,6 +64,8 @@ def draw(self, context):
6364
row = layout.row()
6465
row.prop(self.properties, "use_normals")
6566
row = layout.row()
67+
row.prop(self.properties, "use_colors")
68+
row = layout.row()
6669
row.prop(self.properties, "use_uv_coords")
6770
row = layout.row()
6871
row.prop(self.properties, "align_model")

0 commit comments

Comments
 (0)