MeshPhongMaterial.html 11.2 KB
Newer Older
1 2 3
<!DOCTYPE html>
<html lang="en">
	<head>
4
		<meta charset="utf-8" />
M
Mr.doob 已提交
5 6 7 8
		<base href="../../" />
		<script src="list.js"></script>
		<script src="page.js"></script>
		<link type="text/css" rel="stylesheet" href="page.css" />
9 10
	</head>
	<body>
C
cjshannon 已提交
11
		[page:Material] &rarr;
M
Mr.doob 已提交
12

13
		<h1>[name]</h1>
M
Mr.doob 已提交
14

E
Eric Haines 已提交
15
		<div class="desc">A material for shiny surfaces, evaluated per pixel.</div>
M
Mr.doob 已提交
16

17
		<iframe id="scene" src="scenes/material-browser.html#MeshPhongMaterial"></iframe>
M
Mr.doob 已提交
18

19 20 21 22 23 24 25
		<script>

		// iOS iframe auto-resize workaround

		if ( /(iPad|iPhone|iPod)/g.test( navigator.userAgent ) ) {

			var scene = document.getElementById( 'scene' );
M
Mr.doob 已提交
26

27 28 29 30 31 32 33 34 35
			scene.style.width = getComputedStyle( scene ).width;
			scene.style.height = getComputedStyle( scene ).height;
			scene.setAttribute( 'scrolling', 'no' );

		}

		</script>

		<h2>Constructor</h2>
C
cjshannon 已提交
36

37
		<h3>[name]( [page:Object parameters] )</h3>
C
cjshannon 已提交
38
		<div>
39
		parameters -- an object with one or more of the material's properties defining the material's appearance.
C
cjshannon 已提交
40 41
		</div>
		<div>
42
		color — geometry color in hexadecimal. Default is 0xffffff.<br />
43 44 45
		specular — Set specular color. Default is 0x111111 .<br />
		shininess — Set shininess Default is 30.<br />
		map — Set texture map. Default is null.<br />
46
		lightMap — Set light map. Default is null.<br />
47
		lightMapIntensity — Set light map intensity. Default is 1.<br />
48
		aoMap — Set ao map. Default is null.<br />
49 50
		aoMapIntensity — Set ao map intensity. Default is 1.<br />
		emissive - Set emissive color. Default is 0x000000.<br />
51
		emissiveMap — Set emissive map. Default is null.<br />
52 53
		emissiveIntensity — Set emissive map intensity. Default is 1.<br />
		bumpMap — Set bump map. Default is null.<br />
54
		bumpScale — Set bump map scale. Default is 1.<br />
55
		normalMap — Set normal map. Default is null.<br />
W
weiserhei 已提交
56
		normalScale — Set normal map scale. Default is (1, 1).<br />
57 58 59
		displacementMap — Set displacement map. Default is null.<br />
		displacementScale — Set displacement scale. Default is 1.<br />
		displacementBias — Set displacement offset. Default is 0.<br />
60 61
		specularMap — Set specular map. Default is null.<br />
		alphaMap — Set alpha map. Default is null.<br />
62
		envMap — Set env map. Default is null.<br />
63 64 65
		combine — Set combine operation. Default is THREE.MultiplyOperation.<br />
		reflectivity — Set reflectivity. Default is 1.<br />
		refractionRatio — Set refraction ratio. Default is 0.98.<br />
66 67 68 69 70 71 72 73
		fog — Define whether the material color is affected by global fog settings. Default is true.<br />
		shading — Define shading type. Default is THREE.SmoothShading.<br />
		wireframe — render geometry as wireframe. Default is false.<br />
		wireframeLinewidth — Line thickness. Default is 1.<br />
		wireframeLinecap — Define appearance of line ends. Default is 'round'.<br />
		wireframeLinejoin — Define appearance of line joints. Default is 'round'.<br />
		vertexColors — Define how the vertices gets colored. Default is THREE.NoColors.<br />
		skinning — Define whether the material uses skinning. Default is false.<br />
74 75
		morphTargets — Define whether the material uses morphTargets. Default is false.<br />
		morphNormals — Define whether the material uses morphNormals. Default is false.
76 77
		</div>
		<div>
P
PaulJacobs 已提交
78
		Example:<br>
