Skip to content

Commit 135ee5c

Browse files
gregtatumgregtatum
committed
Documentation material browser
1 parent 5fe0182 commit 135ee5c

12 files changed

Lines changed: 360 additions & 713 deletions

‎docs/api/materials/Material.html‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -53,14 +53,15 @@ <h3>.[page:Boolean transparent]</h3>
5353
</div>
5454
<div>Default is *false*.</div>
5555

56-
<h3>.[page:Blending blending]</h3>
56+
<h3>.[page:Materials blending]</h3>
5757
<div>
58-
Which blending to use when displaying objects with this material. Default is [page:Materials NormalBlending].
58+
Which blending to use when displaying objects with this material. Default is [page:Materials NormalBlending]. See the blending mode [page:Materials constants] for all possible values.
59+
5960
</div>
6061

61-
<h3>.[page:Integer blendSrc]</h3>
62+
<h3>.[page:Materials blendSrc]</h3>
6263
<div>
63-
Blending source. It's one of the blending mode constants defined in [page:Three Three.js]. Default is [page:CustomBlendingEquation SrcAlphaFactor]
64+
Blending source. It's one of the blending mode constants defined in Three.js. Default is [page:CustomBlendingEquation SrcAlphaFactor]. See the destination factors [page:CustomBlendingEquation constants] for all possible values.
6465
</div>
6566

6667
<h3>.[page:Integer blendDst]</h3>

‎docs/api/materials/MeshBasicMaterial.html‎

Lines changed: 4 additions & 3 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

@@ -58,10 +59,10 @@ <h3>.[page:String wireframeLinejoin]</h3>
5859
<div>Define appearance of line joints. Possible values are "round", "bevel" and "miter". Default is 'round'.</div>
5960
<div>This setting might not have any effect when used with certain renderers. For example, it is ignored with the [page:WebGLRenderer WebGL] renderer, but does work with the [page:CanvasRenderer Canvas] renderer.</div>
6061

61-
<h3>.[page:String shading]</h3>
62-
<div>Define shading type. Default is THREE.SmoothShading.</div>
62+
<h3>.[page:Materials shading]</h3>
63+
<div>Define shading type. Default is THREE.SmoothShading. Possible values are THREE.NoShading, THREE.FlatShading, THREE.SmoothShading.</div>
6364

64-
<h3>.[page:Integer vertexColors]</h3>
65+
<h3>.[page:Materials vertexColors]</h3>
6566
<div>Define how the vertices gets colored. Possible values are THREE.NoColors, THREE.FaceColors and THREE.VertexColors. Default is THREE.NoColors.</div>
6667
<div>This setting might not have any effect when used with certain renderers. For example, it is ignored with the [page:CanvasRenderer Canvas] renderer, but does work with the [page:WebGLRenderer WebGL] renderer.</div>
6768

‎docs/api/materials/MeshDepthMaterial.html‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,8 @@ <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>
1515

16+
<iframe src='../../scenes/material-browser.html#MeshDepthMaterial'></iframe>
17+
1618
<h2>Constructor</h2>
1719

1820

‎docs/api/materials/MeshFaceMaterial.html‎

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

1414
<div class="desc">
1515
A Material to define multiple materials for the same geometry.
16-
The geometry decides which material is used for which faces by the [page:Face3 faces materialindex].
16+
The geometry decides which material is used for which faces by the [page:Face3 faces] materialindex.
1717
The materialindex corresponds with the index of the material in the materials array.
1818
</div>
1919

‎docs/api/materials/MeshLambertMaterial.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 non-shiny (Lambertian) surfaces, evaluated per vertex.</div>
1515

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

1718
<h2>Constructor</h2>
1819

‎docs/api/materials/MeshNormalMaterial.html‎

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

1414
<div class="desc">A material that maps the normal vectors to RGB colors.</div>
1515

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

1718
<h2>Constructor</h2>
1819

@@ -39,7 +40,7 @@ <h3>.[page:boolean morphTargets]</h3>
3940
<h3>.[page:number shading]</h3>
4041
<div>
4142
How the triangles of a curved surface are rendered: as a smooth surface, as flat separate facets, or no shading at all.<br/><br/>
42-
Options are [page:Materials THREE.SmoothShading] (default), [page:Materials THREE.FlatShading]
43+
Options are [page:Materials THREE.SmoothShading], [page:Materials THREE.FlatShading] (default)
4344
</div>
4445

4546

