# How do convert vanilla js Three.EllipseCurve to react-three-fiber in more specified way

**URL:** <https://discourse.threejs.org/t/how-do-convert-vanilla-js-three-ellipsecurve-to-react-three-fiber-in-more-specified-way/42910>\
**Category:** Questions\
**Tags:** materials, react-three-fiber, geometry\
**Created:** [September 26, 2022, 2:24am UTC](https://discourse.threejs.org/t/how-do-convert-vanilla-js-three-ellipsecurve-to-react-three-fiber-in-more-specified-way/42910 "2022-09-26T02:24:52Z")\
**Posts on this page:** 11\
**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:** [September 26, 2022, 2:24am UTC](https://discourse.threejs.org/t/how-do-convert-vanilla-js-three-ellipsecurve-to-react-three-fiber-in-more-specified-way/42910/1 "2022-09-26T02:24:52Z")

</div>

So basically in documentation of three.js the code of Ellipse Curve should be something like this…

```javascript
const curve = new THREE.EllipseCurve(
	0, 0, // ax, aY
	10, 10, // xRadius, yRadius
	0, 2 * Math.PI, // aStartAngle, aEndAngle
	false, // aClockwise
	0 // aRotation
);

const points = curve.getPoints( 50 );
const geometry = new THREE.BufferGeometry().setFromPoints( points );

const material = new THREE.LineBasicMaterial( { color: 0xff0000 } );

// Create the final object to add to the scene
const ellipse = new THREE.Line( geometry, material );

```

But I wanna know how to create in react-three-fiber… I have a sample code here but couldn’t imagine where the code should I put at.

```javascript
// This is the extends
import { EllipseCurve } from 'three'

import { LineMaterial } from "three/examples/jsm/lines/LineMaterial"
import { LineGeometry } from "three/examples/jsm/lines/LineGeometry"
import { Line2 } from "three/examples/jsm/lines/Line2"

extend({ OrbitControls,EllipseCurve,LineMaterial,LineGeometry,Line2 });

...
// And this is how I will make ellipsecurve( circle in shape)
    const { size } = useThree()
    const [color, setColor] = useState("white")
    const ref = useRef()

    useEffect(() => {
        var curve = new THREE.EllipseCurve(0, 0, 45, 45, 0, 2 * Math.PI, false, 0)
        const points = curve.getSpacedPoints( 100 )
        
    },[])

    return(
        <line2>
            <lineGeometry attach="geometry" ref={ref} />
            <lineMaterial attach="material" color={color} linewidth={5} resolution={[size.width, size.height]} />
        </line2>
   )

```

How do I put this here? I don’t understand hahahah… I don’t see any documentation in react-three-fiber about this…So I’m kinda lost…

---

<div class="post-metadata">

**Author:** ![drcmda](https://avatars.discourse-cdn.com/v4/letter/d/91b2a8/32.png) [@drcmda](https://discourse.threejs.org/u/drcmda)\
**Post date:** [September 26, 2022, 9:43am UTC](https://discourse.threejs.org/t/how-do-convert-vanilla-js-three-ellipsecurve-to-react-three-fiber-in-more-specified-way/42910/2 "2022-09-26T09:43:34Z")

</div>

it’s almost correct. for complex, imperative stuff you use it the same way you’d use it in vanilla (or find a good component abstraction that hides the boilerplate).

this could be a simple useMemo

```javascript
const geometry = useMemo(() => {
  const curve = new THREE.EllipseCurve(0, 0, 10, 10, 0, 2 * Math.PI, false, 0)
  return new THREE.BufferGeometry().setFromPoints(curve.getPoints(50))
}, [])

return (
  <line2 geometry={geometry}>
    <lineMaterial color={color} linewidth={5} resolution={[size.width, size.height]} />
  </line2>
)

```

i am not 100% sure if this is how you use line2, i think it’s wrong. your vanilla example uses THREE.Line, but JSM/Line2 might be different. in the examples it doesn’t use plain buffergeometry but JSM/LineGeometry which has a setPoints method.

we also have abstractions in drei:

Line2: [GitHub - pmndrs/drei: 🥉 useful helpers for react-three-fiber](https://github.com/pmndrs/drei#line)  
QuadraticBezierLine: [GitHub - pmndrs/drei: 🥉 useful helpers for react-three-fiber](https://github.com/pmndrs/drei#quadraticbezierline)  
CubicBezierLine: [GitHub - pmndrs/drei: 🥉 useful helpers for react-three-fiber](https://github.com/pmndrs/drei#cubicbezierline)  
CatmullRomLine: [GitHub - pmndrs/drei: 🥉 useful helpers for react-three-fiber](https://github.com/pmndrs/drei#catmullromline)

you can look into these to study how line2 is being used, or if you want to create an abstraction around ellipsecurve, it will make it more re-usable (and at this point consider adding it to drei as well pls)

ps, small example using QuadraticBezierLine

> **[Backdrop and cables - CodeSandbox](https://codesandbox.io/s/2ij9u)**
>
> Using a studio backdrop, quadratic bezier line and contact shadows.

---

<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:** [September 26, 2022, 10:24am UTC](https://discourse.threejs.org/t/how-do-convert-vanilla-js-three-ellipsecurve-to-react-three-fiber-in-more-specified-way/42910/3 "2022-09-26T10:24:41Z")

</div>

Sir I tried it but why the ellipsecurve line doesn’t show in the scene??  
It doesn’t have error but I can’t see it.

---

<div class="post-metadata">

**Author:** ![drcmda](https://avatars.discourse-cdn.com/v4/letter/d/91b2a8/32.png) [@drcmda](https://discourse.threejs.org/u/drcmda)\
**Post date:** [September 26, 2022, 10:26am UTC](https://discourse.threejs.org/t/how-do-convert-vanilla-js-three-ellipsecurve-to-react-three-fiber-in-more-specified-way/42910/4 "2022-09-26T10:26:25Z")

</div>

as i said, i don’t think threes line2 works the way you use it. your vanilla example uses new THREE.Line( geometry, material )

---

<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:** [September 26, 2022, 10:30am UTC](https://discourse.threejs.org/t/how-do-convert-vanilla-js-three-ellipsecurve-to-react-three-fiber-in-more-specified-way/42910/5 "2022-09-26T10:30:13Z")

</div>

hahaha sorry about that…so where should I follow it? in your pmndrs/drei ?

---

<div class="post-metadata">

**Author:** ![drcmda](https://avatars.discourse-cdn.com/v4/letter/d/91b2a8/32.png) [@drcmda](https://discourse.threejs.org/u/drcmda)\
**Post date:** [September 26, 2022, 10:52am UTC](https://discourse.threejs.org/t/how-do-convert-vanilla-js-three-ellipsecurve-to-react-three-fiber-in-more-specified-way/42910/6 "2022-09-26T10:52:13Z")

</div>

if you want a thin like like in your vanilla example everything’s fine except `<line2>`, again you’re using line2 wrong, you need to consult the documentation or find threejs examples that use it correctly. though if you just want a thick line with a ellipse-curve, just throw the curve points into drei/Line, that would be the easiest. that component is documented in drei.

---

<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:** [September 26, 2022, 11:20am UTC](https://discourse.threejs.org/t/how-do-convert-vanilla-js-three-ellipsecurve-to-react-three-fiber-in-more-specified-way/42910/7 "2022-09-26T11:20:37Z")

</div>

Sorry but I have another question if this is right? I can’t find the more documentation in drei/line but do you mean something like this?

```javascript
...
import { Line } from '@react-three/drei'
...
    const geometry = useMemo(() => {
        const curve = new THREE.EllipseCurve(0, 0, 50, 50, 0, 2 * Math.PI, false, 0)
        return new THREE.BufferGeometry().setFromPoints(curve.getPoints(50))
    }, [])
...
        <Line
            color={color}
            linewidth={5}
            geometry={geometry}
        />

```

but this code doesn’t works…

Sorry but I had to do it…I can’t really understand sometimes the documentation if its not info for me to clarify in my head.

---

<div class="post-metadata">

**Author:** ![seanwasere](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/seanwasere/32/20864_2.png) [@seanwasere](https://discourse.threejs.org/u/seanwasere)\
**Post date:** [September 26, 2022, 1:56pm UTC](https://discourse.threejs.org/t/how-do-convert-vanilla-js-three-ellipsecurve-to-react-three-fiber-in-more-specified-way/42910/8 "2022-09-26T13:56:17Z")

</div>

I just happen to have a Drei Line from THREE.EllipseCurve demo.

> **[React Three Fiber Boilerplate - Drei Line from EllipseCurve - CodeSandbox](https://codesandbox.io/s/react-three-fiber-boilerplate-drei-line-from-ellipsecurve-xqkj2t?file=%2Fsrc%2FApp.jsx)**
>
> React Three Fiber Boilerplate - Drei Line from EllipseCurve by Sean-Bradley using @react-three/drei, @react-three/fiber, react, react-dom, react-scripts, three

---

<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:** [September 26, 2022, 2:54pm UTC](https://discourse.threejs.org/t/how-do-convert-vanilla-js-three-ellipsecurve-to-react-three-fiber-in-more-specified-way/42910/9 "2022-09-26T14:54:32Z")

</div>

I see thanks a lot…I just want to redo again my code before in vanilla and I don’t know how to convert it into r3f thanks.

---

<div class="post-metadata">

**Author:** ![drcmda](https://avatars.discourse-cdn.com/v4/letter/d/91b2a8/32.png) [@drcmda](https://discourse.threejs.org/u/drcmda)\
**Post date:** [September 26, 2022, 4:33pm UTC](https://discourse.threejs.org/t/how-do-convert-vanilla-js-three-ellipsecurve-to-react-three-fiber-in-more-specified-way/42910/10 "2022-09-26T16:33:56Z")

</div>

nice, i was wondering why just giving it the result of getPoints didn’t work and turns out curve.getPoints returns Vector2. mapping it to V3 removes the extra step with the buffergeometry.

```javascript
  const points = useMemo(() => {
    return new THREE.EllipseCurve(0, 0, 3, 1.5, 0, 2 * Math.PI, false, 0)
      .getPoints(100)
      .map((p) => new THREE.Vector3(p.x, p.y, 0))
  }, [])

```

---

<div class="post-metadata">

**Author:** ![drcmda](https://avatars.discourse-cdn.com/v4/letter/d/91b2a8/32.png) [@drcmda](https://discourse.threejs.org/u/drcmda)\
**Post date:** [September 26, 2022, 4:47pm UTC](https://discourse.threejs.org/t/how-do-convert-vanilla-js-three-ellipsecurve-to-react-three-fiber-in-more-specified-way/42910/11 "2022-09-26T16:47:23Z")

</div>

made a small update, now line takes `Vector3[]`, `Vector2[]`, `[x, y, z][]` and `[x, y][]`

```javascript
const points = useMemo(() =>
  new THREE.EllipseCurve(0, 0, 3, 1.5, 0, 2 * Math.PI, false, 0).getPoints(100)
, [])
return <Line points={points} color="turquoise" lineWidth={20} />

```

> **[React Three Fiber Boilerplate - Drei Line from EllipseCurve (forked) -...](https://codesandbox.io/s/react-three-fiber-boilerplate-drei-line-from-ellipsecurve-forked-tv1uyj?file=%2Fsrc%2FApp.jsx)**
>
> React Three Fiber Boilerplate - Drei Line from EllipseCurve (forked) by drcmda using @react-three/drei, @react-three/fiber, react, react-dom, react-scripts, three

@Myth_Xenodo even your original code above, which wouldn’t work with three/jsm/lines/line2, would most likely start to run after the update.