threejs (四) 纹理 Texture

橙蚊镜0819

已于 2023-11-17 15:25:52 修改

阅读量508

点赞数

分类专栏： threejs 文章标签： 3d 前端 js

于 2023-11-15 17:29:07 首次发布

本文链接：https://blog.csdn.net/cwjxyp/article/details/134415734

版权

threejs 专栏收录该内容

4 篇文章 1 订阅

订阅专栏

定义：纹理图片（或canvas/video等）映射到物体表面，或者作为反射、折射贴图，也就是物体的皮肤。

1、纹理贴图分类

map：颜色贴图，存储颜色信息
bumpMap：凹凸贴图，性能贴图，也称为高度贴图，性能开销比较大，会移动表面纹理的可见区域，从而实现表面遮挡效果
mormalMap：法线贴图，通过RGB三个分量分别表示向量的xyz三个方向，并且通过图片保留几何体表面的几何细节
aoMap：环境贴图，AO贴图，模拟物体之间所产生的阴影，在不打光的时候增加体积感
roughnessMap：光滑度贴图，该纹理的绿色通道用于改变材质的粗糙度。
alphaMap：透明度贴图，是一张灰度纹理，用于控制整个表面的不透明度。（黑色：完全透明；白色：完全不透明）
lightMap：光照贴图
…

2、纹理贴图原理

在光栅化过程中使用双线性插值计算每个像素的纹理坐标（UV)
在纹素数组中查找纹理坐标（使用最近的或四个最近的线性插值）
使用纹理的颜色作为像素的颜色，或者组合纹理和像素的颜色

3、加载贴图

3.1 使用image加载

	 	const img = new Image();
        const texture = new THREE.Texture(img);
        img.src =
          '/public/textures/Wood_Ceiling_Coffers_003/Wood_Ceiling_Coffers_003_basecolor.jpg';
        img.onload = () => {
          console.log('loaded texture', texture);
          texture.needsUpdate = true; // 加载前纹理为空，加载成功之后需要告诉js更新，下次tick就会重新读取对象
        };

3.2 使用load加载

支持成功失败的回调、但是不支持加载中的回调

		// 跨域 setCrossOrigin('anonymous')
        this.texture = loader.setCrossOrigin('anonymous').load(
          // 资源URL
          '/public/textures/Wood_Ceiling_Coffers_003/Wood_Ceiling_Coffers_003_basecolor.jpg',

          // onLoad回调
          (texture) => {
            texture.needsUpdate = true;
          },

          // 目前暂不支持onProgress的回调
          undefined,

          // onError回调
          function (err) {
            console.error('An error happened.');
          }
        );

3.3 支持加载中回调

const texture = new THREE.TextureLoader()
  .setCrossOrigin('Anonymous') // 设置允许跨域
  .load('/public/textures/Material_1741/basecolor.jpg', // 这里换成了绝对路径
  // onLoad回调
  () => {
    console.log('load');
  },
  // process 回调, r84+ 被弃用
  () => {
    console.log('process');
  },
  // onError回调
  (error) => {
    console.log('error', error);
  },
);

// 使用 loadingManager 监控加载情况
const loadingManager = new THREE.LoadingManager();

loadingManager.onStart = (url, itemsLoaded: Index, itemsTotal: Number) => {
  console.log('start', url, itemsLoaded, itemsTotal);
};
loadingManager.onLoad = () => {
  console.log('loaded');
};
loadingManager.onProgress = (url, itemsLoaded: Index, itemsTotal: Number) => {
  console.log('process', url, itemsLoaded, itemsTotal);
};
loadingManager.onError = (url) => {
  console.log('error', url);
};

const textureLoader = new THREE.TextureLoader(loadingManager);
const texture = textureLoader.load('/public/textures/Material_1741/basecolor.jpg',
  () => {
    console.log('load');
  },
  // process 回调, r84+ 被弃用
  undefined,
  // onError回调
  (error) => {
    console.log('error', error);
  },
);

console.log(texture);

4、物体添加纹理

其他属性都会影响纹理的渲染效果

 const material = new THREE.MeshLambertMaterial({
          color: 0x1890ff,
          map: this.texture, //纹理
          transparent: true,
          opacity: 0.5,
          wireframe: true,
        });

每个面设置不同的贴图

// 每个面设置不同的贴图
        const materials = [];
        for (let i = 0; i < boxGeometry.groups.length; i++) {
          // 纹理贴图
          const texture = this.textureLoader.setCrossOrigin('anonymous').load(
            // 资源URL
            `/public/textures/fullscreen/0${i + 1}.jpg`
          );
          materials.push(
            new THREE.MeshBasicMaterial({
              map: texture,
            })
          );
        }
        const box = new THREE.Mesh(boxGeometry, materials);

一个物体设置多个贴图纹理

