最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

reactjs - How to prevent animations from resetting when scrolling in Three.jsReact Three Fiber? - Stack Overflow

programmeradmin2浏览0评论

I’m working on a project where I’m switching between multiple animations (e.g., sitting, pointing, phone) based on scroll position. The animations are loaded using useFBX and applied to a model using useAnimations.

The issue I’m facing is that when I scroll the page, the current animation resets and starts playing again. This is causing bad user experience. I want my animation to keep playing continiuosely while I'm scrolling page. Here’s a simplified version of my code:

    const { nodes, materials } = useGLTF('./models/developer.glb') as CustomGLTF;

    const { animations: phoneAnimation } = useFBX('./models/phone.fbx');
    const { animations: sittingAnimation } = useFBX('./models/sitting.fbx');
    const { animations: pointingAnimation } = useFBX('./models/pointing.fbx');
    phoneAnimation[0].name = 'phone';
    sittingAnimation[0].name = 'sitting';
    pointingAnimation[0].name = 'pointing';

    const { actions } = useAnimations(
        [phoneAnimation[0], sittingAnimation[0], pointingAnimation[0]],
        group
    );

    const scrollOffset = useScrollAnimation();
    const [currentAnimation, setCurrentAnimation] = useState<string>('sitting');

    useEffect(() => {
        if (scrollOffset < 0.45) {
            setCurrentAnimation('sitting');
        } else if (scrollOffset < 0.75) {
            setCurrentAnimation('pointing');
        } else {
            setCurrentAnimation('phone');
        }
    }, [scrollOffset]);

    useEffect(() => {
        if (actions[currentAnimation]) {
            actions[currentAnimation].play();
        }
    }, [currentAnimation, actions]);

I think the problem is that actions keep updating on every scroll, but when i remove it from dependencies array, the animations are not playing at all. 

How can I prevent animations from resetting when scroll position changes?
发布评论

评论列表(0)

  1. 暂无评论