G
Greg Tatum 已提交
79
		materials.push( new THREE.MeshPhongMaterial( { color: 0xdddddd, specular: 0x009900, shininess: 30, shading: THREE.FlatShading } ) );
80

C
cjshannon 已提交
81
		</div>
M
Mr.doob 已提交
82 83


84
		<h2>Properties</h2>
85
		<div>See the base [page:Material] class for common properties.</div>
M
Mr.doob 已提交
86

87
		<h3>[property:Color color]</h3>
E
Eric Haines 已提交
88 89 90 91
		<div>
		Diffuse color of the material. Default is white.<br />
		</div>

92
		<h3>[property:Color specular]</h3>
E
Eric Haines 已提交
93 94 95
		<div>
		Specular color of the material, i.e., how shiny the material is and the color of its shine. Setting this the same color as the diffuse value (times some intensity) makes the material more metallic-looking; setting this to some gray makes the material look more plastic. Default is dark gray.<br />
		</div>
M
Mr.doob 已提交
96

97
		<h3>[property:Float shininess]</h3>
98
		<div>How shiny the specular highlight is; a higher value gives a sharper highlight. Default is *30*.</div>
E
Eric Haines 已提交
99

100
		<h3>[property:Texture map]</h3>
101
		<div>Set color texture map. Default is null. The texture map color is modulated by the diffuse color.</div>
E
Eric Haines 已提交
102

103
		<h3>[property:Texture lightMap]</h3>
104
		<div>Set light map. Default is null. The lightMap requires a second set of UVs.</div>
E
Eric Haines 已提交
105

106 107 108
		<h3>[property:Float lightMapIntensity]</h3>
		<div>TODO</div>

109
		<h3>[property:Texture aoMap]</h3>
110 111
		<div>Set ambient occlusion map. Default is null. The aoMap requires a second set of UVs.</div>

112 113 114 115 116 117 118 119
		<h3>[property:Float aoMapIntensity]</h3>
		<div>TODO</div>

		<h3>[property:Color emissive]</h3>
		<div>
		Emissive (light) color of the material, essentially a solid color unaffected by other lighting. Default is black.<br />
		</div>

120
		<h3>[property:Texture emissiveMap]</h3>
121
		<div>Set emisssive (glow) map. Default is null. The emissive map color is modulated by the emissive color and the emissive intensity. If you have an emissive map, be sure to set the emissive color to something other than black.</div>
122

123 124 125
		<h3>[property:Float emissiveIntensity]</h3>
		<div>Intensity of the emissive light. Modulates the emissive color. Default is 1.</div>

126 127 128 129 130 131
		<h3>[property:Texture bumpMap]</h3>
		<div>
			The texture to create a bump map. The black and white values map to the perceived depth in relation to the lights.
			Bump doesn't actually affect the geometry of the object, only the lighting. If a normal map is defined this will
			be ignored.
		</div>
132

133 134 135 136 137 138 139 140 141 142
		<h3>[property:Float bumpScale]</h3>
		<div>
			How much the bump map affects the material. Typical ranges are 0-1. Default is 1.
		</div>

		<h3>[property:Texture normalMap]</h3>
		<div>
			The texture to create a normal map. The RGB values affect the surface normal for each pixel fragment and change
			the way the color is lit. Normal maps do not change the actual shape of the surface, only the lighting.
		</div>
143

144 145 146
		<h3>[property:Vector2 normalScale]</h3>
		<div>
			How much the normal map affects the material. Typical ranges are 0-1. Default is (1,1).
147
		</div>
148

149 150
		<h3>[property:Texture displacementMap]</h3>
		<div>
151
			The displacement map affects the position of the mesh's vertices. Unlike other maps which only affect the light and shade of the material the displaced vertices can cast shadows, block other objects, and otherwise act as real geometry.
152 153
			The displacement texture is an image where the value of each pixel (white being the highest) is mapped against, and repositions, the vertices of the mesh.
		</div>
154

155 156 157 158
		<h3>[property:Float displacementScale]</h3>
		<div>
			How much the displacement map affects the mesh (where black is no displacement, and white is maximum displacement). Without a displacement map set, this value is not applied. Default is 1.
		</div>
159

160 161 162 163
		<h3>[property:Float displacementBias]</h3>
		<div>
			The offset of the displacement map's values on the mesh's vertices. Without a displacement map set, this value is not applied. Default is 0.
		</div>
