Skip to content

Commit 296e07f

Browse files
mrdoobmrdoob
committed
Examples: Simplified webgl_marchingcubes.
1 parent dfec73d commit 296e07f

File tree

1 file changed

+34
-152
lines changed

1 file changed

+34
-152
lines changed

‎examples/webgl_marchingcubes.html‎

Lines changed: 34 additions & 152 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@
3939
let effectController;
4040

4141
let time = 0;
42+
4243
const clock = new THREE.Clock();
4344

4445
init();
@@ -74,13 +75,13 @@
7475
// MATERIALS
7576

7677
materials = generateMaterials();
77-
current_material = "shiny";
78+
current_material = 'shiny';
7879

7980
// MARCHING CUBES
8081

8182
resolution = 28;
8283

83-
effect = new MarchingCubes( resolution, materials[ current_material ].m, true, true );
84+
effect = new MarchingCubes( resolution, materials[ current_material ], true, true, 100000 );
8485
effect.position.set( 0, 0, 0 );
8586
effect.scale.set( 700, 700, 700 );
8687

@@ -133,7 +134,7 @@
133134

134135
// environment map
135136

136-
const path = "textures/cube/SwedishRoyalCastle/";
137+
const path = 'textures/cube/SwedishRoyalCastle/';
137138
const format = '.jpg';
138139
const urls = [
139140
path + 'px' + format, path + 'nx' + format,
@@ -154,77 +155,24 @@
154155
const hatchingMaterial = createShaderMaterial( ToonShaderHatching, light, ambientLight );
155156
const dottedMaterial = createShaderMaterial( ToonShaderDotted, light, ambientLight );
156157

157-
const texture = new THREE.TextureLoader().load( "textures/uv_grid_opengl.jpg" );
158+
const texture = new THREE.TextureLoader().load( 'textures/uv_grid_opengl.jpg' );
158159
texture.wrapS = THREE.RepeatWrapping;
159160
texture.wrapT = THREE.RepeatWrapping;
160161

161162
const materials = {
162-
163-
"chrome": {
164-
m: new THREE.MeshLambertMaterial( { color: 0xffffff, envMap: reflectionCube } ),
165-
h: 0, s: 0, l: 1
166-
},
167-
168-
"liquid": {
169-
m: new THREE.MeshLambertMaterial( { color: 0xffffff, envMap: refractionCube, refractionRatio: 0.85 } ),
170-
h: 0, s: 0, l: 1
171-
},
172-
173-
"shiny": {
174-
m: new THREE.MeshStandardMaterial( { color: 0x550000, envMap: reflectionCube, roughness: 0.1, metalness: 1.0 } ),
175-
h: 0, s: 0.8, l: 0.2
176-
},
177-
178-
"matte": {
179-
m: new THREE.MeshPhongMaterial( { color: 0x000000, specular: 0x111111, shininess: 1 } ),
180-
h: 0, s: 0, l: 1
181-
},
182-
183-
"flat": {
184-
m: new THREE.MeshLambertMaterial( { color: 0x000000 } ),
185-
h: 0, s: 0, l: 1
186-
},
187-
188-
"textured": {
189-
m: new THREE.MeshPhongMaterial( { color: 0xffffff, specular: 0x111111, shininess: 1, map: texture } ),
190-
h: 0, s: 0, l: 1
191-
},
192-
193-
"colors": {
194-
m: new THREE.MeshPhongMaterial( { color: 0xffffff, specular: 0xffffff, shininess: 2, vertexColors: true } ),
195-
h: 0, s: 0, l: 1
196-
},
197-
198-
"multiColors": {
199-
m: new THREE.MeshPhongMaterial( { shininess: 2, vertexColors: true } ),
200-
h: 0, s: 0, l: 1
201-
},
202-
203-
"plastic": {
204-
m: new THREE.MeshPhongMaterial( { color: 0x000000, specular: 0x888888, shininess: 250 } ),
205-
h: 0.6, s: 0.8, l: 0.1
206-
},
207-
208-
"toon1": {
209-
m: toonMaterial1,
210-
h: 0.2, s: 1, l: 0.75
211-
},
212-
213-
"toon2": {
214-
m: toonMaterial2,
215-
h: 0.4, s: 1, l: 0.75
216-
},
217-
218-
"hatching": {
219-
m: hatchingMaterial,
220-
h: 0.2, s: 1, l: 0.9
221-
},
222-
223-
"dotted": {
224-
m: dottedMaterial,
225-
h: 0.2, s: 1, l: 0.9
226-
}
227-
163+
'shiny': new THREE.MeshStandardMaterial( { color: 0x550000, envMap: reflectionCube, roughness: 0.1, metalness: 1.0 } ),
164+
'chrome': new THREE.MeshLambertMaterial( { color: 0xffffff, envMap: reflectionCube } ),
165+
'liquid': new THREE.MeshLambertMaterial( { color: 0xffffff, envMap: refractionCube, refractionRatio: 0.85 } ),
166+
'matte': new THREE.MeshPhongMaterial( { specular: 0x111111, shininess: 1 } ),
167+
'flat': new THREE.MeshLambertMaterial( { /*TODO flatShading: true */ } ),
168+
'textured': new THREE.MeshPhongMaterial( { color: 0xffffff, specular: 0x111111, shininess: 1, map: texture } ),
169+
'colors': new THREE.MeshPhongMaterial( { color: 0xffffff, specular: 0xffffff, shininess: 2, vertexColors: true } ),
170+
'multiColors': new THREE.MeshPhongMaterial( { shininess: 2, vertexColors: true } ),
171+
'plastic': new THREE.MeshPhongMaterial( { specular: 0x888888, shininess: 250 } ),
172+
'toon1': toonMaterial1,
173+
'toon2': toonMaterial2,
174+
'hatching': hatchingMaterial,
175+
'dotted': dottedMaterial
228176
};
229177

230178
return materials;
@@ -240,10 +188,10 @@
240188

241189
const material = new THREE.ShaderMaterial( { uniforms: u, vertexShader: vs, fragmentShader: fs } );
242190

243-
material.uniforms[ "uDirLightPos" ].value = light.position;
244-
material.uniforms[ "uDirLightColor" ].value = light.color;
191+
material.uniforms[ 'uDirLightPos' ].value = light.position;
192+
material.uniforms[ 'uDirLightColor' ].value = light.color;
245193

246-
material.uniforms[ "uAmbientLightColor" ].value = ambientLight.color;
194+
material.uniforms[ 'uAmbientLightColor' ].value = ambientLight.color;
247195

248196
return material;
249197

@@ -257,30 +205,19 @@
257205

258206
return function () {
259207

260-
const mat_old = materials[ current_material ];
261-
mat_old.h = m_h.getValue();
262-
mat_old.s = m_s.getValue();
263-
mat_old.l = m_l.getValue();
264-
265208
current_material = id;
266209

267-
const mat = materials[ id ];
268-
effect.material = mat.m;
269-
270-
m_h.setValue( mat.h );
271-
m_s.setValue( mat.s );
272-
m_l.setValue( mat.l );
273-
274-
effect.enableUvs = ( current_material === "textured" ) ? true : false;
275-
effect.enableColors = ( current_material === "colors" || current_material === "multiColors" ) ? true : false;
210+
effect.material = materials[ id ];
211+
effect.enableUvs = ( current_material === 'textured' ) ? true : false;
212+
effect.enableColors = ( current_material === 'colors' || current_material === 'multiColors' ) ? true : false;
276213

277214
};
278215

279216
};
280217