const material = new THREE.MeshLambertMaterial({
          map: colorTexture,
          aoMap: aoTexture,
          bumpTMap: bumpTexture,
          displacementMap: bumpTexture,
          normalMap: normalTexture,
          roughnessMap: roughnessTexture,
        });

mipmap：多级渐远纹理 texture.magFilter = THREE.NearestFilter;
优点：
1.质里高:避免了在远距离情况下的采样频率低和数据频率高造成的失真和摩尔纹
2.性能好: 避免了不使用Mipmap下距离远时采样频率低和数据频率高而照成 texture cache命中率不高(相邻pixel采样Texel时uv相差比较大)使性能下降。
缺点：
占用显存，可使用ue的纹理流缓存优化(IO换显存)。
在这里插入图片描述

5、不同的纹理贴图

5.1 AO贴图

const boxMaterial = new THREE.MeshBasicMaterial({
          map: this.texture,
          aoMap: this.aoTexture, //在纹理较暗的地方添加阴影
          aoMapIntensity: 1, //环境遮挡效果的强度。默认值为1。零是不遮挡效果
        });
        
 gui.add(this.box.material, 'aoMapIntensity', 0, 1, 0.1);

在这里插入图片描述

5.2 凹凸贴图

const boxMaterial = new THREE.MeshLambertMaterial({
          map: this.texture,
          // aoMap: this.aoTexture, //在纹理较暗的地方添加阴影
          // aoMapIntensity: 1,
          bumpMap: this.bumpTexture,
          bumpScale: 10,
        });

在这里插入图片描述

5.3 位移贴图

 const boxMaterial = new THREE.MeshLambertMaterial({
          map: this.texture,
          aoMap: this.aoTexture, //在纹理较暗的地方添加阴影
          aoMapIntensity: 1,
          // bumpMap: this.bumpTexture,
          // bumpScale: 10,
          displacementMap: this.bumpTexture,
          displacementBias: 0, //位移贴图在网格顶点上的便宜量
          displacementScale: 0, //位移贴图对网格的影响成都（黑色无位移，白色是最大的位移）
        });

在这里插入图片描述

5.4 法线贴图

对于有高光材质的效果比较明显，不会改变曲面的实际形状，只会改变光照

normalMap: this.normalTexture,
gui.add(this.box.material.normalScale, 'x', 0, 1, 0.1);
gui.add(this.box.material.normalScale, 'y', 0, 1, 0.1);

在这里插入图片描述

5.5 光滑度贴图

0表示平滑的镜面反射，1表示完的漫反射

 roughnessMap: this.roughnessTexture,
 gui.add(this.box.material, 'roughness', 0, 1, 0.1);

在这里插入图片描述

5.6 金属贴图

非金属材质使用0.0，金属材质使用1，中间值经常代表表面生锈

metalnessMap: this.metalTexture,
gui.add(this.box.material, 'metalness', 0, 1, 0.1);

在这里插入图片描述

5.7 环境贴图

环境贴图专用加载器：CubeTextureLoader

const cubeTextureLoader = new THREE.CubeTextureLoader();
        // 左右上下前后
        const envTexture = cubeTextureLoader.load([
          '/public/textures/fullscreen/1.left.jpg',
          '/public/textures/fullscreen/1.right.jpg',
          '/public/textures/fullscreen/1.top.jpg',
          '/public/textures/fullscreen/1.bottom.jpg',
          '/public/textures/fullscreen/1.front.jpg',
          '/public/textures/fullscreen/1.back.jpg',
        ]);

将物体变成金属，降低光滑度贴图，可以看出物体的倒影对应着每一张图片
在这里插入图片描述

5.8高光贴图

 specularTexture: this.specularTexture,
          specular: new THREE.Color(0x00ffff),
          shininess: 50, //亮度

在这里插入图片描述

6、贴图属性

		texture.repeat.set(2, 2); //  可以是负值, 负数会颠倒. 重复值取(-1到0和0到1)范围内，会被裁减
		 // 纹理回环
        // 水平方向 ClampToEdgeWrapping:默认  阵列：RepeatWrapping   镜像：MirroredRepeatWrapping
        // 定义了纹理贴图在水平方向上将如何包裹，在UV映射中对应于U
        texture.wrapS = THREE.RepeatWrapping;
        // 垂直方向
        texture.wrapT = THREE.MirroredRepeatWrapping;
        colorTexture.ClampToEdgeWrapping = 1001; // 边缘拉伸
	    colorTexture.MirroredRepeatWrapping = 1002; // 镜像重复
        // 纹理偏移
        texture.offset = new THREE.Vector2(0.5, 0);
        // 纹理旋转 正值 顺时针
        texture.rotation = Math.PI / 4;
        texture.center.set(0.5, 0.5);
        // 5. 动画
		const tick = () => {
		  colorTexture.offset.x -= 0.02; // 动态改变纹理对象 Texture.offset.x 属性 
		  renderer.render(scene, camera);
		  window.requestAnimationFrame(tick)
		}