Skip to content

Commit fb6f745

Browse files
mrdoobmrdoob
authored
Merge pull request #15497 from Mugen87/dev11
Docs: Move material browser to BufferGeometry
2 parents 3951190 + 40611c3 commit fb6f745

File tree

2 files changed

+20
-76
lines changed

2 files changed

+20
-76
lines changed

‎docs/scenes/js/material.js‎

Lines changed: 17 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,6 @@ var constants = {
2323
colors: {
2424

2525
'THREE.NoColors': THREE.NoColors,
26-
'THREE.FaceColors': THREE.FaceColors,
2726
'THREE.VertexColors': THREE.VertexColors
2827

2928
},
@@ -128,51 +127,19 @@ var textureMapKeys = getObjectsKeys( textureMaps );
128127

129128
function generateVertexColors( geometry ) {
130129

131-
for ( var i = 0, il = geometry.faces.length; i < il; i ++ ) {
132-
133-
geometry.faces[ i ].vertexColors.push( new THREE.Color().setHSL(
134-
i / il * Math.random(),
135-
0.5,
136-
0.5
137-
) );
138-
geometry.faces[ i ].vertexColors.push( new THREE.Color().setHSL(
139-
i / il * Math.random(),
140-
0.5,
141-
0.5
142-
) );
143-
geometry.faces[ i ].vertexColors.push( new THREE.Color().setHSL(
144-
i / il * Math.random(),
145-
0.5,
146-
0.5
147-
) );
148-
149-
geometry.faces[ i ].color = new THREE.Color().setHSL(
150-
i / il * Math.random(),
151-
0.5,
152-
0.5
153-
);
130+
var positionAttribute = geometry.attributes.position;
154131

155-
}
156-
157-
}
158-
159-
function generateMorphTargets( mesh, geometry ) {
160-
161-
var vertices = [], scale;
162-
163-
for ( var i = 0; i < geometry.vertices.length; i ++ ) {
164-
165-
vertices.push( geometry.vertices[ i ].clone() );
132+
var colors = [];
133+
var color = new THREE.Color();
166134

167-
scale = 1 + Math.random() * 0.3;
135+
for ( var i = 0, il = positionAttribute.count; i < il; i ++ ) {
168136

169-
vertices[ vertices.length - 1 ].x *= scale;
170-
vertices[ vertices.length - 1 ].y *= scale;
171-
vertices[ vertices.length - 1 ].z *= scale;
137+
color.setHSL( i / il * Math.random(), 0.5, 0.5 );
138+
colors.push( color.r, color.g, color.b );
172139

173140
}
174141

175-
geometry.morphTargets.push( { name: 'target1', vertices: vertices } );
142+
geometry.addAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ) );
176143

177144
}
178145

