将 three.js 模型转换为 svg

Posted 2023-03-23

【中文标题】将 three.js 模型转换为 svg

【英文标题】：Convert three.js model(s) to svg

【发布时间】：2013-07-09 12:02:02

【问题描述】：

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

【参考方案1】：

碰巧，Three.js 有 THREE.SVGRenderer()。除了可能的细微兼容性更改之外，您应该可以进行几乎任何 Three.js 演示，只需将 THREE.WebGLRenderer 或 THREE.CanvasRenderer 替换为 THREE.SVGRenderer。

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

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

【讨论】：

您建议的解决方案将在 SVG 中渲染整个场景，但它仍然是 3D 场景（仍然存在第三维）。我想做的是将 JSON 对象转换为 svg 图像。就像我在 3DS max 中打开一个 3D 模型并从某个角度导出一个 png 图像。功能上类似于为模型导出图像，但我需要的是 SVG 格式而不是 PNG。我不希望在 SVG 中渲染场景，但我需要导出单个 3D 模型（使用 JsonLoader 加载）动态导出为 SVG，并在其他使用 SVG 进行图形的查看器中渲染。

【参考方案2】：

Rajeev，据我了解，您正在考虑顶部、左侧、右侧、前视图等。您应该查看 three.js 中的正交相机来实现这一点。