javascript - 为什么 three.js SVGLoader 会颠倒渲染 svgs？

Question

我一直在对组使用 group.scale.y = -1; 技巧以正确的方式在 three.js 中呈现我的 svg。

然而，这与 y 坐标的概念混淆了，显示从我的组中心向上的正值。通常路径上的正 y 坐标会将 svg 向上推(很像正 x 坐标仍然向右推)但是校正倒置 svg 的比例翻转技巧也会翻转 y 坐标放置 svg 的方向.因此，更大的正 y 值会将 svg 放置在更靠近 Canvas 底部的位置。

谁能解释为什么 svg 开始时会被颠倒渲染，也许还能解释如何解决这个问题，以便我的 y 坐标仍然按预期运行？

Answer 1

对于任何对此感兴趣的人来说，SVG 在 Three.js 中呈现颠倒的原因是由于它们呈现的点。

在 SVG 中，看起来虽然 X 轴具有正值，但它向右绘制得更远，而当 Y 轴具有正值时，它绘制得更远。这是从图像的左上角计算的。

在 Three.js 中，您可以移动到中心左侧 (X:0, Y:0) 和中心下方。这是通过负值实现的。在 Three.js 中， Canvas 断言正 Y 值向上移动，负 Y 值向下移动。

当渲染器绘制路径/形状时，它使用来自 SVG 的原始 Y 值，该值通常是一个正数，导致绘图坐标向上移动而不是向下移动(就像它通常在 SVG 中所做的那样)，这具有效果颠倒绘制 SVG。