如何在Panolens全景切换时添加缩放渐隐的漫游过渡动画

代码不生效的核心原因 #

• 你修改的是Infospot父容器的缩放，而非当前显示的全景球体对象的属性，自然不会触发全景的放大效果
• TWEEN动画库需要在渲染帧循环中持续调用TWEEN.update()才能执行动画，你没加这步逻辑所以动画完全不会运行
• 缩放参数设置不合理：x设为-1会导致全景水平翻转，不属于穿行效果的必要配置
• 缺少渐隐效果的透明度属性控制，只做了缩放不符合需求

正确实现步骤 #

1. 首先在渲染循环中绑定TWEEN的更新逻辑，直接复用Panolens自带的render事件即可：

viewer.addEventListener('render', () => {
    TWEEN.update()
})

2. 重写Infospot点击事件，直接控制当前激活全景的缩放和透明度属性：

myInfospot.addEventListener('click', function (e) {
    this.hide()
    // 获取当前正在显示的全景对象
    const currentPanorama = viewer.getPanorama()
    // 重置当前全景的初始属性，开启透明通道
    currentPanorama.material.opacity = 1
    currentPanorama.scale.set(1,1,1)
    currentPanorama.material.transparent = true

    // 并行执行放大+渐隐动画
    new TWEEN.Tween(currentPanorama.scale)
        .to({x: 2, y: 2, z: 2}, 500) // 放大2倍模拟穿行靠近效果
        .easing(TWEEN.Easing.Exponential.Out)
        .start()

    new TWEEN.Tween(currentPanorama.material)
        .to({opacity: 0}, 500)
        .easing(TWEEN.Easing.Exponential.Out)
        .onComplete(() => {
            // 动画结束切换全景
            viewer.setPanorama(targetPanorama)
            // 重置旧全景属性避免下次显示异常
            currentPanorama.material.opacity = 1
            currentPanorama.scale.set(1,1,1)
        })
        .start()
}.bind(myInfospot))

3. 可选：新增新全景的渐入效果，提升过渡流畅度

viewer.addEventListener('panolens-viewer-handler', (e) => {
    if (e.detail.method === 'setPanorama') {
        const newPanorama = e.detail.args[0]
        newPanorama.material.transparent = true
        newPanorama.material.opacity = 0
        new TWEEN.Tween(newPanorama.material)
            .to({opacity: 1}, 300)
            .easing(TWEEN.Easing.Exponential.In)
            .start()
    }
})

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