How to do 2D drawing efficiently in the canvas?

Questions
,
1

Hello,

I’m making a HUD and I need 2D drawings on the screen. The problem is that I need to update their attribute every frame (>60fps) with data from other object that are in the threejs canvas.
Is there a way to efficiently draw SVG like object directly inside the Canvas?.

2

I don’t know if that is what you are looking for but there is https://konvajs.org/

Here is a little demo I did with 2d drag and drop and report to 3d canvas

1 Like
3

I finally did it with SVG.
I created a useRef in the parent component, I send it to the svg to be his ref on one side, and to the canvas on the other side. I directly modified the ref attributes in a useFrame in the canvas.

4

you can use drei/Html to have html in your threejs scene, where you can manipulate it. but there’s also tunnel-rat GitHub - pmndrs/tunnel-rat: 🐀 Non gratum anus rodentum which allows you to tunnel from threejs into the dom.

threejs also has an svg loader btw, converts it to meshes.

1 Like