281218
effectController = {
282219

283-
material: "shiny",
220+
material: 'shiny',
284221

285222
speed: 1.0,
286223
numBlobs: 10,
@@ -291,18 +228,6 @@
291228
wallx: false,
292229
wallz: false,
293230

294-
hue: 0.0,
295-
saturation: 0.8,
296-
lightness: 0.1,
297-
298-
lhue: 0.04,
299-
lsaturation: 1.0,
300-
llightness: 0.5,
301-
302-
lx: 0.5,
303-
ly: 0.5,
304-
lz: 1.0,
305-
306231
dummy: function () {}
307232

308233
};
@@ -313,7 +238,7 @@
313238

314239
// material (type)
315240

316-
h = gui.addFolder( "Materials" );
241+
h = gui.addFolder( 'Materials' );
317242

318243
for ( const m in materials ) {
319244

@@ -322,42 +247,18 @@
322247

323248
}
324249

325-
// material (color)
326-
327-
h = gui.addFolder( "Material color" );
328-
329-
const m_h = h.add( effectController, "hue", 0.0, 1.0, 0.025 );
330-
const m_s = h.add( effectController, "saturation", 0.0, 1.0, 0.025 );
331-
const m_l = h.add( effectController, "lightness", 0.0, 1.0, 0.025 );
332-
333-
// light (point)
334-
335-
h = gui.addFolder( "Point light color" );
336-
337-
h.add( effectController, "lhue", 0.0, 1.0, 0.025 ).name( "hue" );
338-
h.add( effectController, "lsaturation", 0.0, 1.0, 0.025 ).name( "saturation" );
339-
h.add( effectController, "llightness", 0.0, 1.0, 0.025 ).name( "lightness" );
340-
341-
// light (directional)
342-
343-
h = gui.addFolder( "Directional light orientation" );
344-
345-
h.add( effectController, "lx", - 1.0, 1.0, 0.025 ).name( "x" );
346-
h.add( effectController, "ly", - 1.0, 1.0, 0.025 ).name( "y" );
347-
h.add( effectController, "lz", - 1.0, 1.0, 0.025 ).name( "z" );
348-
349250
// simulation
350251

