three.js - Textures

• TexureLoader 纹理加载器

  • a TextureLoader can load multiple textures
  • we can send 3 functions after the path(onProgress暂不支持)

  // 纹理加载器
  const textureLoader = new THREE.TextureLoader()
  // 纹理 map
  const texture = textureLoader.load('/imgs/door.jpeg', 
    () => {
      console.log('load'); // when the image loaded successFully
    }, 
    undefined,
    () => {
      console.log('error'); // if something went wrong
  })
  // Cube
  const geometry = new THREE.BoxGeometry(1,1,1,1,1,1) 
  const material = new THREE.MeshBasicMaterial({
    map: texture
  })
  const mesh = new THREE.Mesh(geometry, material)
  scene.add(mesh)

• LoadingManager 加载器管理器

  • 当有很多纹理时，需要进行加载管理

const loadingManager = new THREE.LoadingManager()
// 回调函数
loadingManager.onStart = () => {
  console.log('loading started');
}
loadingManager.onLoad = () => {
  console.log('loading load');
}
loadingManager.onProgress = () => {
  console.log('loading progressing');
}
loadingManager.onError = () => {
  console.log('loading error');
}

• UV Wrapping

  • the texture is being stretched or squeezed in different ways to cover the geometry
  • 展开的折纸或糖纸：it's like unwrapping an origami or a candy wrap to make it flat
  • each vertex will have a 2D coordinate on a flat plane(usually a square)

• Texture

  • repeat

  // 纹理加载器
  const textureLoader = new THREE.TextureLoader()
  // 纹理 map   
  const texture = textureLoader.load('/imgs/door.jpeg')
  // 分别在UV方向上重复2次和3次
  // 结果是纹理贴图没有按照设置的次数重复，而是边缘的像素被拉伸了
  texture.repeat.x = 2
  texture.repeat.y = 3
  

  // 可以使用 wrap mode 解决上述问题
  texture.repeat.x = 2
  texture.repeat.y = 3
  texture.wrapS = THREE.RepeatWrapping
  texture.wrapT = THREE.RepeatWrapping
  

  // 还有一种镜像的repeat方式
  texture.repeat.x = 2
  texture.repeat.y = 3
  texture.wrapS = THREE.MirroredRepeatWrapping
  texture.wrapT = THREE.MirroredRepeatWrapping
  

  • offset

  texture.offset.x = 0.5
  texture.offset.y = 0.5
  

  • rotation

  // 去除偏移、repeat等操作，对一个正方形只设置texture旋转，会发现默认的旋转的中心点是左下角
  texture.rotation = Math.PI * 0.25
  

  // 修改旋转的中心点
  texture.rotation = Math.PI * 0.25
  texture.center.x = 0.5  texture.center.y = 0.5