Почему SVGLoader three.js отображает svgs вверх ногами?

Question

Я использовал трюк group.scale.y = -1; для групп, чтобы правильно отобразить svgs в three.js.

Однако это мешает концепции координаты y, отображающей положительные значения от центра моей группы. Обычно положительные координаты y на путях будут толкать изображение SVG (во многом как положительная координата X по-прежнему сдвигается вправо), но трюк изменения масштаба для исправления перевёрнутого svg также изменяет направление, в котором координата y размещает SVG. , Следовательно, большее положительное значение y помещает svg дальше к нижней части холста.

Может кто-нибудь объяснить, почему svgs рендерится с ног на голову, и, возможно, объяснить, как это исправить, чтобы мои координаты y по-прежнему вели себя как положено?

Answer 1

Для тех, кто заинтересован в этом, причина того, что SVG визуализируются вверх дном в Three.js, связана с точкой, с которой они отображаются.

В SVG кажется, что, хотя ось X имеет положительные значения, она движется дальше вправо, а когда ось Y имеет положительные значения, она движется дальше вниз. Это рассчитывается от верхней левой точки изображения.

В Three.js у вас есть возможность двигаться влево от центра (X: 0, Y: 0) и ниже центра. Это достигается с помощью отрицательных значений. В Three.js холст утверждает, что положительные значения Y перемещаются вверх, а отрицательные значения Y понижаются.

Поскольку рендерер рисует контуры / фигуры, он использует исходное значение Y из SVG, которое обычно будет положительным числом, в результате чего координата рисования будет двигаться вверх, а не вниз (как это обычно бывает в SVG), что имеет эффект рисования SVG вверх ногами.