200字范文,内容丰富有趣,生活中的好帮手!
200字范文 > ThreeJS-纹理贴图大集合

ThreeJS-纹理贴图大集合

时间:2021-02-11 06:57:07

相关推荐

ThreeJS-纹理贴图大集合

目录

什么是纹理?

纹理的常用属性

1.图片纹理贴图

2.透明纹理贴图

3.凹凸贴图

4.法线贴图

5.环境贴图

6.置换贴图(位移贴图)

7.金属贴图

8.粗糙度纹理贴图

9.光照贴图

什么是UV贴图?

什么是纹理?

纹理用来表现物体的细节。理论上可以将物体的每个细节通过建模展示出来,但是这样时间成本和性能成本都太高,因此,将物体的一些细节用纹理来表示。

纹理的常用属性

const doorColorTexture = textureLoader.load('./texture/OIP.jpeg');// 设置纹理偏移doorColorTexture.offset.x = 0.5; //偏移量 x,y 二维方向上的偏移// 设置纹理旋转doorColorTexture.rotation = Math.PI / 4; //逆时针旋转// 设置纹理旋转中心点doorColorTexture.center.set(0.5 , 0.5)// 设置纹理是否重复doorColorTexture.repeat.set(2, 3); //水平重复两次 竖直重复三次// 设置纹理重复的模式doorColorTexture.wrapS = THREE.RepeatWrapping; //水平方向会一直重复到无穷。doorColorTexture.wrapT = THREE.RepeatWrapping; //竖直方向

1.图片纹理贴图

图片纹理直接在物体表面应用图片。可以使用TextureLoader类的load方法来加载纹理。

//加载texture的一个类。 内部使用ImageLoader来加载文件。const textureLoader = new THREE.TextureLoader();const doorColorTexture = textureLoader.load('./textures/door/color.jpg'); //导入图片const material = new THREE.MeshStandardMaterial({map: doorColorTexture, //应用图片纹理});

2.透明纹理贴图

alpha贴图是一张灰度纹理,用于控制整个表面的不透明度。(黑色:完全透明;白色:完全不透明)。 默认值为null。

const doorColorTexture = textureLoader.load('./textures/door/color.jpg'); const doorAplhaTexture = textureLoader.load('./textures/door/alpha.jpg') //黑色为完全透明,白色区域为完全不透明const material = new THREE.MeshStandardMaterial({map: doorColorTexture,// opacity: 0.5, //透明度transparent: true, //设置为允许透明alphaMap: doorAplhaTexture,});

当opacity 属性和 alphaMap 透明纹理同时使用的时候,仅使用纹理的颜色,忽略alpha通道(如果存在)。

3.凹凸贴图

用于创建凹凸贴图的纹理。黑色和白色值映射到与光照相关的感知深度。凹凸实际上不会影响对象的几何形状,只影响光照。如果定义了法线贴图,则将忽略该贴图。

const doorColorTexture = textureLoader.load('./textures/door/color.jpg'); const doorBumpTexture = textureLoader.load('./textures/door/bump.jpg');const material = new THREE.MeshStandardMaterial({map: doorColorTexture,bumpMap: bumpTexture,bumpScale: 0.2});

bumpScale : 凹凸贴图会对材质产生多大影响。典型范围是0-1。默认值为1。

4.法线贴图

用于创建法线贴图的纹理。RGB值会影响每个像素片段的曲面法线,并更改颜色照亮的方式。法线贴图不会改变曲面的实际形状,只会改变光照。

const doorColorTexture = textureLoader.load('./textures/door/color.jpg');const doorNormalTexture = textureLoader.load('./textures/door/normal.jpg') //法线贴图const material = new THREE.MeshStandardMaterial({map: doorColorTexture,normalMap: doorNormalTexture, //法线贴图normalScale: 1,});

normalScale:法线贴图对材质的影响程度。典型范围是0-1。默认值是Vector2设置为(1,1)。

5.环境贴图

该纹理的红色通道用作环境遮挡贴图。默认值为null。aoMap需要第二组UV。

const doorColorTexture = textureLoader.load('./textures/door/color.jpg');const doorAoTexture = textureLoader.load('./textures/door/ambientOcclusion.jpg') //环境遮挡贴图const material = new THREE.MeshStandardMaterial({map: doorColorTexture,aoMap: doorAoTexture, //环境遮挡贴图 但是需要添加第二组UVaoMapIntensity : 1,});const boxGeomatery = new THREE.BoxGeometry(1,1,1);// 设置第二组uvboxGeomatery.setAttribute('uv2', new THREE.BufferAttribute(boxGeomatery.attributes.uv.array, 2))

6.置换贴图(位移贴图)

位移贴图会影响网格顶点的位置,与仅影响材质的光照和阴影的其他贴图不同,移位的顶点可以投射阴影,阻挡其他对象, 以及充当真实的几何体。位移纹理是指:网格的所有顶点被映射为图像中每个像素的值(白色是最高的),并且被重定位。

const doorColorTexture = textureLoader.load('./textures/door/color.jpg');const doorHeightTexture = textureLoader.load('./textures/door/height.jpg') //导入置换贴图 置换需要点const material = new THREE.MeshStandardMaterial({map: doorColorTexture,displacementMap: doorHeightTexture, //设置置换属性 displacementScale: 0.1, //控制最大突出程度});

displacementScale:位移贴图对网格的影响程度(黑色是无位移,白色是最大位移)。如果没有设置位移贴图,则不会应用此值。默认值为1。

7.金属贴图

该纹理的蓝色通道用于改变材质的金属度。

const doorColorTexture = textureLoader.load('./textures/door/color.jpg');const doorMetalnessTexture = textureLoader.load('./textures/door/metalness.jpg') //金属贴图const material = new THREE.MeshStandardMaterial({map: doorColorTexture,metalness: 1, //金属度 0-1 1就是金属 如果设置为1的话,变为金属会完全的发生反光/反射 metalnessMap: doorMetalnessTexture, //金属贴图});

metalness:材质与金属的相似度。非金属材质,如木材或石材,使用0.0,金属使用1.0,通常没有中间值。 默认值为0.0。0.0到1.0之间的值可用于生锈金属的外观。如果还提供了metalnessMap,则两个值相乘。

使用metalness:

使用metalnessMap:

只有金属材质的才会看着有金属光泽~

8.粗糙度纹理贴图

该纹理的绿色通道用于改变材质的粗糙度。

const doorColorTexture = textureLoader.load('./textures/door/color.jpg');const doorRoughnessTexture = textureLoader.load('./textures/door/roughness.jpg') //粗糙贴图 灰度贴图 从 0-1 黑-白const material = new THREE.MeshStandardMaterial({map: doorColorTexture,roughness: 1, //粗糙度为0 就是超级光滑 1就是非常的粗糙 整体roughnessMap: doorRoughnessTexture,});

roughness:材质的粗糙程度。0.0表示平滑的镜面反射,1.0表示完全漫反射。默认值为1.0。如果还提供roughnessMap,则两个值相乘。

使用roughness :

使用 roughnessMap:

9.光照贴图

光照贴图。默认值为null。lightMap需要第二组UV。

const doorColorTexture = textureLoader.load('./textures/door/color.jpg');const doorLightTexture = textureLoader.load('./textures/door/light.jpg') //光照贴图 const material = new THREE.MeshStandardMaterial({map: doorColorTexture,lightMap: doorLightTexture,lightMapIntensity: 1,});

lightMapIntensity:烘焙光的强度。默认值为1。

什么是UV贴图?

这里我就引用这位大佬的帖子了,他讲的更详细~[UV贴图]

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。