Skip to content

Commit 07f077f

Browse files
gregtatumgregtatum
committed
Additional functionality and cleanup for material viewer
1 parent 1fd15b8 commit 07f077f

7 files changed

Lines changed: 116 additions & 45 deletions

File tree

‎docs/api/materials/MeshBasicMaterial.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ <h1>[name]</h1>
1414
<div class="desc">A material for drawing geometries in a simple shaded (flat or wireframe) way.</div>
1515
<div class="desc">The default will render as flat polygons. To draw the mesh as wireframe, simply set the 'wireframe' property to true.</div>
1616

17+
<iframe src='../../scenes/material-browser.html#MeshBasicMaterial'></iframe>
1718

1819
<h2>Constructor</h2>
1920

‎docs/api/materials/MeshDepthMaterial.html‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,8 @@
1212
<h1>[name]</h1>
1313

1414
<div class="desc">A material for drawing geometry by depth. Depth is based off of the camera near and far plane. White is nearest, black is farthest.</div>
15+
16+
<iframe src='../../scenes/material-browser.html#MeshDepthMaterial'></iframe>
1517

1618
<h2>Constructor</h2>
1719

‎docs/api/materials/MeshLambertMaterial.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,8 @@
1212
<h1>[name]</h1>
1313

1414
<div class="desc">A material for non-shiny (Lambertian) surfaces, evaluated per vertex.</div>
15-
15+
16+
<iframe src='../../scenes/material-browser.html#MeshLambertMaterial'></iframe>
1617

1718
<h2>Constructor</h2>
1819

‎docs/api/materials/MeshNormalMaterial.html‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,8 @@
1212
<h1>[name]</h1>
1313

1414
<div class="desc">A material that maps the normal vectors to RGB colors.</div>
15+
16+
<iframe src='../../scenes/material-browser.html#MeshNormalMaterial'></iframe>
1517

1618

1719
<h2>Constructor</h2>

‎docs/api/materials/MeshPhongMaterial.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ <h1>[name]</h1>
1313

1414
<div class="desc">A material for shiny surfaces, evaluated per pixel.</div>
1515

16+
<iframe src='../../scenes/material-browser.html#MeshPhongMaterial'></iframe>
1617

1718
<h2>Constructor</h2>
1819

‎docs/scenes/js/material.js‎

Lines changed: 83 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -62,15 +62,70 @@ function handleColorChange( color ) {
6262

6363
}
6464

