1

I am trying to build a tool which allows the designers to import 3d models (created in 3ds max and converted to three.js json) of parts of furniture and assemble the furniture using these parts by moving them around. After they are done with the assembeling, I need to export the final furniture model (geometry, materials etc) as svg image for display on my website in a 2d home designer tool. How can I convert three.js model(s) (one or more) to svg. I need to do the same in the 3d home designer tool also as the user can re-assemble the furniture himself and the svg needs to be updated on the fly after re-assembeling is done. Is there a three.js plugin, example, sample code or external javascript library which allows me to convert one or more three.js models to svg in the browser. Any help is appreciated.

Rajeev
  • 11
  • 2
  • 2

2 Answers2

1

As it happens, Three.js has THREE.SVGRenderer(). Possible minor compatibility changes aside, you should be able to take almost any Three.js demo and just replace THREE.WebGLRenderer or THREE.CanvasRenderer with THREE.SVGRenderer.

To get the resulting SVG from the renderer DOM see here: THREE.SVGRenderer save text of image.

Obviously the result won't be identical to WebGL or Canvas output, but it will be true vector graphics. Converting a more complex shaded WebGL scene to SVG is pretty much impossible unless you embed bitmap-based image data to it, which kind of defeats the purpose of SVG and vector graphics. In this case you would be better off using PNG images, which you can grab from both THREE.WebGLRenderer and THREE.CanvasRenderer directly.

Community
  • 1
  • 1
yaku
  • 3,061
  • 2
  • 19
  • 38
  • The solution which you have suggested will render the entire scene in SVG but it's still a 3D scene (there still a third dimension). What I want to do it convert the JSON object to svg image. Its like I open a 3D model in 3DS max and export a png image from some angle. Functionally similar to exporting an image for a model but instead of PNG I need it in SVG form. I don't want the scene to be rendered in SVG but I need to export a single 3D model (loaded with JsonLoader) exported as SVG dynamically and render in other viewer which uses SVG for graphics. – Rajeev Jul 15 '13 at 04:57
0

Rajeev, as I understand you, you are thinking of the top, left, right, front view etc. You should check out the orthographic camera in three.js to achieve this.

Vibber
  • 127
  • 1
  • 7