1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8" />
<base href="../../../" />
<script src="page.js"></script>
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body>
[page:Material] → [page:MeshStandardMaterial] →
<h1>物理网格材质([name])</h1>
<p class="desc">
[page:MeshStandardMaterial]的扩展,提供了更高级的基于物理的渲染属性:
</p>
<ul>
<li>
<b>Clearcoat:</b> 有些类似于车漆,碳纤,被水打湿的表面的材质需要在面上再增加一个透明的,具有一定反光特性的面。而且这个面说不定有一定的起伏与粗糙度。Clearcoat可以在不需要重新创建一个透明的面的情况下做到类似的效果。
</li>
<li>
<b>基于物理的透明度</b>:[page:Material.opacity .opacity]属性有一些限制:在透明度比较高的时候,反射也随之减少。使用基于物理的透光性[page:.transmission]属性可以让一些很薄的透明表面,例如玻璃,变得更真实一些。
</li>
<li>
<b>高级光线反射:</b> 为非金属材质提供了更多更灵活的光线反射。
</li>
<li>
<b>Sheen:</b> Can be used for representing cloth and fabric materials.
</li>
</ul>
<p>
物理网格材质使用了更复杂的着色器功能,所以在每个像素的渲染都要比three.js中的其他材质更费性能,大部分的特性是默认关闭的,需要手动开启,每开启一项功能在开启的时候才会更耗性能。请注意,为获得最佳效果,您在使用此材质时应始终指定[page:.envMap environment map]。
</p>
<iframe id="scene" src="scenes/material-browser.html#MeshPhysicalMaterial"></iframe>
<script>
// iOS iframe auto-resize workaround
if ( /(iPad|iPhone|iPod)/g.test( navigator.userAgent ) ) {
const scene = document.getElementById( 'scene' );
scene.style.width = getComputedStyle( scene ).width;
scene.style.height = getComputedStyle( scene ).height;
scene.setAttribute( 'scrolling', 'no' );
}
</script>
<h2>例子</h2>
<p>
[example:webgl_materials_physical_clearcoat materials / physical / clearcoat]<br />
[example:webgl_loader_gltf_sheen loader / gltf / sheen]<br />
[example:webgl_materials_physical_transmission materials / physical / transmission]
</p>
<h2>构造函数(Constructor)</h2>
<h3>[name]( [param:Object parameters] )</h3>
<p> [page:Object parameters] - (可选)用于定义材质外观的对象,具有一个或多个属性。
材质的任何属性都可以从此处传入(包括从[page:Material]和[page:MeshStandardMaterial]继承的任何属性)<br /><br />
属性[page:Hexadecimal color]例外,其可以作为十六进制字符串传递,默认情况下为 *0xffffff*(白色),内部调用[page:Color.set](color)。
</p>
<h2>属性(Properties)</h2>
<p>共有属性请参见其基类[page:Material]和[page:MeshStandardMaterial]。</p>
<h3>[property:Color attenuationColor]</h3>
<p>
The color that white light turns into due to absorption when reaching the attenuation distance. Default is *white* (0xffffff).
</p>
<h3>[property:Float attenuationDistance]</h3>
<p>
Density of the medium given as the average distance that light travels in the medium before interacting with a particle. The value is given in world space units, and must be greater than zero. Default is `Infinity`.
</p>
<h3>[property:Float clearcoat]</h3>
<p>
表示clear coat层的强度,范围从*0.0*到*1.0*m,当需要在表面加一层薄薄的半透明材质的时候,可以使用与clear coat相关的属性,默认为*0.0*;
</p>
<h3>[property:Texture clearcoatMap]</h3>
<p>
这个贴图的红色通道值会与[page:.clearcoat]相乘作为整个clear coat的强度值层,默认为*null*。
</p>
<h3>[property:Texture clearcoatNormalMap]</h3>
<p>用于为clear coat层设置的独立的法线贴图,默认为*null*。</p>
<h3>[property:Vector2 clearcoatNormalScale]</h3>
<p>衡量[page:.clearcoatNormalMap]影响clear coat层多少的值,由*(0,0)*到*(1,1)*,默认为*(1,1)*。</p>
<h3>[property:Float clearcoatRoughness]</h3>
<p>clear coat层的粗糙度,由*0.0*到*1.0*。 默认为*0.0*</p>
<h3>[property:Texture clearcoatRoughnessMap]</h3>
<p>
此纹理的绿色通道值会与[page:.clearcoatRoughness]相乘,用于改变clear coat的粗糙度,默认为*null*
</p>
<h3>[property:Object defines]</h3>
<p> 如下形式的对象:
<code>
{
'STANDARD': ''
'PHYSICAL': '',
};
</code>
[page:WebGLRenderer]使用它来选择shaders。
</p>
<h3>[property:Float ior]</h3>
<p>
为非金属材质所设置的折射率,范围由*1.0*到*2.333*。默认为*1.5*。
<br />
</p>
<h3>[property:Float reflectivity]</h3>
<p>
反射率,由*0.0*到*1.0*。默认为*0.5*, 相当于折射率1.5。
<br />
这模拟了非金属材质的反射率。当[page:MeshStandardMaterial metalness]为*1.0*时,此属性无效。
</p>
<h3>[property:Float sheen]</h3>
<p>
光泽层的强度,范围是*0.0*到*1.0*。默认为*0.0*。
</p>
<h3>[property:Float sheenRoughness]</h3>
<p>
光泽层的粗糙度,由*0.0*到*1.0*。默认值是*1.0*。
</p>
<h3>[property:Texture sheenRoughnessMap]</h3>
<p>
此纹理的透明通道会与[page:.sheenRoughness]相乘,用于改变光泽层的粗糙度,默认为*null*;
</p>
<h3>[property:Color sheenColor]</h3>
<p>
光泽颜色,默认为*0xffffff*白色。
</p>
<h3>[property:Texture sheenColorMap]</h3>
<p>
此纹理的RGB通道会与[page:.sheenColor]光泽颜色相乘,最终作为光泽颜色结果,默认为*null*。
</p>
<h3>[property:Float specularIntensity]</h3>
<p>
用于控制非金属材质高光反射强度的浮点值。漫反射材质对应的值为0。范围从*0.0*到*1.0*。 默认值为*1.0*。
</p>
<h3>[property:Texture specularIntensityMap]</h3>
<p>
此纹理的alpha通道将与[page:.specularIntensity]相乘,用于逐像素地控制高光强度。默认值为*null*。
</p>
<h3>[property:Color specularColor]</h3>
<p>
非金属材质在垂直于法线方向观看时的高光反射颜色。默认值为*0xffffff*,白色。
</p>
<h3>[property:Texture specularColorMap]</h3>
<p>
此纹理的alpha通道将与[page:.specularColor]相乘,用于逐像素地控制高光颜色。默认值为*null*。
</p>
<h3>[property:Float thickness]</h3>
<p>
The thickness of the volume beneath the surface. The value is given in the coordinate space of the mesh. If the value is 0 the material is thin-walled. Otherwise the material is a volume boundary. Default is *0*.
</p>
<h3>[property:Texture thicknessMap]</h3>
<p>
A texture that defines the thickness, stored in the G channel. This will be multiplied by [page:.thickness]. Default is *null*.
</p>
<h3>[property:Float transmission]</h3>
<p>
透光率(或者说透光性),范围从*0.0*到*1.0*。默认值是*0.0*。<br />
很薄的透明或者半透明的塑料、玻璃材质即便在几乎完全透明的情况下仍旧会保留反射的光线,透光性属性用于这种类型的材质。<br />
当透光率不为0的时候, [page:Material.opacity opacity]透明度应设置为*1*.
</p>
<h3>[property:Texture transmissionMap]</h3>
<p>
此纹理的红色通道会与透光性[page:.transmission]相乘最为最终的透光性结果。默认为*null*。
</p>
<h2>方法(Methods)</h2>
<p>共有方法请参见其基类[page:Material] 和[page:MeshStandardMaterial]。</p>
<h2>源码(Source)</h2>
<p>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</p>
</body>
</html>