DragControls with CSS3DRenderer


I am a beginner on ThreeJS (started yesterday), got some good progress using CSS3DRenderer with svg elements inside and OrbitControls, all working nice, and now I want to be able to drag&drop and transform svg elements.

But I just found out DragControls don’t work with CSS3DRenderer in the examples and I’m quite lost on how that could be done. Does anyone can give me a hint or an example?


1 Like

Is there a reason you are using CSS3Renderer rather than WebGLRenderer?
Support for each should be pretty much the same these days and performance with WebGLRenderer will be much better so unless you have a good reason for using CSS3Renderer I wouldn’t use it.

Hummm, not a strong reason, really. I am using CSS3DRenderer because it was the way I found to load an external SVG and insert it into the scene respecting CSS.

I didn’t like much the examples I found to transform SVG elements into 3D objects and I wasn’t sure if that was a proper way.

I need to load an external SVG URL and export it back in SVG format later. Is there a reliable way to do that using WebGL? If so, I’d prefer WebGL, for sure.

One thing for my case is that I actually don’t need 3D objects. I am showing a floorplan and want to let the user do simple operations on it: rotate and zoom camera, panning, drag&drop and resizing of elements.

I’m using CSS3DRenderer to embed a video URL and need to have a dragging functionality like what DragControls does. Is there any solution to have a video URL and allowing the client to drag and drop the object to change its position, at the same time?

Here are my external issues:

I’m also very interested in any solutions or examples anyone has to this.