THREEJS – 利用UV偏移模拟传送带运动

在制作产线动画的过程中，避免不了实现传送带的运动，实现的方式有很多，这里我给大家介绍一种最简单真实的运动方式：利用贴图进行UV偏移。

首先，我们需要知道贴图的路径，以及需要设定运动的目标模型，将模型的材质进行复制和赋值，代码如下：

/**
 * 加载传送带材质
 * @param {*} model ：模型
 * @param {*} picPath ：贴图路径
 */
function loadTexture(model, picPath) {
    let modelMesh = null;
    let modelMeshState = false;
    new THREE.TextureLoader().load(picPath, function (texture) {
        texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
        texture.anisotropy = renderer.capabilities.getMaxAnisotropy(); // anisotropy： 沿通过具有最高纹理像素密度的像素的坐标轴取样的数量。默认情况下，此值为1.较高的值会产生比基本mipmap更少的模糊结果，但需要使用更多纹理样本。使用renderer.getMaxAnisotropy()来查找GPU的最大有效各向异性值; 这个值通常是2的幂
        // 通过纹理生成材质
        let material = new THREE.MeshBasicMaterial({
            map: texture
        });
        modelMesh = new THREE.Mesh(model.geometry, material);

        model.traverse(function (child) {
            if (child.isMesh) {
                child.material = material;
            }
        });
        updateUvTransform(modelMesh, modelMeshState); // 传入目标模型，以及运动方向
    });
}

当我们加载完目标模型的材质后，就是将贴图运动起来了：

/**
 * 传送带运动
 * @param {*} modelMesh ：材质信息
 * @param {*} state ：运动方向 true为正向/false为负向
 */
function updateUvTransform(modelMesh, state) {
    let texture = modelMesh.material.map;
    texture.repeat.set(2, 2);
    let offset = 0;
    setInterval(function () {
        if (!state) {
            offset += 0.02; // 偏移的方向和速度
        } else {
            offset -= 0.02; // 偏移的方向和速度
        }
        texture.offset.set(0, offset);
    }, 100);
    render(); // 渲染
}

可以根据自己的实际需要，更改UV偏移的相关数据，欢迎沟通！！！