CODEWITHSUNDEEP
modelsvg3dthree.js
Rajeev
Rajeev

Reputation: 11

Convert three.js model(s) to svg

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.

Upvotes: 1

Views: 2958

Answers (2)

Vibber
Vibber

Reputation: 127

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.

Upvotes: 0

yaku
yaku

Reputation: 3111

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.

Upvotes: 1

Related Questions