‎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/page.css‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,11 @@ code {
6565
background-color: #f9f9f9;
6666
overflow: auto;
6767
}
68-
68+
iframe {
69+
width: 100%;
70+
height: 420px;
71+
border:0;
72+
}
6973
strong {
7074
color: #000;
7175
font-weight: normal;

‎docs/scenes/js/material.js‎

Lines changed: 271 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,271 @@
1+
var constants = {
2+
3+
side: {
4+
"THREE.FrontSide": THREE.FrontSide,
5+
"THREE.BackSide": THREE.BackSide,
6+
"THREE.DoubleSide": THREE.DoubleSide
7+
},
8+
9+
shading: {
10+
"THREE.NoShading": THREE.NoShading,
11+
"THREE.FlatShading": THREE.FlatShading,
12+
"THREE.SmoothShading": THREE.SmoothShading
13+
},
14+
15+
colors: {
16+
"THREE.NoColors": THREE.NoColors,
17+
"THREE.FaceColors": THREE.FaceColors,
18+
"THREE.VertexColors": THREE.VertexColors
19+
},
20+
21+
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+
},
29+
equations : {
30+
"THREE.AddEquation" : THREE.AddEquation,
31+
"THREE.SubtractEquation" : THREE.SubtractEquation,
32+
"THREE.ReverseSubtractEquation" : THREE.ReverseSubtractEquation
33+
},
34+
35+
destinationFactors : {
36+
"THREE.ZeroFactor" : THREE.ZeroFactor,
37+
"THREE.OneFactor" : THREE.OneFactor,
38+
"THREE.SrcColorFactor" : THREE.SrcColorFactor,
39+
"THREE.OneMinusSrcColorFactor" : THREE.OneMinusSrcColorFactor,
40+
"THREE.SrcAlphaFactor" : THREE.SrcAlphaFactor,
41+
"THREE.OneMinusSrcAlphaFactor" : THREE.OneMinusSrcAlphaFactor,
42+
"THREE.DstAlphaFactor" : THREE.DstAlphaFactor,
43+
"THREE.OneMinusDstAlphaFactor" : THREE.OneMinusDstAlphaFactor
44+
},
45+
46+
sourceFactors : {
47+
"THREE.DstColorFactor" : THREE.DstColorFactor,
48+
"THREE.OneMinusDstColorFactor" : THREE.OneMinusDstColorFactor,
49+
"THREE.SrcAlphaSaturateFactor" : THREE.SrcAlphaSaturateFactor
50+
}
51+
52+
}
53+
54+
function handleColorChange( color ) {
55+
56+
return function( value ){
57+
if(typeof value === "string") {
58+
value = value.replace('#', '0x');
59+
}
60+
color.setHex( value );
61+
};
62+
63+
}
64+
65+
function guiMaterial( gui, material ) {
66+
var folder = gui.addFolder('THREE.Material');
67+
68+
folder.add( material, 'transparent' );
69+
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 );
74+
folder.add( material, 'depthTest' );
75+
folder.add( material, 'depthWrite' );
76+
folder.add( material, 'polygonOffset' );
77+
folder.add( material, 'polygonOffsetFactor' );
78+
folder.add( material, 'polygonOffsetUnits' );
79+
folder.add( material, 'alphaTest' );
80+
folder.add( material, 'overdraw' );
81+
folder.add( material, 'visible' );
82+
folder.add( material, 'side', constants.side );
83+
}
84+
85+
function guiMeshBasicMaterial( gui, material ) {
86+
87+
var data = {
88+
color : material.color.getHex()
89+
};
90+
91+
var folder = gui.addFolder('THREE.MeshBasicMaterial');
92+
93+
folder.addColor( data, 'color' ).onChange( handleColorChange( material.color ) );
94+
folder.add( material, 'wireframe' );
95+
folder.add( material, 'wireframeLinewidth', 0, 10 );
96+
folder.add( material, 'wireframeLinecap', ["butt", "round", "square"] );
97+
folder.add( material, 'wireframeLinejoin', ["round", "bevel", "miter"] );
98+
folder.add( material, 'shading', constants.shading);
99+
folder.add( material, 'vertexColors', constants.colors);
100+
folder.add( material, 'fog' );
101+
102+
//folder.add( material, 'lightMap' );
103+
//folder.add( material, 'specularMap' );
104+
//folder.add( material, 'alphaMap' );
105+
//folder.add( material, 'envMap' );
106+
//folder.add( material, 'skinning' );
107+
//folder.add( material, 'morphTargets' );
108+
//folder.add( material, 'map' );
109+
//folder.add( material, 'combine' );
110+
//folder.add( material, 'relectivity' );
111+
//folder.add( material, 'refractionRatio' );
112+
}
113+
114+
function guiMeshDepthMaterial( gui, material ) {
115+
116+
var folder = gui.addFolder('THREE.MeshDepthMaterial');
117+
118+
folder.add( material, 'wireframe' );
119+
folder.add( material, 'wireframeLinewidth', 0, 10 );
120+
}
121+
122+
function guiMeshNormalMaterial( gui, material ) {
123+
124+
var folder = gui.addFolder('THREE.MeshNormalMaterial');
125+
126+
folder.add( material, 'morphTargets');
127+
folder.add( material, 'shading', constants.shading);
128+
folder.add( material, 'wireframe' );
129+
folder.add( material, 'wireframeLinewidth', 0, 10 );
130+
}
131+
132+
function guiLineBasicMaterial( gui, material ) {
133+
134+
var data = {
135+
color : material.color.getHex()
136+
};
137+
138+
var folder = gui.addFolder('THREE.LineBasicMaterial');
139+
140+
folder.addColor( data, 'color' ).onChange( handleColorChange( material.color ) );
141+
folder.add( material, 'linewidth', 0, 10 );
142+
folder.add( material, 'linecap', ["butt", "round", "square"] );
143+
folder.add( material, 'linejoin', ["round", "bevel", "miter"] );
144+
folder.add( material, 'vertexColors', constants.colors);
145+
folder.add( material, 'fog' );
146+
147+
}
148+
149+
function guiMeshLambertMaterial( gui, material ) {
150+
151+
var data = {
152+
color : material.color.getHex(),
153+
ambient : material.ambient.getHex(),
154+
emissive : material.emissive.getHex()
155+
};
156+
157+
var folder = gui.addFolder('THREE.MeshLambertMaterial');
158+
159+
folder.addColor( data, 'color' ).onChange( handleColorChange( material.color ) );
160+
folder.addColor( data, 'ambient' ).onChange( handleColorChange( material.ambient ) );
161+
folder.addColor( data, 'emissive' ).onChange( handleColorChange( material.emissive ) );
162+
163+
folder.add( material, 'shading', constants.shading);
164+
folder.add( material, 'wireframe' );
165+
folder.add( material, 'wireframeLinewidth', 0, 10 );
166+
folder.add( material, 'wireframeLinecap', ["butt", "round", "square"] );
167+
folder.add( material, 'wireframeLinejoin', ["round", "bevel", "miter"] );
168+
folder.add( material, 'vertexColors', constants.colors);
169+
folder.add( material, 'fog' );
170+
171+
}
172+
173+
function guiMeshPhongMaterial( gui, material ) {
174+
175+
var data = {
176+
color : material.color.getHex(),
177+
ambient : material.ambient.getHex(),
178+
emissive : material.emissive.getHex(),
179+
specular : material.specular.getHex()
180+
};
181+
182+
var folder = gui.addFolder('THREE.MeshPhongMaterial');
183+
184+
folder.addColor( data, 'color' ).onChange( handleColorChange( material.color ) );
185+
folder.addColor( data, 'ambient' ).onChange( handleColorChange( material.ambient ) );
186+
folder.addColor( data, 'emissive' ).onChange( handleColorChange( material.emissive ) );
187+
folder.addColor( data, 'specular' ).onChange( handleColorChange( material.specular ) );
188+
folder.add( material, 'shininess', 0, 100);
189+
190+
folder.add( material, 'shading', constants.shading);
191+
folder.add( material, 'wireframe' );
192+
folder.add( material, 'wireframeLinewidth', 0, 10 );
193+
folder.add( material, 'wireframeLinecap', ["butt", "round", "square"] );
194+
folder.add( material, 'wireframeLinejoin', ["round", "bevel", "miter"] );
195+
folder.add( material, 'vertexColors', constants.colors);
196+
folder.add( material, 'fog' );
197+
198+
}
199+
200+
201+
function chooseFromHash() {
202+
203+
var selectedMaterial = window.location.hash.substring(1) || "MeshBasicMaterial";
204+
var material;
205+
206+
var gui = new dat.GUI();
207+
switch (selectedMaterial) {
208+
209+
case "MeshBasicMaterial":
210+
211+
material = new THREE.MeshBasicMaterial({color: 0x00ff00});
212+
guiMaterial( gui, material );
213+
guiMeshBasicMaterial( gui, material );
214+
215+
return material;
216+
217+
break;
218+
219+
case "MeshLambertMaterial":
220+
221+
material = new THREE.MeshLambertMaterial({color: 0x00ff00});
222+
guiMaterial( gui, material );
223+
guiMeshLambertMaterial( gui, material );
224+
225+
return material;
226+
227+
break;
228+
229+
case "MeshPhongMaterial":
230+
231+
material = new THREE.MeshPhongMaterial({color: 0x00ff00});
232+
guiMaterial( gui, material );
233+
guiMeshPhongMaterial( gui, material );
234+
235+
return material;
236+
237+
break;
238+
239+
case "MeshDepthMaterial":
240+
241+
material = new THREE.MeshDepthMaterial({color: 0x00ff00});
242+
guiMaterial( gui, material );
243+
guiMeshDepthMaterial( gui, material );
244+
245+
return material;
246+
247+
break;
248+
249+
case "MeshNormalMaterial":
250+
251+
material = new THREE.MeshNormalMaterial();
252+
guiMaterial( gui, material );
253+
guiMeshNormalMaterial( gui, material );
254+
255+
return material;
256+
257+
break;
258+
259+
case "LineBasicMaterial":
260+
261+
material = new THREE.LineBasicMaterial({color: 0x00ff00});
262+
guiMaterial( gui, material );
263+
guiLineBasicMaterial( gui, material );
264+
265+
return material;
266+
267+
break;
268+
}
269+
270+
271+
}

0 commit comments

Comments
 (0)