将three.js模型转换为svg

Question

我正在尝试构建一个工具，允许设计师导入3d模型（在3ds max中创建并转换为three.js json）的家具部件，并通过移动它们来使用这些部件组装家具。完成装配后，我需要将最终的家具模型（几何，材料等）导出为svg图像，以便在我的网站上以二维家用设计器工具显示。如何将three.js模型（一个或多个）转换为svg。我需要在3d家居设计工具中也这样做，因为用户可以自己重新组装家具，并且在重新组装完成后需要动态更新svg。是否有一个three.js插件，示例，示例代码或外部JavaScript库，它允许我在浏览器中将一个或多个three.js模型转换为svg。任何帮助表示赞赏。

Answer 1

碰巧，Three.js有THREE.SVGRenderer（）。除了可能的轻微兼容性更改之外，您应该能够接受几乎任何Three.js演示，只需用THREE.SVGRenderer替换THREE.WebGLRenderer或THREE.CanvasRenderer。

要从渲染器DOM获取生成的SVG，请参见此处：THREE.SVGRenderer save text of image。

显然，结果与WebGL或Canvas输出不一样，但它将是真正的矢量图形。除非您将基于位图的图像数据嵌入到它中，否则将更复杂的着色WebGL场景转换为SVG几乎是不可能的，这会破坏SVG和矢量图形的目的。在这种情况下，您最好使用PNG图像，您可以直接从THREE.WebGLRenderer和THREE.CanvasRenderer中获取这些图像。

Answer 2

Rajeev，据我了解你，你正在考虑顶部，左侧，右侧，前视图等。您应该在three.js中检查正交相机以实现此目的。