Skip to content

Commit d75e7ae

Browse files
mrdoobmrdoob
committed
Added material.vertexColors = THREE.FaceColor support to CanvasRenderer and SVGRenderer.
1 parent 72b8b8d commit d75e7ae

10 files changed

+1233
-1111
lines changed

‎build/three.min.js

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

‎examples/canvas_geometry_cube.html

+12-6
Original file line numberDiff line numberDiff line change
@@ -60,22 +60,28 @@
6060

6161
// Cube
6262

63-
var materials = [];
63+
var geometry = new THREE.CubeGeometry( 200, 200, 200 );
6464

65-
for ( var i = 0; i < 6; i ++ ) {
65+
for ( var i = 0; i < geometry.faces.length; i ++ ) {
6666

67-
materials.push( new THREE.MeshBasicMaterial( { color: Math.random() * 0xffffff } ) );
67+
geometry.faces[ i ].color.setHex( Math.random() * 0xffffff );
6868

6969
}
7070

71-
cube = new THREE.Mesh( new THREE.CubeGeometry( 200, 200, 200, 1, 1, 1, materials ), new THREE.MeshFaceMaterial() );
71+
var material = new THREE.MeshBasicMaterial( { vertexColors: THREE.FaceColors } );
72+
73+
cube = new THREE.Mesh( geometry, material );
7274
cube.position.y = 150;
7375
scene.add( cube );
7476

7577
// Plane
7678

77-
plane = new THREE.Mesh( new THREE.PlaneGeometry( 200, 200 ), new THREE.MeshBasicMaterial( { color: 0xe0e0e0 } ) );
78-
plane.geometry.applyMatrix( new THREE.Matrix4().makeRotationX( - Math.PI / 2 ) );
79+
var geometry = new THREE.PlaneGeometry( 200, 200 );
80+
geometry.applyMatrix( new THREE.Matrix4().makeRotationX( - Math.PI / 2 ) );
81+
82+
var material = new THREE.MeshBasicMaterial( { color: 0xe0e0e0 } );
83+
84+
plane = new THREE.Mesh( geometry, material );
7985
scene.add( plane );
8086

8187
renderer = new THREE.CanvasRenderer();

‎examples/canvas_interactive_voxelpainter.html

+28-7
Original file line numberDiff line numberDiff line change
@@ -24,10 +24,10 @@
2424
var container, stats;
2525
var camera, scene, renderer;
2626
var projector, plane;
27-
var mouse2D, mouse3D, ray,
28-
isShiftDown = false,
29-
theta = 45, isCtrlDown = false,
27+
var mouse2D, mouse3D, ray, theta = 45,
28+
isShiftDown = false, isCtrlDown = false,
3029
target = new THREE.Vector3( 0, 200, 0 );
30+
var ROLLOVERED;
3131

3232
init();
3333
animate();
@@ -140,15 +140,26 @@
140140
mouse2D.x = ( event.clientX / window.innerWidth ) * 2 - 1;
141141
mouse2D.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
142142

143+
mouse3D = projector.unprojectVector( mouse2D.clone(), camera );
144+
ray.direction = mouse3D.subSelf( camera.position ).normalize();
145+
146+
var intersects = ray.intersectObjects( scene.children );
147+
148+
if ( intersects.length > 0 ) {
149+
150+
if ( ROLLOVERED ) ROLLOVERED.color.setHex( 0x00ff80 );
151+
152+
ROLLOVERED = intersects[ 0 ].face;
153+
ROLLOVERED.color.setHex( 0xff8000 )
154+
155+
}
156+
143157
}
144158