65-
function guiMaterial( gui, material ) {
65+
function needsUpdate( material, geometry ) {
66+
return function() {
67+
material.shading = +material.shading; //Ensure number
68+
material.needsUpdate = true;
69+
geometry.verticesNeedUpdate = true;
70+
geometry.normalsNeedUpdate = true;
71+
}
72+
};
73+
74+
function guiScene( gui, scene ) {
75+
var folder = gui.addFolder('Scene');
76+
77+
var data = {
78+
background : "#000000"
79+
}
80+
81+
var color = new THREE.Color();
82+
var colorConvert = handleColorChange( color );
83+
84+
folder.addColor( data, "background" ).onChange( function( value ) {
85+
86+
colorConvert( value );
87+
88+
renderer.setClearColor(color.getHex(), 1);
89+
90+
} );
91+
92+
guiSceneFog( folder, scene );
93+
94+
}
95+
96+
function guiSceneFog( folder, scene ) {
97+
var fogFolder = folder.addFolder('scene.fog');
98+
99+
var fog = new THREE.Fog( 0x3f7b9d, 0, 60 );
100+
101+
var data = {
102+
fog : {
103+
"THREE.Fog()" : false,
104+
"scene.fog.color" : fog.color.getHex()
105+
}
106+
};
107+
108+
fogFolder.add( data.fog, 'THREE.Fog()' ).onChange( function( useFog ) {
109+
110+
if( useFog ) {
111+
scene.fog = fog;
112+
} else {
113+
scene.fog = null;
114+
}
115+
116+
} );
117+
fogFolder.addColor( data.fog, 'scene.fog.color').onChange( handleColorChange( fog.color ) );
118+
}
119+
120+
function guiMaterial( gui, material, geometry ) {
66121
var folder = gui.addFolder('THREE.Material');
67122

68123
folder.add( material, 'transparent' );
69124
folder.add( material, 'opacity', 0, 1 );
70-
folder.add( material, 'blending', constants.blendingMode );
71-
folder.add( material, 'blendSrc', constants.destinationFactors );
72-
folder.add( material, 'blendDst', constants.destinationFactors );
73-
folder.add( material, 'blendEquation', constants.equations );
125+
// folder.add( material, 'blending', constants.blendingMode );
126+
// folder.add( material, 'blendSrc', constants.destinationFactors );
127+
// folder.add( material, 'blendDst', constants.destinationFactors );
128+
// folder.add( material, 'blendEquation', constants.equations );
74129
folder.add( material, 'depthTest' );
75130
folder.add( material, 'depthWrite' );
76131
folder.add( material, 'polygonOffset' );
@@ -79,10 +134,10 @@ function guiMaterial( gui, material ) {
79134
folder.add( material, 'alphaTest' );
80135
folder.add( material, 'overdraw' );
81136
folder.add( material, 'visible' );
82-
folder.add( material, 'side', constants.side );
137+
folder.add( material, 'side', constants.side ).onChange( needsUpdate( material, geometry ) );
83138
}
84139

85-
function guiMeshBasicMaterial( gui, material ) {
140+
function guiMeshBasicMaterial( gui, material, geometry ) {
86141

87142
var data = {
88143
color : material.color.getHex()
@@ -111,25 +166,25 @@ function guiMeshBasicMaterial( gui, material ) {
111166
//folder.add( material, 'refractionRatio' );
112167
}
113168

114-
function guiMeshDepthMaterial( gui, material ) {
169+
function guiMeshDepthMaterial( gui, material, geometry ) {
115170

116171
var folder = gui.addFolder('THREE.MeshDepthMaterial');
117172

118173
folder.add( material, 'wireframe' );
119174
folder.add( material, 'wireframeLinewidth', 0, 10 );
120175
}
121176

122-
function guiMeshNormalMaterial( gui, material ) {
177+
function guiMeshNormalMaterial( gui, material, geometry ) {
123178

124179
var folder = gui.addFolder('THREE.MeshNormalMaterial');
125180

126181
folder.add( material, 'morphTargets');
127-
folder.add( material, 'shading', constants.shading);
182+
folder.add( material, 'shading', constants.shading).onChange( needsUpdate( material, geometry ) );
128183
folder.add( material, 'wireframe' );
129184
folder.add( material, 'wireframeLinewidth', 0, 10 );
130185
}
131186

132-
function guiLineBasicMaterial( gui, material ) {
187+
function guiLineBasicMaterial( gui, material, geometry ) {
133188

134189
var data = {
135190
color : material.color.getHex()
@@ -146,7 +201,7 @@ function guiLineBasicMaterial( gui, material ) {
146201

147202
}
148203

149-
function guiMeshLambertMaterial( gui, material ) {
204+
function guiMeshLambertMaterial( gui, material, geometry ) {
150205

151206
var data = {
152207
color : material.color.getHex(),
@@ -160,7 +215,7 @@ function guiMeshLambertMaterial( gui, material ) {
160215
folder.addColor( data, 'ambient' ).onChange( handleColorChange( material.ambient ) );
161216
folder.addColor( data, 'emissive' ).onChange( handleColorChange( material.emissive ) );
162217

163-
folder.add( material, 'shading', constants.shading);
218+
folder.add( material, 'shading', constants.shading).onChange( needsUpdate( material, geometry ) );
164219
folder.add( material, 'wireframe' );
165220
folder.add( material, 'wireframeLinewidth', 0, 10 );
166221
folder.add( material, 'wireframeLinecap', ["butt", "round", "square"] );
@@ -170,7 +225,7 @@ function guiMeshLambertMaterial( gui, material ) {
170225

171226
}
172227

173-
function guiMeshPhongMaterial( gui, material ) {
228+
function guiMeshPhongMaterial( gui, material, geometry ) {
174229

175230
var data = {
176231
color : material.color.getHex(),
@@ -187,7 +242,7 @@ function guiMeshPhongMaterial( gui, material ) {
187242
folder.addColor( data, 'specular' ).onChange( handleColorChange( material.specular ) );
188243
folder.add( material, 'shininess', 0, 100);
189244

190-
folder.add( material, 'shading', constants.shading);
245+
folder.add( material, 'shading', constants.shading).onChange( needsUpdate( material, geometry ) );
191246
folder.add( material, 'wireframe' );
192247
folder.add( material, 'wireframeLinewidth', 0, 10 );
193248
folder.add( material, 'wireframeLinecap', ["butt", "round", "square"] );
@@ -197,20 +252,18 @@ function guiMeshPhongMaterial( gui, material ) {
197252

198253
}
199254

200-
201-
function chooseFromHash() {
255+
function chooseFromHash( gui, geometry ) {
202256

203257
var selectedMaterial = window.location.hash.substring(1) || "MeshBasicMaterial";
204258
var material;
205259

206-
var gui = new dat.GUI();
207260
switch (selectedMaterial) {
208261

209262
case "MeshBasicMaterial":
210263

211264
material = new THREE.MeshBasicMaterial({color: 0x00ff00});
212-
guiMaterial( gui, material );
213-
guiMeshBasicMaterial( gui, material );
265+
guiMaterial( gui, material, geometry );
266+
guiMeshBasicMaterial( gui, material, geometry );
214267

215268
return material;
216269

@@ -219,8 +272,8 @@ function chooseFromHash() {
219272
case "MeshLambertMaterial":
220273

221274
material = new THREE.MeshLambertMaterial({color: 0x00ff00});
222-
guiMaterial( gui, material );
223-
guiMeshLambertMaterial( gui, material );
275+
guiMaterial( gui, material, geometry );
276+
guiMeshLambertMaterial( gui, material, geometry );
224277

225278
return material;
226279

@@ -229,8 +282,8 @@ function chooseFromHash() {
229282
case "MeshPhongMaterial":
230283

231284
material = new THREE.MeshPhongMaterial({color: 0x00ff00});
232-
guiMaterial( gui, material );
233-
guiMeshPhongMaterial( gui, material );
285+
guiMaterial( gui, material, geometry );
286+
guiMeshPhongMaterial( gui, material, geometry );
234287

235288
return material;
236289

@@ -239,8 +292,8 @@ function chooseFromHash() {
239292
case "MeshDepthMaterial":
240293

241294
material = new THREE.MeshDepthMaterial({color: 0x00ff00});
242-
guiMaterial( gui, material );
243-
guiMeshDepthMaterial( gui, material );
295+
guiMaterial( gui, material, geometry );
296+
guiMeshDepthMaterial( gui, material, geometry );
244297

245298
return material;
246299

@@ -249,8 +302,8 @@ function chooseFromHash() {
249302
case "MeshNormalMaterial":
250303

251304
material = new THREE.MeshNormalMaterial();
252-
guiMaterial( gui, material );
253-
guiMeshNormalMaterial( gui, material );
305+
guiMaterial( gui, material, geometry );
306+
guiMeshNormalMaterial( gui, material, geometry );
254307

255308
return material;
256309

@@ -259,8 +312,8 @@ function chooseFromHash() {
259312
case "LineBasicMaterial":
260313

261314
material = new THREE.LineBasicMaterial({color: 0x00ff00});
262-
guiMaterial( gui, material );
263-
guiLineBasicMaterial( gui, material );
315+
guiMaterial( gui, material, geometry );
316+
guiLineBasicMaterial( gui, material, geometry );
264317

265318
return material;
266319

‎docs/scenes/material-browser.html‎

Lines changed: 25 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -14,28 +14,31 @@
1414

1515
<script>
1616

17+
var gui = new dat.GUI();
1718
var scene = new THREE.Scene();
18-
var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 50);
19+
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 50 );
20+
21+
guiScene( gui, scene, camera );
1922

2023
var renderer = new THREE.WebGLRenderer();
21-
renderer.setSize(window.innerWidth, window.innerHeight);
22-
document.body.appendChild(renderer.domElement);
24+
renderer.setSize( window.innerWidth, window.innerHeight );
25+
document.body.appendChild( renderer.domElement );
2326

2427
var geometry = new THREE.TorusKnotGeometry( 10, 3, 100, 16 );
25-
var material = chooseFromHash();
28+
var material = chooseFromHash( gui, geometry );
2629

27-
var torus = new THREE.Mesh(geometry, material);
28-
scene.add(torus);
30+
var torus = new THREE.Mesh( geometry, material );
31+
scene.add( torus );
2932

3033
var lights = [];
3134
lights[0] = new THREE.AmbientLight( 0x555555 );
3235
lights[1] = new THREE.PointLight( 0xffffff, 1, 0 );
3336
lights[2] = new THREE.PointLight( 0xffffff, 1, 0 );
3437
lights[3] = new THREE.PointLight( 0xffffff, 1, 0 );
3538

36-
lights[1].position.set(0, 200, 0);
37-
lights[2].position.set(100, 200, 100);
38-
lights[3].position.set(-100, -200, -100);
39+
lights[1].position.set( 0, 200, 0 );
40+
lights[2].position.set( 100, 200, 100 );
41+
lights[3].position.set( -100, -200, -100 );
3942

4043
//scene.add( lights[0] );
4144
scene.add( lights[1] );
@@ -44,23 +47,31 @@
4447

4548
camera.position.z = 30;
4649

50+
var prevFog = false;
51+
4752
var render = function () {
4853

49-
requestAnimationFrame(render);
54+
requestAnimationFrame( render );
5055

5156
torus.rotation.x += 0.01;
5257
torus.rotation.y += 0.01;
53-
material.needsUpdate = true;
58+
59+
if( prevFog !== scene.fog ) {
60+
material.needsUpdate = true;
61+
prevFog = scene.fog;
62+
}
5463

55-
renderer.render(scene, camera);
64+
renderer.render( scene, camera );
5665
};
5766

5867
window.addEventListener( 'resize', function() {
68+
5969
camera.aspect = window.innerWidth / window.innerHeight;
6070
camera.updateProjectionMatrix();
6171

62-
renderer.setSize( window.innerWidth, window.innerHeight );
63-
}, false );
72+
renderer.setSize( window.innerWidth, window.innerHeight );
73+
74+
}, false );
6475

6576
render();
6677
</script>

0 commit comments

Comments
 (0)