model - 将 three.js 模型转换为 svg

Question

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

Answer 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 中获取这些图像。

Answer 2

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