145159
function onDocumentMouseDown( event ) {
146160

147161
event.preventDefault();
148162

149-
mouse3D = projector.unprojectVector( mouse2D.clone(), camera );
150-
ray.direction = mouse3D.subSelf( camera.position ).normalize();
151-
152163
var intersects = ray.intersectObjects( scene.children );
153164

154165
if ( intersects.length > 0 ) {
@@ -165,7 +176,17 @@
165176

166177
var position = new THREE.Vector3().add( intersects[ 0 ].point, intersects[ 0 ].object.matrixRotationWorld.multiplyVector3( intersects[ 0 ].face.normal.clone() ) );
167178

168-
var voxel = new THREE.Mesh( new THREE.CubeGeometry( 50, 50, 50 ), new THREE.MeshLambertMaterial( { color: 0x00ff80, opacity: 1 } ) );
179+
var geometry = new THREE.CubeGeometry( 50, 50, 50 );
180+
181+
for ( var i = 0; i < geometry.faces.length; i ++ ) {
182+
183+
geometry.faces[ i ].color.setHex( 0x00ff80 );
184+
185+
}
186+
187+
var material = new THREE.MeshLambertMaterial( { vertexColors: THREE.FaceColors } );
188+
189+
var voxel = new THREE.Mesh( geometry, material );
169190
voxel.position.x = Math.floor( position.x / 50 ) * 50 + 25;
170191
voxel.position.y = Math.floor( position.y / 50 ) * 50 + 25;
171192
voxel.position.z = Math.floor( position.z / 50 ) * 50 + 25;

‎examples/js/renderers/SVGRenderer.js

+48-14
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,8 @@ THREE.SVGRenderer = function () {
1919

2020
_enableLighting = false,
2121
_color = new THREE.Color(),
22+
_diffuseColor = new THREE.Color(),
23+
_emissiveColor = new THREE.Color(),
2224
_ambientLight = new THREE.Color(),
2325
_directionalLights = new THREE.Color(),
2426
_pointLights = new THREE.Color(),
@@ -346,26 +348,42 @@ THREE.SVGRenderer = function () {
346348

347349
_color.copy( material.color );
348350

351+
if ( material.vertexColors === THREE.FaceColors ) {
352+
353+
_color.r *= element.color.r;
354+
_color.g *= element.color.g;
355+
_color.b *= element.color.b;
356+
357+
}
358+
349359
} else if ( material instanceof THREE.MeshLambertMaterial ) {
350360

351-
if ( _enableLighting ) {
361+
_diffuseColor.copy( material.color );
362+
_emissiveColor.copy( material.emissive );
352363

353-
var diffuse = material.color;
354-
var emissive = material.emissive;
364+
if ( material.vertexColors === THREE.FaceColors ) {
365+
366+
_diffuseColor.r *= element.color.r;
367+
_diffuseColor.g *= element.color.g;
368+
_diffuseColor.b *= element.color.b;
369+
370+
}
371+
372+
if ( _enableLighting ) {
355373

356374
_color.r = _ambientLight.r;
357375
_color.g = _ambientLight.g;
358376
_color.b = _ambientLight.b;
359377

360378
calculateLight( _lights, element.centroidWorld, element.normalWorld, _color );
361379

362-
_color.r = diffuse.r * _color.r + emissive.r;
363-
_color.g = diffuse.g * _color.g + emissive.g;
364-
_color.b = diffuse.b * _color.b + emissive.b;
380+
_color.r = _color.r * _diffuseColor.r + _emissiveColor.r;
381+
_color.g = _color.g * _diffuseColor.g + _emissiveColor.g;
382+
_color.b = _color.b * _diffuseColor.b + _emissiveColor.b;
365383

366384
} else {
367385

368-
_color.copy( material.color );
386+
_color.copy( _diffuseColor );
369387

370388
}
371389

@@ -406,26 +424,42 @@ THREE.SVGRenderer = function () {
406424

407425
_color.copy( material.color );
408426

427+
if ( material.vertexColors === THREE.FaceColors ) {
428+
429+
_color.r *= element.color.r;
430+
_color.g *= element.color.g;
431+
_color.b *= element.color.b;
432+
433+
}
434+
409435
} else if ( material instanceof THREE.MeshLambertMaterial ) {
410436

411-
if ( _enableLighting ) {
437+
_diffuseColor.copy( material.color );
438+
_emissiveColor.copy( material.emissive );
412439

413-
var diffuse = material.color;
414-
var emissive = material.emissive;
440+
if ( material.vertexColors === THREE.FaceColors ) {
441+
442+
_diffuseColor.r *= element.color.r;
443+
_diffuseColor.g *= element.color.g;
444+
_diffuseColor.b *= element.color.b;
445+
446+
}
447+
448+
if ( _enableLighting ) {
415449

416450
_color.r = _ambientLight.r;
417451
_color.g = _ambientLight.g;
418452
_color.b = _ambientLight.b;
419453

420454
calculateLight( _lights, element.centroidWorld, element.normalWorld, _color );
421455

422-
_color.r = diffuse.r * _color.r + emissive.r;
423-
_color.g = diffuse.g * _color.g + emissive.g;
424-
_color.b = diffuse.b * _color.b + emissive.b;
456+
_color.r = _color.r * _diffuseColor.r + _emissiveColor.r;
457+
_color.g = _color.g * _diffuseColor.g + _emissiveColor.g;
458+
_color.b = _color.b * _diffuseColor.b + _emissiveColor.b;
425459

426460
} else {
427461

428-
_color.copy( material.color );
462+
_color.copy( _diffuseColor );
429463

430464
}
431465

‎examples/misc_ubiquity_test.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@
5555

5656
// QRCODE
5757

58-
qrcode = mesh = new THREE.Mesh( new Qrcode(), new THREE.MeshFaceMaterial() );
58+
qrcode = mesh = new THREE.Mesh( new Qrcode(), new THREE.MeshLambertMaterial( { /*emissive: 0xff0000,*/ vertexColors: THREE.FaceColors } ) );
5959
mesh.scale.x = mesh.scale.y = mesh.scale.z = 2;
6060
scene.add( mesh );
6161

0 commit comments

Comments
 (0)