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偏移的相关数据,欢迎沟通!!!



版权声明:本文为Kreme原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
THE END
< <上一篇
下一篇>>