Three.js - 纹理(Texture)（七）

纹理

• 简单理解纹理就是一张图片，它是由像素点组成。
• 在three.js一般都是使用在材质上，和配置颜色一样。颜色是材质表面所有的像素都是同一个颜色，纹理是根据配置信息在材质表面显示纹理（贴图）不同位置的像素点。

创建纹理

      // 立体几何
      const boxWidth = 4
      const boxHeight = 4
      const boxDepth = 4
      const geometry = new THREE.BoxGeometry(boxWidth, boxHeight, boxDepth)

      const loader = new THREE.TextureLoader()
      // 基础材质
      const material = new THREE.MeshBasicMaterial({
        map: loader.load( 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.16pic.com%2F00%2F07%2F46%2F16pic_746871_b.jpg'
        )
      })
      // 网格
      const mesh = new THREE.Mesh(geometry, material)
      mesh.position.x = 5
      scene.add(mesh)

• 使用.TextureLoader()加载图片，转化为纹理，通过属性map设置材质纹理。就实现了简单的纹理加载。
• 需要注意.TextureLoader()是异步的，当几何绘制先执行完，几何体是不会有纹理的。

加载纹理方式

• 简单加载。

    const texture = loader.load('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.16pic.com%2F00%2F07%2F46%2F16pic_746871_b.jpg');

• 等待纹理加载完成。loader.load()的第二个参数是个回调函数，当纹理加载完后执行。

      const loader = new THREE.TextureLoader()
      let mesh = null
      loader.load( 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.16pic.com%2F00%2F07%2F46%2F16pic_746871_b.jpg',
        (texture) => {
          // 基础材质
          const material = new THREE.MeshBasicMaterial({
            map: texture
          })
          // 网格
          mesh = new THREE.Mesh(geometry, material)
          mesh.position.x = 5
          scene.add(mesh)
        }
      )

纹理展示配置

• 纹理是可以设置，重复、偏移和旋转。

重复

1. 设置重复的方式需要属性.wrapS水平包裹、.wrapT垂直包裹。对应纹理UV映射中UV。

   // THREE.js 中的常量
   // THREE.ClampToEdgeWrapping 每条边上的最后一个像素无限重复
   // THREE.RepeatWrapping      纹理重复
   // THREE.MirroredRepeatWrapping 在每次重复时将进行镜像
   texture.wrapS = THREE.RepeatWrapping;
   texture.wrapT = THREE.RepeatWrapping;

2. 设置水平和垂直重复的次数是用.repeat。

    // 水平
    texture.repeat.x = 4;
    // 垂直
    texture.repeat.y = 4;

偏移

1. 设置水平和垂直的偏移需要使用.offset。
2. 需要注意这里的1个单位=1个纹理大小，换句话说，0 = 没有偏移，1 = 偏移一个完整的纹理数量。

    // 水平
    texture.offset.x = 0.5;
    // 垂直
    texture.offset.y = 0.5;

旋转

1. 设置纹理的旋转需要两个属性，以弧度为单位的 .rotation 以及设置旋转中心点的.center。
2. .center单位也是1个单位=1个纹理大小。

    // 水平
    texture.center.x = 0.5;
    // 垂直
    texture.center.y = 0.5;
    // 旋转弧度
    texture.rotation = THREE.MathUtils.degToRad(45);

总结

在three.js中纹理是决定物体表面样式的方法。一共有10种纹理，它们的基础用法基本相同。后面进入深入学习后，会慢慢介绍其他纹理的作用。