Что нужно исправить, чтобы 3D объект крутился на 180 градусов с анимацией каждый раз при нажатии?

Question

[Zac Rider]

Есть код, который при нажатии на объект крутит его с анимацией на 180 градусов (то есть показывает обратную сторону объекта).

const [isRotating, setIsRotating] = useState(false);
    const rotationSpeed = Math.PI / (60 * 0.5);

    const handleRotate = () => {
        if (!isRotating) {
            setIsRotating(true);
        }
    };

    const [rotationX, setRotationX] = useState(0);
    const [rotationCount, setRotationCount] = useState(0);

    useFrame(() => {
        if (isRotating) {
           
            setRotationX((prevRotationX) => {
                const newRotationX = prevRotationX + rotationSpeed;

                // проверка на то, что объект прокрутился на 180 градусов
                if (newRotationX >= Math.PI) {
                    setIsRotating(false);
                    setRotationCount((prevCount) => prevCount + 1);
                    return (rotationCount + 1) * Math.PI; // прокрутка на обратную сторону объекта (180градусов)
                }

                return newRotationX;
            });
        }
    });

return (
        <group
            {...props}
            dispose={null}
            onClick={handleRotate}
            rotation={[rotationX, 0, 0]}
        > ...........

Баг заключается в том, что несмотря на то, что при каждом нажатии объект разворачивается как надо, анимация разворота происходит только при первом нажатии. В дальнейшем оно не работает. Как исправить данную проблему?

Comments

[Модератор]

Не надо ставить как можно больше тэгов. Лучше оставить один, но конкретный, с которым проблема.
См.п.3.1 Регламента.