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

admin管理员组

文章数量:1203817

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?

本文标签： reactjsHow to prevent animations from resetting when scrolling in ThreejsReact Three FiberStack Overflow