Theta updating the circleGeometry not working

Questions
, ,
1

Can anyone tell me why I can’t update the theta length in R3F ?

Here is the code

function Circle({...props}:any) {

    const circleRef = useRef<any>(null);
    const elapsedTimeRef = useRef<number>(0);
    const animationDuration = 2; // Animation duration in seconds
  
    useFrame((state, delta) => {
        if (circleRef.current) {
            elapsedTimeRef.current += delta;

            // Calculate the thetaLength based on the elapsed time and animation duration
            const thetaLength = (elapsedTimeRef.current / animationDuration) * 2 * Math.PI;

            // Update the geometry with the new thetaLength
            // circleRef.current.geometry.parameters.thetaLength = thetaLength;
            // console.log(circleRef.current.geometry.parameters)
            // circleRef.current.geometry.parameters.verticesNeedUpdate = true;

            // Reset the elapsed time and animation after the duration is reached
            if (elapsedTimeRef.current >= animationDuration) {
                elapsedTimeRef.current = 0;
            }
        }
    });


    return (
        <>
            <mesh
            {...props}
            ref={circleRef}
            >
                <circleGeometry args={[1.5,100,0,0]}/>
                <meshStandardMaterial
                    color={0xf5e347}
                    toneMapped={true}
                />
            </mesh>
        </>
    )
}

I already tried verticesneedUpdate but it doesn’t change anything or whatsoever.

I’m trying to achieve this in animation but it couldn’t work the thetaLength.

https://threejs.org/docs/index.html?q=Circl#api/en/geometries/CircleGeometry

2
  1. Theta is a constructor property - changing it after the geometry is already created doesn’t update the vertices. You’ll need to recreate the entire geometry - take into account, in terms of performance, that a creating geometry is not a super fast process (as it runs on the CPU) and putting it inside useFrame can affect FPS.
  2. circleRef.current.geometry.parameters.thetaLength wouldn’t really change anything, since the geometry is created only once based on the constructor params. What you can do, is to pass the dynamic theta to the geometry constructor:
const [theta, setTheta] = useState(3.14);

return (
  <mesh {...props}>
    <circleGeometry args={[.1.5, 100.0, 0.0, theta]} />
    <meshStandardMaterial color={0xff00ff} /> 
  </mesh>
);

Keep in mind my first comment tho - updating geometries and state on each frame ain’t fast.

1 Like
3

yeah I know updating geometry is really bad I wanna make a loading style that something related to it but dang its fine I’ll just find another one…

4

If it’s just a single loader geometry - I think it should hurt the fps too much even if you’d use state, or recreated geometry every frame tbh.

5

I would bend a plane in vertex shaders. This is way performant. :thinking:

6

Quick and rough: https://codepen.io/prisoner849/full/jOeqbOK

4 Likes