How to get and store 2D context of Canvas in react-three-fiber? | Three.js | Page 1

karmic junco May 22, 2024, 4:04 PM

#

A canvas can't have both 2d and 3d contexts. If you want to try and draw 2d on top of a 3d context (or vice versa) you have to have two canvases and have alpha on the top one.

merry sand May 22, 2024, 4:08 PM

#

Thanks for your reply. I am using only one canvas now. I want to get 2d context of it.

karmic junco May 22, 2024, 5:29 PM

#

I believe that r3f will automatically grab a 3d context for the canvas, so you can't get a 2d one.

merry sand May 22, 2024, 5:50 PM

#

It makes sense. So what can I do?

karmic junco May 22, 2024, 5:50 PM

#

Well, for one you could certainly implement the ribbon drawing in 3d; it might in some ways be even easier than in 2d.

merry sand May 22, 2024, 5:53 PM

#

Let me try 🙂 thanks.

#

But how to get context concisely?

#

I tried getContext("3d") in RibbonDraw but failed.

#

Would you mind if I DM to you?

karmic junco May 22, 2024, 6:08 PM

#

I'm not familiar enough with R3F, unfortunately, to be much specific help here. :/

#

Though I believe what you want is "webgl", not "3d": https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/getContext

MDN Web Docs

HTMLCanvasElement: getContext() method - Web APIs | MDN

The
HTMLCanvasElement.getContext() method returns a drawing
context on the canvas, or null if the context identifier is not
supported, or the canvas has already been set to a different context mode.

oak barn May 22, 2024, 10:39 PM

#

can you clarify the objective more?

what do you mean 2d "context"? the visual scene context i assume, not the context of a project itself?

we manage a lot of both in ot sketch - so if i can be of help lmk

#

merry sand May 23, 2024, 3:35 AM

#

oak barn can you clarify the objective more? what do you mean 2d "context"? the visual s...

Thanks for your kind interest. I have a Vue app using Three.js to create a such effect.

#

But I want to convert it to React and Typescript. In vue, creating canvas and getting context is done really easy in <script> tag. Here is the code.
this._canvas = document.createElement("canvas");
this._context = this._canvas.getContext("2d");

#

In Typescript, I created Ribbons component using react-three-fiber as you can see in the original post. To draw ribbon sections, I have to get the 2D context of canvas, I suppose.

#

To make a long story short, how can I draw 2D lines on react-three-fiber context?

oak barn May 23, 2024, 4:01 AM

#

like this?

#

#

i still don't really have my head around what you're trying to do...especially this part

I created Canvas from react-three-fiber and tried to get 2D context of the canvas in child component - RibbonDraw.

i don't understand what you mean by 2d and RibbonDraw - is it a ribbon being drawn completely away from r3f?

#How to get and store 2D context of Canvas in react-three-fiber?