@@ -196,23 +163,12 @@ function needsUpdate( material, geometry ) {
196163

197164
return function () {
198165

199-
material.vertexColors = + material.vertexColors; //Ensure number
200-
material.side = + material.side; //Ensure number
201-
material.needsUpdate = true;
202-
geometry.verticesNeedUpdate = true;
203-
geometry.normalsNeedUpdate = true;
204-
geometry.colorsNeedUpdate = true;
205-
206-
};
207-
208-
}
209-
210-
function updateMorphs( torus, material ) {
211-
212-
return function () {
213-
214-
torus.updateMorphTargets();
166+
material.vertexColors = parseInt( material.vertexColors ); //Ensure number
167+
material.side = parseInt( material.side ); //Ensure number
215168
material.needsUpdate = true;
169+
geometry.attributes.position.needsUpdate = true;
170+
geometry.attributes.normal.needsUpdate = true;
171+
geometry.attributes.color.needsUpdate = true;
216172

217173
};
218174

@@ -329,8 +285,7 @@ function guiMeshBasicMaterial( gui, mesh, material, geometry ) {
329285
folder.add( data, 'map', textureMapKeys ).onChange( updateTexture( material, 'map', textureMaps ) );
330286
folder.add( data, 'specularMap', textureMapKeys ).onChange( updateTexture( material, 'specularMap', textureMaps ) );
331287
folder.add( data, 'alphaMap', textureMapKeys ).onChange( updateTexture( material, 'alphaMap', textureMaps ) );
332-
folder.add( material, 'morphTargets' ).onChange( updateMorphs( mesh, material ) );
333-
folder.add( material, 'combine', constants.combine ).onChange( updateMorphs( mesh, material ) );
288+
folder.add( material, 'combine', constants.combine );
334289
folder.add( material, 'reflectivity', 0, 1 );
335290
folder.add( material, 'refractionRatio', 0, 1 );
336291

@@ -342,7 +297,6 @@ function guiMeshDepthMaterial( gui, mesh, material, geometry ) {
342297

343298
folder.add( material, 'wireframe' );
344299
folder.add( material, 'wireframeLinewidth', 0, 10 );
345-
folder.add( material, 'morphTargets' ).onChange( updateMorphs( mesh, material ) );
346300

347301
}
348302

@@ -353,7 +307,6 @@ function guiMeshNormalMaterial( gui, mesh, material, geometry ) {
353307
folder.add( material, 'flatShading' ).onChange( needsUpdate( material, geometry ) );
354308
folder.add( material, 'wireframe' );
355309
folder.add( material, 'wireframeLinewidth', 0, 10 );
356-
folder.add( material, 'morphTargets' ).onChange( updateMorphs( mesh, material ) );
357310

358311
}
359312

@@ -399,11 +352,9 @@ function guiMeshLambertMaterial( gui, mesh, material, geometry ) {
399352
folder.add( data, 'map', textureMapKeys ).onChange( updateTexture( material, 'map', textureMaps ) );
400353
folder.add( data, 'specularMap', textureMapKeys ).onChange( updateTexture( material, 'specularMap', textureMaps ) );
401354
folder.add( data, 'alphaMap', textureMapKeys ).onChange( updateTexture( material, 'alphaMap', textureMaps ) );
402-
folder.add( material, 'morphTargets' ).onChange( updateMorphs( mesh, material ) );
403-
folder.add( material, 'combine', constants.combine ).onChange( updateMorphs( mesh, material ) );
355+
folder.add( material, 'combine', constants.combine );
404356
folder.add( material, 'reflectivity', 0, 1 );
405357
folder.add( material, 'refractionRatio', 0, 1 );
406-
//folder.add( material, 'skinning' );
407358

408359
}
409360

@@ -430,7 +381,7 @@ function guiMeshPhongMaterial( gui, mesh, material, geometry ) {
430381
folder.add( material, 'flatShading' ).onChange( needsUpdate( material, geometry ) );
431382
folder.add( material, 'wireframe' );
432383
folder.add( material, 'wireframeLinewidth', 0, 10 );
433-
folder.add( material, 'vertexColors', constants.colors );
384+
folder.add( material, 'vertexColors', constants.colors ).onChange( needsUpdate( material, geometry ) );
434385
folder.add( material, 'fog' );
435386
folder.add( data, 'envMaps', envMapKeys ).onChange( updateTexture( material, 'envMap', envMaps ) );
436387
folder.add( data, 'map', textureMapKeys ).onChange( updateTexture( material, 'map', textureMaps ) );
@@ -462,7 +413,7 @@ function guiMeshStandardMaterial( gui, mesh, material, geometry ) {
462413
folder.add( material, 'flatShading' ).onChange( needsUpdate( material, geometry ) );
463414
folder.add( material, 'wireframe' );
464415
folder.add( material, 'wireframeLinewidth', 0, 10 );
465-
folder.add( material, 'vertexColors', constants.colors );
416+
folder.add( material, 'vertexColors', constants.colors ).onChange( needsUpdate( material, geometry ) );
466417
folder.add( material, 'fog' );
467418
folder.add( data, 'envMaps', envMapKeys ).onChange( updateTexture( material, 'envMap', envMaps ) );
468419
folder.add( data, 'map', textureMapKeys ).onChange( updateTexture( material, 'map', textureMaps ) );
@@ -498,7 +449,7 @@ function guiMeshPhysicalMaterial( gui, mesh, material, geometry ) {
498449
folder.add( material, 'flatShading' ).onChange( needsUpdate( material, geometry ) );
499450
folder.add( material, 'wireframe' );
500451
folder.add( material, 'wireframeLinewidth', 0, 10 );
501-
folder.add( material, 'vertexColors', constants.colors );
452+
folder.add( material, 'vertexColors', constants.colors ).onChange( needsUpdate( material, geometry ) );
502453
folder.add( material, 'fog' );
503454
folder.add( data, 'envMaps', envMapKeys ).onChange( updateTexture( material, 'envMap', envMaps ) );
504455
folder.add( data, 'map', textureMapKeys ).onChange( updateTexture( material, 'map', textureMaps ) );

‎docs/scenes/material-browser.html‎

Lines changed: 3 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -71,15 +71,14 @@
7171

7272
guiScene( gui, scene, camera );
7373

74-
var geometry = new THREE.TorusKnotGeometry( 10, 3, 100, 16 );
75-
var mesh = new THREE.Mesh( geometry );
74+
var geometry = new THREE.TorusKnotBufferGeometry( 10, 3, 100, 16 );
75+
geometry = geometry.toNonIndexed();
7676

7777
generateVertexColors( geometry );
7878

79+
var mesh = new THREE.Mesh( geometry );
7980
mesh.material = chooseFromHash( gui, mesh, geometry );
8081

81-
generateMorphTargets( mesh, geometry );
82-
8382
scene.add( mesh );
8483

8584
var prevFog = false;
@@ -100,12 +99,6 @@
10099

101100
}
102101

103-
if ( mesh.morphTargetInfluences ) {
104-
105-
mesh.morphTargetInfluences[ 0 ] = ( 1 + Math.sin( 4 * time ) ) / 2;
106-
107-
}
108-
109102
renderer.render( scene, camera );
110103

111104
};

0 commit comments

Comments
 (0)