# Theta updating the circleGeometry not working

**URL:** <https://discourse.threejs.org/t/theta-updating-the-circlegeometry-not-working/50375>\
**Category:** Questions\
**Tags:** react-three-fiber, materials, geometry\
**Created:** [April 14, 2023, 2:36pm UTC](https://discourse.threejs.org/t/theta-updating-the-circlegeometry-not-working/50375 "2023-04-14T14:36:55Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Myth\_Xenodo](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/myth_xenodo/32/27434_2.png) [@Myth\_Xenodo](https://discourse.threejs.org/u/Myth_Xenodo)\
**Post date:** [April 14, 2023, 2:36pm UTC](https://discourse.threejs.org/t/theta-updating-the-circlegeometry-not-working/50375/1 "2023-04-14T14:36:55Z")

</div>

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

Here is the code

```javascript
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](https://threejs.org/docs/index.html?q=Circl#api/en/geometries/CircleGeometry)

---

<div class="post-metadata">

**Author:** ![mjurczyk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mjurczyk/32/10995_2.png) [@mjurczyk](https://discourse.threejs.org/u/mjurczyk)\
**Post date:** [April 14, 2023, 2:42pm UTC](https://discourse.threejs.org/t/theta-updating-the-circlegeometry-not-working/50375/2 "2023-04-14T14:42:22Z")

</div>

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](https://github.com/mrdoob/three.js/blob/0fbae6f682f6e13dd9eb8acde02e4f50c0b73935/src/geometries/CircleGeometry.js#L41) based on the constructor params. What you can do, is to pass the dynamic theta to the geometry constructor:

```javascript
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.

---

<div class="post-metadata">

**Author:** ![Myth\_Xenodo](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/myth_xenodo/32/27434_2.png) [@Myth\_Xenodo](https://discourse.threejs.org/u/Myth_Xenodo)\
**Post date:** [April 14, 2023, 2:54pm UTC](https://discourse.threejs.org/t/theta-updating-the-circlegeometry-not-working/50375/3 "2023-04-14T14:54:24Z")

</div>

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…

---

<div class="post-metadata">

**Author:** ![mjurczyk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mjurczyk/32/10995_2.png) [@mjurczyk](https://discourse.threejs.org/u/mjurczyk)\
**Post date:** [April 14, 2023, 4:27pm UTC](https://discourse.threejs.org/t/theta-updating-the-circlegeometry-not-working/50375/4 "2023-04-14T16:27:28Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [April 14, 2023, 4:51pm UTC](https://discourse.threejs.org/t/theta-updating-the-circlegeometry-not-working/50375/5 "2023-04-14T16:51:24Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [April 14, 2023, 5:09pm UTC](https://discourse.threejs.org/t/theta-updating-the-circlegeometry-not-working/50375/6 "2023-04-14T17:09:10Z")

</div>

Quick and rough: [https://codepen.io/prisoner849/full/jOeqbOK](https://codepen.io/prisoner849/full/jOeqbOK)