three.js -- Textures纹理

纹理是如何放在模型上的？

uv unwrapping（模型展开） 将一个模型展开为二维图形，图形在二维图形上所在的的点就是uv坐标

/* 1、纹理加载流程 */

// 纹理需要加载图片
const image = new Image()
// 创建纹理对象
const texture = new THREE.Texture(image)
// 当图片加载完成告诉纹理对象更新
image.onLoad = () => {
    texture.neddsUpdate = true	
}
// 图片在webpack项目中放在静态文件下
image.src = '/textures/image/color.jpg'

/* 1.1使用更简单的纹理加载器加载纹理 */
const textureLoader = new THREE.TextureLoader()
const texture = texureLoader.load('/textures/image/color.jpg')
// 参数:
texureLoader.load(
  src, // 纹理路径 String
  loadCallBack, // 加载完成 Function
  progressCallBack, // 加载进度 Function
  errorCallBack // 加载失败 Function
)

/* 2、纹理加载完成，需要添加到材质中去 */
const meterial = new THREE.MeshBasicMaterial({ map: texture })

加载管理器

其功能时处理并跟踪已加载和待处理的数据。

// 定义加载管理器
// 主要是可以监听这些数据的加载情况(统一管理加载情况)
const loadingManager = new THREE.LoadingManager()
loadingManager.onStart = () => {}
loadingManager.onLoad = () => {}
loadingManager.onProgress = () => {}
loadingManager.onError = () => {}

// 纹理加载器交给管理器管理(后面的文字加载器，canvas加载器等加载器都可以通过加载管理器管理)
const textureLoader = new THREE.TextureLoader(loadingManager)
const texture = texureLoader.load('/textures/image/color.jpg')
...

纹理的操作

const texture = texureLoader.load('/textures/image/color.jpg')

// 平铺
texture.repeat.x = 2
texture.repeat.y = 3
texture.wrapS = THREE.THREE.RepeatWrapping
texture.wrapT = THREE.THREE.MirroredRepeatWrapping

// 平移
texture.offset.x = 0.5
texture.offset.y = 0.5

// 旋转
texture.rotation = Math.PI / 4
// 旋转中心点居中
texture.center.x = 0.5
texture.center.y = 0.5

// 过滤
texture.magFilter = THREE.NearestFilter 清晰
texture.minFilter = THREE.NearestFilter 过滤渐变

后续还会补充...