Skip to content

Commit e6064de

Browse files
gregtatumgregtatum
committed
Added morphs, vertex colors, and face colors
1 parent 07f077f commit e6064de

2 files changed

Lines changed: 199 additions & 77 deletions

File tree

‎docs/scenes/js/material.js‎

Lines changed: 165 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,36 @@
11
var constants = {
22

3+
combine: {
4+
"THREE.MultiplyOperation" : THREE.MultiplyOperation,
5+
"THREE.MixOperation" : THREE.MixOperation,
6+
"THREE.AddOperation" : THREE.AddOperation
7+
},
8+
39
side: {
4-
"THREE.FrontSide": THREE.FrontSide,
5-
"THREE.BackSide": THREE.BackSide,
6-
"THREE.DoubleSide": THREE.DoubleSide
10+
"THREE.FrontSide" : THREE.FrontSide,
11+
"THREE.BackSide" : THREE.BackSide,
12+
"THREE.DoubleSide" : THREE.DoubleSide
713
},
814

915
shading: {
10-
"THREE.NoShading": THREE.NoShading,
11-
"THREE.FlatShading": THREE.FlatShading,
12-
"THREE.SmoothShading": THREE.SmoothShading
16+
"THREE.NoShading" : THREE.NoShading,
17+
"THREE.FlatShading" : THREE.FlatShading,
18+
"THREE.SmoothShading" : THREE.SmoothShading
1319
},
1420

1521
colors: {
16-
"THREE.NoColors": THREE.NoColors,
17-
"THREE.FaceColors": THREE.FaceColors,
18-
"THREE.VertexColors": THREE.VertexColors
22+
"THREE.NoColors" : THREE.NoColors,
23+
"THREE.FaceColors" : THREE.FaceColors,
24+
"THREE.VertexColors" : THREE.VertexColors
1925
},
2026

2127
blendingMode: {
22-
"THREE.NoBlending": THREE.NoBlending,
23-
"THREE.NormalBlending": THREE.NormalBlending,
24-
"THREE.AdditiveBlending": THREE.AdditiveBlending,
25-
"THREE.SubtractiveBlending": THREE.SubtractiveBlending,
26-
"THREE.MultiplyBlending": THREE.MultiplyBlending,
27-
"THREE.CustomBlending": THREE.CustomBlending
28+
"THREE.NoBlending" : THREE.NoBlending,
29+
"THREE.NormalBlending" : THREE.NormalBlending,
30+
"THREE.AdditiveBlending" : THREE.AdditiveBlending,
31+
"THREE.SubtractiveBlending" : THREE.SubtractiveBlending,
32+
"THREE.MultiplyBlending" : THREE.MultiplyBlending,
33+
"THREE.CustomBlending" : THREE.CustomBlending
2834
},
2935
equations : {
3036
"THREE.AddEquation" : THREE.AddEquation,
@@ -51,6 +57,84 @@ var constants = {
5157

5258
}
5359

60+
var cubes = (function() {
61+
62+
var path = "../../examples/textures/cube/SwedishRoyalCastle/";
63+
var format = '.jpg';
64+
var urls = [
65+
path + 'px' + format, path + 'nx' + format,
66+
path + 'py' + format, path + 'ny' + format,
67+
path + 'pz' + format, path + 'nz' + format
68+
];
69+
70+
var reflectionCube = THREE.ImageUtils.loadTextureCube( urls );
71+
reflectionCube.format = THREE.RGBFormat;
72+
73+
var refractionCube = new THREE.Texture( reflectionCube.image, new THREE.CubeRefractionMapping() );
74+
reflectionCube.format = THREE.RGBFormat;
75+
76+
return {
77+
none : null,
78+
reflection : reflectionCube,
79+
refraction : refractionCube
80+
};
81+
82+
})();
83+
84+
85+
86+
function generateVertexColors( geometry ) {
87+
88+
for( var i=0, il = geometry.faces.length; i < il; i++ ) {
89+
90+
geometry.faces[i].vertexColors.push( new THREE.Color().setHSL(
91+
i / il * Math.random(),
92+
0.5,
93+
0.5
94+
) );
95+
geometry.faces[i].vertexColors.push( new THREE.Color().setHSL(
96+
i / il * Math.random(),
97+
0.5,
98+
0.5
99+
) );
100+
geometry.faces[i].vertexColors.push( new THREE.Color().setHSL(
101+
i / il * Math.random(),
102+
0.5,
103+
0.5
104+
) );
105+
106+
107+
geometry.faces[i].color = new THREE.Color().setHSL(
108+
i / il * Math.random(),
109+
0.5,
110+
0.5
111+
);
112+
}
113+
114+
}
115+
116+
function generateMorphTargets( mesh, geometry ) {
117+
118+
var vertices = [], scale;
119+
120+
for ( var i = 0; i < geometry.vertices.length; i++ ) {
121+
122+
vertices.push( geometry.vertices[ i ].clone() );
123+
124+
scale = 1 + Math.random() * 0.3;
125+
126+
vertices[ vertices.length - 1 ].x *= scale;
127+
vertices[ vertices.length - 1 ].y *= scale;
128+
vertices[ vertices.length - 1 ].z *= scale;
129+
130+
}
131+
132+
geometry.morphTargets.push( { name: "target1", vertices: vertices } );
133+
134+
geometry.update
135+
136+
}
137+
54138
function handleColorChange( color ) {
55139

56140
return function( value ){
@@ -65,17 +149,30 @@ function handleColorChange( color ) {
65149
function needsUpdate( material, geometry ) {
66150
return function() {
67151
material.shading = +material.shading; //Ensure number
152+
material.vertexColors = +material.vertexColors; //Ensure number
153+
material.side = +material.side; //Ensure number
68154
material.needsUpdate = true;
69155
geometry.verticesNeedUpdate = true;
70156
geometry.normalsNeedUpdate = true;
71-
}
157+
geometry.colorsNeedUpdate = true;
158+
};
72159
};
73160

161+
function updateMorphs( torus, material ) {
162+
163+
return function() {
164+
torus.updateMorphTargets();
165+
material.needsUpdate = true;
166+
};
167+
168+
}
169+
74170
function guiScene( gui, scene ) {
75171
var folder = gui.addFolder('Scene');
76172

77173
var data = {
78-
background : "#000000"
174+
background : "#000000",
175+
"ambient light" : ambientLight.color.getHex()
79176
}
80177

81178
var color = new THREE.Color();
@@ -89,6 +186,8 @@ function guiScene( gui, scene ) {
89186

90187
} );
91188

189+
folder.addColor( data, "ambient light" ).onChange( handleColorChange( ambientLight.color ) )
190+
92191
guiSceneFog( folder, scene );
93192

94193
}
@@ -117,7 +216,7 @@ function guiSceneFog( folder, scene ) {
117216
fogFolder.addColor( data.fog, 'scene.fog.color').onChange( handleColorChange( fog.color ) );
118217
}
119218

120-
function guiMaterial( gui, material, geometry ) {
219+
function guiMaterial( gui, mesh, material, geometry ) {
121220
var folder = gui.addFolder('THREE.Material');
122221

123222
folder.add( material, 'transparent' );
@@ -128,16 +227,16 @@ function guiMaterial( gui, material, geometry ) {
128227
// folder.add( material, 'blendEquation', constants.equations );
129228
folder.add( material, 'depthTest' );
130229
folder.add( material, 'depthWrite' );
131-
folder.add( material, 'polygonOffset' );
132-
folder.add( material, 'polygonOffsetFactor' );
133-
folder.add( material, 'polygonOffsetUnits' );
134-
folder.add( material, 'alphaTest' );
135-
folder.add( material, 'overdraw' );
230+
// folder.add( material, 'polygonOffset' );
231+
// folder.add( material, 'polygonOffsetFactor' );
232+
// folder.add( material, 'polygonOffsetUnits' );
233+
folder.add( material, 'alphaTest', 0, 1 );
234+
folder.add( material, 'overdraw', 0, 5 );
136235
folder.add( material, 'visible' );
137236
folder.add( material, 'side', constants.side ).onChange( needsUpdate( material, geometry ) );
138237
}
139238

140-
function guiMeshBasicMaterial( gui, material, geometry ) {
239+
function guiMeshBasicMaterial( gui, mesh, material, geometry ) {
141240

142241
var data = {
143242
color : material.color.getHex()
@@ -148,43 +247,45 @@ function guiMeshBasicMaterial( gui, material, geometry ) {
148247
folder.addColor( data, 'color' ).onChange( handleColorChange( material.color ) );
149248
folder.add( material, 'wireframe' );
150249
folder.add( material, 'wireframeLinewidth', 0, 10 );
151-
folder.add( material, 'wireframeLinecap', ["butt", "round", "square"] );
152-
folder.add( material, 'wireframeLinejoin', ["round", "bevel", "miter"] );
153250
folder.add( material, 'shading', constants.shading);
154-
folder.add( material, 'vertexColors', constants.colors);
251+
folder.add( material, 'vertexColors', constants.colors).onChange( needsUpdate( material, geometry ) );
155252
folder.add( material, 'fog' );
156253

157254
//folder.add( material, 'lightMap' );
158255
//folder.add( material, 'specularMap' );
159256
//folder.add( material, 'alphaMap' );
160257
//folder.add( material, 'envMap' );
161258
//folder.add( material, 'skinning' );
162-
//folder.add( material, 'morphTargets' );
259+
folder.add( material, 'morphTargets' ).onChange( updateMorphs( mesh, material ) );
163260
//folder.add( material, 'map' );
164261
//folder.add( material, 'combine' );
165262
//folder.add( material, 'relectivity' );
166263
//folder.add( material, 'refractionRatio' );
167264
}
168265

169-
function guiMeshDepthMaterial( gui, material, geometry ) {
266+
function guiMeshDepthMaterial( gui, mesh, material, geometry ) {
170267

171268
var folder = gui.addFolder('THREE.MeshDepthMaterial');
172269

173270
folder.add( material, 'wireframe' );
174271
folder.add( material, 'wireframeLinewidth', 0, 10 );
272+
folder.add( material, 'morphTargets' ).onChange( updateMorphs( mesh, material ) );
273+
175274
}
176275

177-
function guiMeshNormalMaterial( gui, material, geometry ) {
276+
function guiMeshNormalMaterial( gui, mesh, material, geometry ) {
178277

179278
var folder = gui.addFolder('THREE.MeshNormalMaterial');
180279

181280
folder.add( material, 'morphTargets');
182281
folder.add( material, 'shading', constants.shading).onChange( needsUpdate( material, geometry ) );
183282
folder.add( material, 'wireframe' );
184283
folder.add( material, 'wireframeLinewidth', 0, 10 );
284+
folder.add( material, 'morphTargets' ).onChange( updateMorphs( mesh, material ) );
285+
185286
}
186287

187-
function guiLineBasicMaterial( gui, material, geometry ) {
288+
function guiLineBasicMaterial( gui, mesh, material, geometry ) {
188289

189290
var data = {
190291
color : material.color.getHex()
@@ -196,12 +297,12 @@ function guiLineBasicMaterial( gui, material, geometry ) {
196297
folder.add( material, 'linewidth', 0, 10 );
197298
folder.add( material, 'linecap', ["butt", "round", "square"] );
198299
folder.add( material, 'linejoin', ["round", "bevel", "miter"] );
199-
folder.add( material, 'vertexColors', constants.colors);
300+
folder.add( material, 'vertexColors', constants.colors).onChange( needsUpdate( material, geometry ) );
200301
folder.add( material, 'fog' );
201302

202303
}
203304

204-
function guiMeshLambertMaterial( gui, material, geometry ) {
305+
function guiMeshLambertMaterial( gui, mesh, material, geometry ) {
205306

206307
var data = {
207308
color : material.color.getHex(),
@@ -218,14 +319,23 @@ function guiMeshLambertMaterial( gui, material, geometry ) {
218319
folder.add( material, 'shading', constants.shading).onChange( needsUpdate( material, geometry ) );
219320
folder.add( material, 'wireframe' );
220321
folder.add( material, 'wireframeLinewidth', 0, 10 );
221-
folder.add( material, 'wireframeLinecap', ["butt", "round", "square"] );
222-
folder.add( material, 'wireframeLinejoin', ["round", "bevel", "miter"] );
223-
folder.add( material, 'vertexColors', constants.colors);
322+
folder.add( material, 'vertexColors', constants.colors).onChange( needsUpdate( material, geometry ) );
224323
folder.add( material, 'fog' );
324+
325+
//folder.add( material, 'lightMap' );
326+
//folder.add( material, 'specularMap' );
327+
//folder.add( material, 'alphaMap' );
328+
//folder.add( material, 'envMap', cubes ).onChange( needsUpdate( material, geometry ) );;
329+
//folder.add( material, 'skinning' );
330+
folder.add( material, 'morphTargets' ).onChange( updateMorphs( mesh, material ) );
331+
//folder.add( material, 'map' );
332+
//folder.add( material, 'combine', constants.combine ).onChange( updateMorphs( mesh, material ) );
333+
//folder.add( material, 'relectivity' );
334+
//folder.add( material, 'refractionRatio' );
225335

226336
}
227337

228-
function guiMeshPhongMaterial( gui, material, geometry ) {
338+
function guiMeshPhongMaterial( gui, mesh, material, geometry ) {
229339

230340
var data = {
231341
color : material.color.getHex(),
@@ -245,14 +355,12 @@ function guiMeshPhongMaterial( gui, material, geometry ) {
245355
folder.add( material, 'shading', constants.shading).onChange( needsUpdate( material, geometry ) );
246356
folder.add( material, 'wireframe' );
247357
folder.add( material, 'wireframeLinewidth', 0, 10 );
248-
folder.add( material, 'wireframeLinecap', ["butt", "round", "square"] );
249-
folder.add( material, 'wireframeLinejoin', ["round", "bevel", "miter"] );
250358
folder.add( material, 'vertexColors', constants.colors);
251359
folder.add( material, 'fog' );
252360

253361
}
254362

255-
function chooseFromHash( gui, geometry ) {
363+
function chooseFromHash( gui, mesh, geometry ) {
256364

257365
var selectedMaterial = window.location.hash.substring(1) || "MeshBasicMaterial";
258366
var material;
@@ -261,39 +369,39 @@ function chooseFromHash( gui, geometry ) {
261369

262370
case "MeshBasicMaterial":
263371

264-
material = new THREE.MeshBasicMaterial({color: 0x00ff00});
265-
guiMaterial( gui, material, geometry );
266-
guiMeshBasicMaterial( gui, material, geometry );
372+
material = new THREE.MeshBasicMaterial({color: 0x2194CE});
373+
guiMaterial( gui, mesh, material, geometry );
374+
guiMeshBasicMaterial( gui, mesh, material, geometry );
267375

268376
return material;
269377

270378
break;
271379

272380
case "MeshLambertMaterial":
273381

274-
material = new THREE.MeshLambertMaterial({color: 0x00ff00});
275-
guiMaterial( gui, material, geometry );
276-
guiMeshLambertMaterial( gui, material, geometry );
382+
material = new THREE.MeshLambertMaterial({color: 0x2194CE});
383+
guiMaterial( gui, mesh, material, geometry );
384+
guiMeshLambertMaterial( gui, mesh, material, geometry );
277385

278386
return material;
279387

280388
break;
281389

282390
case "MeshPhongMaterial":
283391

284-
material = new THREE.MeshPhongMaterial({color: 0x00ff00});
285-
guiMaterial( gui, material, geometry );
286-
guiMeshPhongMaterial( gui, material, geometry );
392+
material = new THREE.MeshPhongMaterial({color: 0x2194CE});
393+
guiMaterial( gui, mesh, material, geometry );
394+
guiMeshPhongMaterial( gui, mesh, material, geometry );
287395

288396
return material;
289397

290398
break;
291399

292400
case "MeshDepthMaterial":
293401

294-
material = new THREE.MeshDepthMaterial({color: 0x00ff00});
295-
guiMaterial( gui, material, geometry );
296-
guiMeshDepthMaterial( gui, material, geometry );
402+
material = new THREE.MeshDepthMaterial({color: 0x2194CE});
403+
guiMaterial( gui, mesh, material, geometry );
404+
guiMeshDepthMaterial( gui, mesh, material, geometry );
297405

298406
return material;
299407

@@ -302,18 +410,18 @@ function chooseFromHash( gui, geometry ) {
302410
case "MeshNormalMaterial":
303411

304412
material = new THREE.MeshNormalMaterial();
305-
guiMaterial( gui, material, geometry );
306-
guiMeshNormalMaterial( gui, material, geometry );
413+
guiMaterial( gui, mesh, material, geometry );
414+
guiMeshNormalMaterial( gui, mesh, material, geometry );
307415

308416
return material;
309417

310418
break;
311419

312420
case "LineBasicMaterial":
313421

314-
material = new THREE.LineBasicMaterial({color: 0x00ff00});
315-
guiMaterial( gui, material, geometry );
316-
guiLineBasicMaterial( gui, material, geometry );
422+
material = new THREE.LineBasicMaterial({color: 0x2194CE});
423+
guiMaterial( gui, mesh, material, geometry );
424+
guiLineBasicMaterial( gui, mesh, material, geometry );
317425

318426
return material;
319427

0 commit comments

Comments
 (0)