164 165 166 167 168 169 170 171

		<h3>[property:Texture specularMap]</h3>
		<div>The specular map value affects both how much the specular surface highlight contributes and how much of the environment map affects the surface. Default is null.</div>

		<h3>[property:Texture alphaMap]</h3>
		<div>The alpha map is a grayscale texture that controls the opacity across the surface (black: fully transparent; white: fully opaque). Default is null.</div>
		<div>Only the color of the texture is used, ignoring the alpha channel if one exists. For RGB and RGBA textures, the [page:WebGLRenderer WebGL] renderer will use the green channel when sampling this texture due to the extra bit of precision provided for green in DXT-compressed and uncompressed RGB 565 formats. Luminance-only and luminance/alpha textures will also still work as expected.</div>

172
		<h3>[property:TextureCube envMap]</h3>
E
Eric Haines 已提交
173
		<div>Set env map. Default is null.</div>
174

175
		<h3>[property:Integer combine]</h3>
176 177
		<div>How to combine the result of the surface's color with the environment map, if any.</div>

178
		<div>Options are [page:Materials THREE.Multiply] (default), [page:Materials THREE.MixOperation], [page:Materials THREE.AddOperation]. If mix is chosen, the reflectivity is used to blend between the two colors.</div>
179

180
		<h3>[property:Float reflectivity]</h3>
181
		<div>How much the environment map affects the surface; also see "combine".</div>
E
Eric Haines 已提交
182

183
		<h3>[property:Float refractionRatio]</h3>
184
		<div>The index of refraction for an environment map using [page:Textures THREE.CubeRefractionMapping]. Default is *0.98*.</div>
E
Eric Haines 已提交
185

186 187 188 189 190 191 192
		<h3>[property:Boolean fog]</h3>
		<div>Define whether the material color is affected by global fog settings. Default is *true*.</div>
		<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>

		<h3>[property:Integer shading]</h3>
		<div>How the triangles of a curved surface are rendered: as a smooth surface, as flat separate facets, or no shading at all.</div>

193 194
		<div>Options are [page:Materials THREE.SmoothShading] (default), [page:Materials THREE.FlatShading].</div>

195 196
		<h3>[property:Boolean wireframe]</h3>
		<div>Whether the triangles' edges are displayed instead of surfaces. Default is *false*.</div>
197

198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213
		<h3>[property:Float wireframeLinewidth]</h3>
		<div>Line thickness for wireframe mode. Default is *1.0*.</div>
		<div>Due to limitations in the <a href="https://code.google.com/p/angleproject/" target="_blank">ANGLE layer</a>, on Windows platforms linewidth will always be 1 regardless of the set value.</div>

		<h3>[property:String wireframeLinecap]</h3>
		<div>Define appearance of line ends. Possible values are "butt", "round" and "square". Default is 'round'.</div>
		<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>

		<h3>[property:String wireframeLinejoin]</h3>
		<div>Define appearance of line joints. Possible values are "round", "bevel" and "miter". Default is 'round'.</div>
		<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>

		<h3>[property:Integer vertexColors]</h3>
		<div>Define how the vertices gets colored. Possible values are THREE.NoColors, THREE.FaceColors and THREE.VertexColors. Default is THREE.NoColors.</div>
		<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>

214
		<h3>[property:Boolean skinning]</h3>
E
Eric Haines 已提交
215
		<div>Define whether the material uses skinning. Default is *false*.</div>
216

217
		<h3>[property:Boolean morphTargets]</h3>
218
		<div>Define whether the material uses morphTargets. Default is *false*.</div>
E
Eric Haines 已提交
219

G
Greg Tatum 已提交
220
		<h3>[property:boolean morphNormals]</h3>
C
cjshannon 已提交
221
		<div>
G
Greg Tatum 已提交
222 223 224
			Defines whether the material uses morphNormals. Set as true to pass morphNormal attributes from the [page:Geometry]
			to the shader. Default is *false*.
		</div>
C
cjshannon 已提交
225

E
Eric Haines 已提交
226
		<h2>Methods</h2>
M
Mr.doob 已提交
227

228
		<h2>Source</h2>
M
Mr.doob 已提交
229

230 231 232
		[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
	</body>
</html>