您如何控制 Three.js 中导入的 SVG 的大小？答案

【问题标题】：How do you control size of imported SVG's in Three.js?您如何控制 Three.js 中导入的 SVG 的大小？
【发布时间】：2022-02-10 10:19:35
【问题描述】：

我正在使用SVGLoader 导入一个 SVG，并将每条路径转换为一个网格，然后将其放入一个组中。当我这样做时，该小组比我希望的要大得多。我不想缩放，而是想以正确的大小开始导入它。当我更改 SVG 上的 width 和 height 属性时：<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25"> 渲染网格的大小没有任何变化。我还没有看到任何实际描述 SVG 大小是如何由加载器确定的。它是一个视图框吗？有什么特别的事情要做吗？

【问题讨论】：

标签： svg three.js react-three-fiber react-three-drei

【解决方案1】：

在您的 3d 世界中，您只能通过 Object3D.scale.set(x, y, z) 更改对象的大小，而 x、y、z 值决定您在 3d 世界中的网格大小。修改SVG的width和height属性时，只能改变分辨率，不能改变大小

【讨论】：

这是否意味着每个 SVG 都将以相同的大小导入？
是的，svg的宽度和高度不会影响ht 3d世界中Object3D的大小，改变Object3D大小的唯一方法是改变它的属性scale
感谢您的信息。最后一个问题：加载和渲染后，是否可以从其ViewBox 中提取 SVG 路径？在example for the SVG Loader 上，如果您切换到示例 6，您将看到它是偏移的。我检查了 GH 上的 SVG 文件，这是由于文件 viewBox.从理论上讲，您可以设置 VB 以缩小 SVG，然后将其提取出来，这样您就不会在对象上有随机的空白空间吗？