该材质使用基于非物理的Lambertian模型来计算反射率。可以用来创建暗淡的并不光亮的表面,该材质非常易用,而且会与场景中的光源产生反应。
材质的颜色(Color),默认值为白色 (0xffffff)。
- const material = new THREE.MeshLambertMaterial({
- color: 0xffffff;
- })
alpha贴图是一种灰度纹理,用于控制整个表面的不透明度(黑色:完全透明;白色:完全不透明)。默认值为null。
- // 1.创建透明度贴图-纹理对象
- const alphaTexture = new THREE.TextureLoader().load('../image/opacity.jpg');
- alphaTexture.colorSpace = THREE.SRGBColorSpace;
-
- const material = new THREE.MeshLambertMaterial({
- alphaMap: alphaTexture, //2.传入透明纹理对象
- transparent: true, // 3. 开启透明材质
- opacity: 0.2, // 透明度
- })
该纹理的红色通道用作环境遮挡贴图。默认值为null。aoMap需要第二组UVs,因此将忽略repeat和offset纹理属性。
环境遮挡效果的强度。默认值为1。零是不遮挡效果
- // 1. 环境遮挡贴图
- const aoTexture = new THREE.TextureLoader().load('../image/ambientOcclusion.jpg');
- aoTexture.colorSpace = THREE.SRGBColorSpace;
-
- const material = new THREE.MeshLambertMaterial({
- aoMap: aoTexture, // 2. 环境遮挡贴图
- aoMapIntensity: 1, //( 0-1 )范围
- })
材质的放射(光)颜色,基本上是不受其他光照影响的固有颜色。默认为黑色。
设置放射(发光)贴图。默认值为null。放射贴图颜色由放射颜色和强度所调节。 如果你有一个放射贴图,请务必将放射颜色设置为黑色以外的其他颜色。
放射光强度。调节发光颜色。默认为1。
环境贴图。默认值为null。
- // 1. 使用 CubeTextureLoader (立方体纹理加载器)- 6 个面的图片,得到纹理对象
- const cubeTL = new THREE.CubeTextureLoader();
- const cubeTexture = cubeTL.setPath("../image/sky/").load(['px.jpg', 'nx.jpg', 'py.jpg', 'ny.jpg', 'pz.jpg', 'nz.jpg']);
-
- // 1. 替换网格材质的构造函数为 MeshStandardMaterial
- const material = new THREE.MeshStandardMaterial({
- // 2. 设置给物体的 envMap 环境贴图属性
- envMap: cubeTexture,
- roughness: 0, // 粗糙度设置(0 光滑, 1 粗糙)
- metalness: 1, // 金属度(光反射的光泽程度,1 是最高)
- })
- // 把几何体和材质添加到网格中
- const mesh = new THREE.Mesh(geometry, material)
- scene.add(mesh)
用于检查此类或派生类是否为Lambert网格材质。默认值为 true。
因为其通常用在内部优化,所以不应该更改该属性值。
光照贴图。默认值为null。lightMap需要第二组UVs,因此将忽略repeat和offset纹理属性。
烘焙光的强度。默认值为1。
颜色贴图。默认为null。
- // 图片转成纹理对象,设置给材质作为贴图
- const mapTexture = new THREE.TextureLoader().load('../image/basecolor.jpg');
-
- const material = new THREE.MeshLambertMaterial({
- map: mapTexture, // 颜色贴图
- })
定义是否使用morphNormals。设置为true可将morphNormal属性从Geometry传递到shader。默认值为false。
定义材质是否使用morphTargets。默认值为false。
环境贴图对表面的影响程度; 见.combine。默认值为1,有效范围介于0(无反射)和1(完全反射)之间。
空气的折射率(IOR)(约为1)除以材质的折射率。它与环境映射模式THREE.CubeRefractionMapping 和THREE.EquirectangularRefractionMapping一起使用。 折射率不应超过1。默认值为0.98。
材质是否使用蒙皮。默认值为false。
材质使用的高光贴图。默认值为null。
将几何体渲染为线框。默认值为false(即渲染为平面多边形)。
定义线两端的外观。可选值为 'butt','round' 和 'square'。默认为'round'。
该材质使用非物理的Blinn-Phong模型来计算反射率。
Talpha贴图是一种灰度纹理,用于控制整个表面的不透明度(黑色:完全透明;白色:完全不透明)。默认值为null。
- // 1.创建透明度贴图-纹理对象
- const alphaTexture = new THREE.TextureLoader().load('../image/opacity.jpg');
- alphaTexture.colorSpace = THREE.SRGBColorSpace;
-
- // 1. 替换网格材质的构造函数为 MeshPhongMaterial
- const material = new THREE.MeshPhongMaterial({
- alphaMap: alphaTexture, //2.传入透明纹理对象
- transparent: true, // 3. 开启透明材质
- opacity: 0.2, // 透明度
-
- })
该纹理的红色通道用作环境遮挡贴图。默认值为null。aoMap需要第二组UVs,因此将忽略repeat和offset属性。
环境遮挡效果的强度。默认值为1。零是不遮挡效果。
- // 1. 环境遮挡贴图
- const aoTexture = new THREE.TextureLoader().load('../image/ambientOcclusion.jpg');
- aoTexture.colorSpace = THREE.SRGBColorSpace;
-
- const material = new THREE.MeshPhongMaterial({
- aoMap: aoTexture, // 2. 环境遮挡贴图
- aoMapIntensity: 1, //( 0-1 )范围
- })
用于创建凹凸贴图的纹理。黑色和白色值映射到与光照相关的感知深度。凹凸实际上不会影响对象的几何形状,只影响光照。如果定义了法线贴图,则将忽略该贴图。
凹凸贴图会对材质产生多大影响。典型范围是0-1。默认值为1。
材质的颜色(Color),默认值为白色 (0xffffff)。
如何将表面颜色的结果与环境贴图(如果有)结合起来。
选项为THREE.Multiply(默认值),THREE.MixOperation, THREE.AddOperation。如果选择多个,则使用.reflectivity在两种颜色之间进行混合。
位移贴图会影响网格顶点的位置,与仅影响材质的光照和阴影的其他贴图不同,移位的顶点可以投射阴影,阻挡其他对象, 以及充当真实的几何体。
位移贴图对网格的影响程度(黑色是无位移,白色是最大位移)。如果没有设置位移贴图,则不会应用此值。默认值为1。
位移贴图在网格顶点上的偏移量。如果没有设置位移贴图,则不会应用此值。默认值为0。
- // 创建位移贴图纹理对象
- const displacementTexture = new THREE.TextureLoader().load('../image/displace_height.jpg')
- displacementTexture.colorSpace = THREE.SRGBColorSpace
-
- // 1. 替换网格材质的构造函数为 MeshPhongMaterial
- const material = new THREE.MeshPhongMaterial({
- displacementMap: displacementTexture, // 位移贴图
- displacementScale: 1, // 位移范围(0-1)
- })
材质的放射(光)颜色,基本上是不受其他光照影响的固有颜色。默认为黑色。
设置放射(发光)贴图。默认值为null。放射贴图颜色由放射颜色和强度所调节。 如果你有一个放射贴图,请务必将放射颜色设置为黑色以外的其他颜色。
放射光强度。调节发光颜色。默认为1。
环境贴图。默认值为null。
用于检查此类或派生类是否为Phong网格材质。默认值为 true。
因为其通常用在内部优化,所以不应该更改该属性值。
光照贴图。默认值为null。lightMap需要第二组UVs,因此将忽略repeat和offset纹理属性。
烘焙光的强度。默认值为1。
颜色贴图。默认为null。纹理贴图颜色由漫反射颜色.color调节。
定义是否使用morphNormals。设置为true可将morphNormal属性从Geometry传递到shader。默认值为false。
定义材质是否使用morphTargets。默认值为false。
用于创建法线贴图的纹理。RGB值会影响每个像素片段的曲面法线,并更改颜色照亮的方式。法线贴图不会改变曲面的实际形状,只会改变光照。
法线贴图的类型。
选项为THREE.TangentSpaceNormalMap(默认)和THREE.ObjectSpaceNormalMap。
法线贴图对材质的影响程度。典型范围是0-1。默认值是Vector2设置为(1,1)。
- // 加载法线贴图纹理对象
- const normalTexture = new THREE.TextureLoader().load('../image/normal.jpg')
- normalTexture.colorSpace = THREE.SRGBColorSpace
-
- const material = new THREE.MeshPhongMaterial({
- normalMap: normalTexture, // 设置材质的 normalMap 属性
- })
-
环境贴图对表面的影响程度; 见.combine。默认值为1,有效范围介于0(无反射)和1(完全反射)之间。
空气的折射率(IOR)(约为1)除以材质的折射率。它与环境映射模式THREE.CubeRefractionMapping 和THREE.EquirectangularRefractionMapping一起使用。 折射率不应超过1。默认值为0.98。
.specular高亮的程度,越高的值越闪亮。默认值为 30。
材质是否使用蒙皮。默认值为false。
材质的高光颜色。默认值为0x111111(深灰色)的颜色Color。
这定义了材质的光泽度和光泽的颜色。
镜面反射贴图值会影响镜面高光以及环境贴图对表面的影响程度。默认值为null。
- function initBase () {
- //创建几何体
- const geometry = new THREE.SphereGeometry(1,32,16);
- // 图片转成纹理对象,设置给材质作为贴图
- const mapTexture = new THREE.TextureLoader().load('../image/basecolor.jpg');
- // 1.创建透明度贴图-纹理对象
- const alphaTexture = new THREE.TextureLoader().load('../image/opacity.jpg');
- alphaTexture.colorSpace = THREE.SRGBColorSpace;
-
- // 1. 环境遮挡贴图
- const aoTexture = new THREE.TextureLoader().load('../image/ambientOcclusion.jpg');
- aoTexture.colorSpace = THREE.SRGBColorSpace;
-
- // 1. 替换网格材质的构造函数为 MeshPhongMaterial
- const material = new THREE.MeshPhongMaterial({
- map: mapTexture, // 颜色贴图
- aoMap: aoTexture, // 2. 环境遮挡贴图(把透明度注释掉,为了看到效果)
- })
- // 把几何体和材质添加到网格中
- const mesh = new THREE.Mesh(geometry, material)
- scene.add(mesh)
- }
-
- // 创建光源
- function createLigit () {
- const ambientLight = new THREE.AmbientLight(0xffffff, 1);
- scene.add(ambientLight)
-
- // 2. 添加平行光 DirectionalLight 照射物体(产生高光-光斑)
- const direction = new THREE.DirectionalLight(0xff0000, 1);
- direction.position.set(10,12,10);
- scene.add(direction)
- }
一种基于物理的标准材质,使用Metallic-Roughness工作流程
alpha贴图是一种灰度纹理,用于控制整个表面的不透明度(黑色:完全透明;白色:完全不透明)。默认值为null。
该纹理的红色通道用作环境遮挡贴图。默认值为null。aoMap需要第二组UVs,因此将忽略repeat和offset属性。
环境遮挡效果的强度。默认值为1。零是不遮挡效果。
用于创建凹凸贴图的纹理。黑色和白色值映射到与光照相关的感知深度。凹凸实际上不会影响对象的几何形状,只影响光照。如果定义了法线贴图,则将忽略该贴图。
凹凸贴图会对材质产生多大影响。典型范围是0-1。默认值为1。
材质的颜色(Color),默认值为白色 (0xffffff)。
如下形式的对象: { 'STANDARD': '' };
WebGLRenderer使用它来选择shaders。
位移贴图会影响网格顶点的位置,与仅影响材质的光照和阴影的其他贴图不同,移位的顶点可以投射阴影,阻挡其他对象, 以及充当真实的几何体。
位移贴图对网格的影响程度(黑色是无位移,白色是最大位移)。如果没有设置位移贴图,则不会应用此值。默认值为1。
位移贴图在网格顶点上的偏移量。如果没有设置位移贴图,则不会应用此值。默认值为0。
材质的放射(光)颜色,基本上是不受其他光照影响的固有颜色。默认为黑色。
设置放射(发光)贴图。默认值为null。
放射光强度。调节发光颜色。默认为1。
环境贴图。默认值为null。
通过乘以环境贴图的颜色来缩放环境贴图的效果。
用于检查此类或派生类是否为标准网格材质。默认值为 true。
因为其通常用在内部优化,所以不应该更改该属性值。
光照贴图。默认值为null。lightMap需要第二组UVs,因此将忽略repeat和offset纹理属性。
烘焙光的强度。默认值为1。
颜色贴图。默认为null。纹理贴图颜色由漫反射颜色.color调节。
材质与金属的相似度。非金属材质,如木材或石材,使用0.0,金属使用1.0,通常没有中间值。 默认值为0.5。0.0到1.0之间的值可用于生锈金属的外观。
该纹理的蓝色通道用于改变材质的金属度。
定义是否使用morphNormals。设置为true可将morphNormal属性从Geometry传递到shader。默认值为false。
定义材质是否使用morphTargets。默认值为false。
用于创建法线贴图的纹理。RGB值会影响每个像素片段的曲面法线,并更改颜色照亮的方式。法线贴图不会改变曲面的实际形状,只会改变光照。
法线贴图的类型。
选项为THREE.TangentSpaceNormalMap(默认)和THREE.ObjectSpaceNormalMap。
法线贴图对材质的影响程度。典型范围是0-1。默认值是Vector2设置为(1,1)。
空气的折射率(IOR)(约为1)除以材质的折射率。它与环境映射模式THREE.CubeRefractionMapping 和THREE.EquirectangularRefractionMapping一起使用。 折射率不应超过1。默认值为0.98。
材质的粗糙程度。0.0表示平滑的镜面反射,1.0表示完全漫反射。默认值为0.5。如果还提供roughnessMap,则两个值相乘。
该纹理的绿色通道用于改变材质的粗糙度。
材质是否使用蒙皮。默认值为false。
- function initBase () {
- const geometry = new THREE.SphereGeometry(1, 32, 16)
- // 1. 使用 CubeTextureLoader (立方体纹理加载器)- 6 个面的图片,得到纹理对象
- const cubeTL = new THREE.CubeTextureLoader();
- const cubeTexture = cubeTL.setPath("../image/sky/").load(['px.jpg', 'nx.jpg', 'py.jpg', 'ny.jpg', 'pz.jpg', 'nz.jpg']);
-
- // 1. 替换网格材质的构造函数为 MeshStandardMaterial
- const material = new THREE.MeshStandardMaterial({
- // 2. 设置给物体的 envMap 环境贴图属性
- envMap: cubeTexture,
- roughness: 0, // 粗糙度设置(0 光滑, 1 粗糙)
- metalness: 1, // 金属度(光反射的光泽程度,1 是最高)
- })
- // 把几何体和材质添加到网格中
- const mesh = new THREE.Mesh(geometry, material)
- scene.add(mesh)
- }
用于定义材质外观的对象,具有一个或多个属性
alpha贴图是一种灰度纹理,用于控制整个表面的不透明度(黑色:完全透明;白色:完全不透明)。默认值为null。
仅使用纹理的颜色,忽略alpha通道(如果存在)。对于RGB和RGBA纹理,WebGL渲染器在采样此纹理时将使用绿色通道, 因为在DXT压缩和未压缩RGB 565格式中为绿色提供了额外的精度。Luminance-only以及luminance/alpha纹理也仍然有效。
该纹理的红色通道用作环境遮挡贴图。默认值为null。aoMap需要第二组UVs,因此将忽略repeat和offset属性。
环境遮挡效果的强度。默认值为1。零是不遮挡效果。
用于创建凹凸贴图的纹理。黑色和白色值映射到与光照相关的感知深度。凹凸实际上不会影响对象的几何形状,只影响光照。如果定义了法线贴图,则将忽略该贴图。
凹凸贴图会对材质产生多大影响。典型范围是0-1。默认值为1。
材质的颜色(Color),默认值为白色 (0xffffff)。
如下形式的对象: { 'STANDARD': '' };
WebGLRenderer使用它来选择shaders。
位移贴图会影响网格顶点的位置,与仅影响材质的光照和阴影的其他贴图不同,移位的顶点可以投射阴影,阻挡其他对象, 以及充当真实的几何体。位移纹理是指:网格的所有顶点被映射为图像中每个像素的值(白色是最高的),并且被重定位。
位移贴图对网格的影响程度(黑色是无位移,白色是最大位移)。如果没有设置位移贴图,则不会应用此值。默认值为1。
位移贴图在网格顶点上的偏移量。如果没有设置位移贴图,则不会应用此值。默认值为0。
材质的放射(光)颜色,基本上是不受其他光照影响的固有颜色。默认为黑色。
设置放射(发光)贴图。默认值为null。放射贴图颜色由放射颜色和强度所调节。 如果你有一个放射贴图,请务必将放射颜色设置为黑色以外的其他颜色。
放射光强度。调节发光颜色。默认为1。
环境贴图。默认值为null。
通过乘以环境贴图的颜色来缩放环境贴图的效果。
用于检查此类或派生类是否为标准网格材质。默认值为 true。
因为其通常用在内部优化,所以不应该更改该属性值。
光照贴图。默认值为null。lightMap需要第二组UVs,因此将忽略repeat和offset纹理属性。
烘焙光的强度。默认值为1。
颜色贴图。默认为null。纹理贴图颜色由漫反射颜色.color调节。
材质与金属的相似度。非金属材质,如木材或石材,使用0.0,金属使用1.0,通常没有中间值。 默认值为0.5。0.0到1.0之间的值可用于生锈金属的外观。如果还提供了metalnessMap,则两个值相乘。
该纹理的蓝色通道用于改变材质的金属度。
定义是否使用morphNormals。设置为true可将morphNormal属性从Geometry传递到shader。默认值为false。
定义材质是否使用morphTargets。默认值为false。
用于创建法线贴图的纹理。RGB值会影响每个像素片段的曲面法线,并更改颜色照亮的方式。法线贴图不会改变曲面的实际形状,只会改变光照。
法线贴图的类型。
选项为THREE.TangentSpaceNormalMap(默认)和THREE.ObjectSpaceNormalMap。
法线贴图对材质的影响程度。典型范围是0-1。默认值是Vector2设置为(1,1)。
空气的折射率(IOR)(约为1)除以材质的折射率。它与环境映射模式THREE.CubeRefractionMapping 和THREE.EquirectangularRefractionMapping一起使用。 折射率不应超过1。默认值为0.98。
材质的粗糙程度。0.0表示平滑的镜面反射,1.0表示完全漫反射。默认值为0.5。如果还提供roughnessMap,则两个值相乘。
该纹理的绿色通道用于改变材质的粗糙度。
材质是否使用蒙皮。默认值为false。
将几何体渲染为线框。默认值为false(即渲染为平面多边形)。
定义线两端的外观。可选值为 'butt','round' 和 'square'。默认为'round'。
定义线连接节点的样式。可选值为 'round', 'bevel' 和 'miter'。默认值为 'round'。
控制线框宽度。默认值为1。
- // 目标:物理网格材质-清漆度
- // 物理网格材质:在标准网格材质基础上,扩展了更高级的渲染属性
- // 例如:清漆度(薄薄的膜,模拟雨水打湿表面的效果)
- // 使用:
- // 1. 设置清漆度
- // 2. 设置清漆度的粗糙度
- function initBase () {
- const geometry = new THREE.SphereGeometry(1, 32, 16)
- // 1. 使用 CubeTextureLoader (立方体纹理加载器)- 6 个面的图片,得到纹理对象
- const cubeTL = new THREE.CubeTextureLoader();
- const cubeTexture = cubeTL.setPath("../image/sky/").load(['px.jpg', 'nx.jpg', 'py.jpg', 'ny.jpg', 'pz.jpg', 'nz.jpg']);
-
- // 1. 替换网格材质的构造函数为 MeshPhysicalMaterial
- const material = new THREE.MeshPhysicalMaterial({
- // 2. 设置给物体的 envMap 环境贴图属性
- envMap: cubeTexture,
- roughness: 0, // 粗糙度设置(0 光滑, 1 粗糙)
- metalness: 1, // 金属度(光反射的光泽程度,1 是最高)
- // 1. 设置清漆度(0 - 1)
- clearcoat: 1,
- // 2. 设置清漆度的粗糙度(0 - 1)
- clearcoatRoughness: 0,
- })
- // 把几何体和材质添加到网格中
- const mesh = new THREE.Mesh(geometry, material);
- scene.add(mesh);
- // 补充:使用 GUI 工具调整查看具体效果
- const gui = new GUI();
- gui.add(material, 'clearcoat', 0, 1, 0.1);
- gui.add(material, 'clearcoatRoughness', 0, 1, 0.1);
-
- scene.background = cubeTexture;
- }