Three.js(八)——Textures (纹理)

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第9天，点击查看活动详情 >>

什么是纹理

简单来说，纹理就是覆盖几何体表面的图像。不同的纹理类型具有不同的效果。

加载纹理

一般写法

// 一般写法：
const image = new Image();
const texture = new THREE.Texture(image);
image.onload = () => {
    texture.needsUpdate = true;
};
image.src = "./img/111.jpg";

纹理加载器TextureLoader

// 初始化一个纹理加载器
const textureLoader = new THREE.TextureLoader(loadingManager);
// 用.load()加载纹理贴图
const colorTexture = textureLoader.load("./img/checkerboard-8x8.png");
// 最后在材质中加载纹理，在Material的map属性中
const material = new THREE.MeshBasicMaterial({ map: colorTexture });

.load()函数中，图片路径后面还可以添加三个回调函数，如下：

const colorTexture = textureLoader.load(
    '/textures/door/color.jpg',
    ()=>{
        //加载完成时将调用
        console.log('load');
    },
    ()=>{
    //加载过程中进行调用(一般不会用到)
        console.log('progress');
    },
    ()=>{
    //加载出错时调用
        console.log('error');
    }
);

加载管理器LoadingManager

纹理加载器LoadingManager：其功能是处理并跟踪已加载和待处理的数据。刚才我们只用了一种纹理加载器加载了一个纹理，但如果后面我们再加载一些其他的纹理比如手机纹理、墙面纹理等等许多纹理，这时可能你想要知道所有这些纹理的全局加载进度或者当全部纹理加载完成时有消息提示，因此可以使用LoadingManager使这些加载事件相互关联.

加载管理器的属性

1. onStart — 此函数在加载开始时被调用。
2. onLoad — 所有的项目加载完成后将调用此函数。
3. onProgress — 此方法加载每一个项，加载完成时进行调用。
4. onError — 此方法将在任意项加载错误时，进行调用。

const loadingManager = new THREE.LoadingManager();
loadingManager.onStart = () => {
    console.log("onStart");
};
loadingManager.onLoaded = () => {
    console.log("onLoaded");
};
loadingManager.onProgress = () => {
    console.log("onProgress");
};
loadingManager.onError = () => {
    console.log("onError");
};
const textureLoader = new THREE.TextureLoader(loadingManager);

纹理文件的数据

纹理支持透明度，但jpg文件不支持，因此如果需要有透明度的图片最好使用png文件。
如果使用的是普通纹理，希望得到精确的值，那就不应该用有损压缩文件，还是最好使用png文件。