材质(material)更多的是表达一个物体表面的无力特性和一些简单的外观颜色
纹理(Texture)则专门来设置物体表面贴合的彩色图片,具体做法是:
- 使用纹理加载器 TextureLoader 加载外部图片(jpg 或者 png)
- 通过设置物体的 .map 属性, 将加载得到的外部图片贴合在物体表面
纹理加载器的简单事例代码
const loader = new Three.TextureLoader()
const material = new Three.MeshBasicMaterial({
map: loader.load('xxx/xx.jpg') // 通过map 属性引入图片
})
补充 :
- 在汉语词典中, 纹最初指 乌龟壳上的纹路, 理最初指 上头上的纹路和细腻程度
- 在物理中, 纹理指物体表面凸不平的沟纹
- 在threejs 中 纹理指物体表面上的彩色图案
实现方式:
- 创建一个纹理加载器 const loader = new Three.TextureLoader()
- 创建一个 材质, 材质 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) })) })