Three.js中修改displacementMap的displacementScale时如何添加过渡效果

你遇到的跳变问题是因为每秒直接为displacementScale赋值新随机值，要实现平滑过渡可通过逐帧插值缓动逻辑实现，无需额外依赖，修改后的完整代码如下：

const planeGeo = new THREE.PlaneBufferGeometry(10, 10, 65, 65)
const planeMaterial = new THREE.MeshStandardMaterial({
    color: 'gray',
    map: texture,
    displacementMap: clouds,
    displacementScale: 1.5,
    // 添加alpha map以消除硬边缘
    alphaMap: alpha,
    transparent: true,
    depthTest: false,
})
const planeMesh = new THREE.Mesh(planeGeo, planeMaterial)
scene.add(planeMesh)
planeMesh.rotation.x = 200

// 新增：存储位移缩放目标值、缓动系数（取值0-1，数值越小过渡越慢）
let targetDisplacementScale = planeMesh.material.displacementScale
const easeFactor = 0.08

const animateDisplacementMap = () => {
    // 仅更新目标值，不直接修改材质属性
    targetDisplacementScale = .3 + Math.floor(Math.random() * 550) * .003
    setTimeout(() => {
        animateDisplacementMap()
    }, 1000);
}
animateDisplacementMap()

const animate = () => {
    // 新增：每帧插值更新displacementScale
    planeMesh.material.displacementScale += (targetDisplacementScale - planeMesh.material.displacementScale) * easeFactor
    // 渲染
    renderer.render(scene, camera)
    window.requestAnimationFrame(animate)
}
animate()

上述实现采用指数缓动逻辑，每帧让当前值向目标值移动固定比例的差值，过渡自然且性能开销极低。如果需要自定义缓动曲线（如弹性、减速效果），也可以使用GSAP等补间动画库简化实现：

// 引入GSAP后只需修改animateDisplacementMap逻辑即可
const animateDisplacementMap = () => {
    const newScale = .3 + Math.floor(Math.random() * 550) * .003
    gsap.to(planeMesh.material, {
        displacementScale: newScale,
        duration: 0.8, // 过渡时长，单位秒
        ease: "power2.out" // 缓动曲线，可按需调整
    })
    setTimeout(() => {
        animateDisplacementMap()
    }, 1000);
}

内容的提问来源于stack exchange，提问作者SaboSuke