Three.js 基础之纹理

材质（material）更多的是表达一个物体表面的无力特性和一些简单的外观颜色

纹理（Texture）则专门来设置物体表面贴合的彩色图片，具体做法是：

1. 使用纹理加载器 TextureLoader 加载外部图片（jpg 或者 png）
2. 通过设置物体的 .map 属性， 将加载得到的外部图片贴合在物体表面

纹理加载器的简单事例代码

const loader = new Three.TextureLoader()

const material = new Three.MeshBasicMaterial({
    map: loader.load('xxx/xx.jpg')    // 通过map 属性引入图片
}) 

补充 ：

1. 在汉语词典中， 纹最初指 乌龟壳上的纹路， 理最初指 上头上的纹路和细腻程度
2. 在物理中， 纹理指物体表面凸不平的沟纹
3. 在threejs 中 纹理指物体表面上的彩色图案

实现方式：

1.  创建一个纹理加载器  const  loader  = new   Three.TextureLoader()
2. 创建一个 材质， 材质 map 的属性值为 纹理加载器加载的图片资源

const  material  = new  Three.MeshBasicMaterial({
    map: loader.load(imgSrc)
})

// 如果是多个图片
const loader = new Three.Texture()
const imgSrcArr = [imgSrc0, imgSrc1, imgSrc2, imgSrc3, imgSrc4, imgSrc5]
// 创建一组材质， 每个材质对应立方体每个面所用到的材质
const materialArr： Three.MeshBasicMaterial[] = []
imgSrcArr.forEach((src) => {
    materialArr.push(new Three.MeshBasicMaterial({
        map: loader.load(src)
    }))
})