351-
h = gui.addFolder( "Simulation" );
252+
h = gui.addFolder( 'Simulation' );
352253

353-
h.add( effectController, "speed", 0.1, 8.0, 0.05 );
354-
h.add( effectController, "numBlobs", 1, 50, 1 );
355-
h.add( effectController, "resolution", 14, 100, 1 );
356-
h.add( effectController, "isolation", 10, 300, 1 );
254+
h.add( effectController, 'speed', 0.1, 8.0, 0.05 );
255+
h.add( effectController, 'numBlobs', 1, 50, 1 );
256+
h.add( effectController, 'resolution', 14, 100, 1 );
257+
h.add( effectController, 'isolation', 10, 300, 1 );
357258

358-
h.add( effectController, "floor" );
359-
h.add( effectController, "wallx" );
360-
h.add( effectController, "wallz" );
259+
h.add( effectController, 'floor' );
260+
h.add( effectController, 'wallx' );
261+
h.add( effectController, 'wallz' );
361262

362263
}
363264

@@ -439,25 +340,6 @@
439340

440341
updateCubes( effect, time, effectController.numBlobs, effectController.floor, effectController.wallx, effectController.wallz );
441342

442-
// materials
443-
444-
if ( effect.material instanceof THREE.ShaderMaterial ) {
445-
446-
effect.material.uniforms[ "uBaseColor" ].value.setHSL( effectController.hue, effectController.saturation, effectController.lightness );
447-
448-
} else {
449-
450-
effect.material.color.setHSL( effectController.hue, effectController.saturation, effectController.lightness );
451-
452-
}
453-
454-
// lights
455-
456-
light.position.set( effectController.lx, effectController.ly, effectController.lz );
457-
light.position.normalize();
458-
459-
pointLight.color.setHSL( effectController.lhue, effectController.lsaturation, effectController.llightness );
460-
461343
// render
462344

463345
renderer.render( scene, camera );

0 commit comments

Comments
 (0)