为什么three.js的SVGLoader渲染SVG时会倒置？

Question

我一直在使用group.scale.y = -1;技巧来使我的SVG在three.js中正确显示。

然而，这会影响y坐标的概念，正值的y坐标通常会将SVG向上推（就像正的x坐标仍然向右推），但是缩放翻转技巧来纠正颠倒的SVG也翻转了y坐标放置SVG的方向。因此，更大的正y值将SVG放置在画布底部。

有人能解释一下为什么SVG从一开始就被渲染颠倒，并可能解释如何修复这个问题，以便我的y坐标仍然按预期工作吗？

- lorless

---

geometry.rotateZ( Math.PI ) - ScieCode

我也不能使用那个。它实现了与比例翻转相同的效果。SVG以正确的方式呈现非常重要，因为我需要依赖于使用屏幕左下角渲染的x和y坐标。原始的SVG可以做到这一点，如果旋转了，我就无法将SVG放置在画布上相同的位置，因为渲染点也会旋转。 - lorless

您的建议使svg旋转，但并未解决其面向错误的问题。我认为这就是为什么在svgLoader示例中使用scale.y = -1翻转的原因，该示例位于第145行：https://github.com/mrdoob/three.js/blob/master/examples/webgl_loader_svg.html - lorless

当SVG被呈现时，它沿着x轴镜像，因此它被倒置呈现。通过z轴旋转意味着SVG现在是正面的了。沿着x轴旋转可以使图像按照应该呈现的方式进行渲染。 - lorless

Answer 1

对于任何对此感兴趣的人，SVG在Three.js中呈现为倒置是由于它们被呈现的点。在SVG中，尽管X轴有正值，但它会向右绘制更远，而Y轴具有正值时，它会向下绘制更远。这是从图像左上角点计算出来的。在Three.js中，您可以向左（X:0，Y:0）和向下移动，这通过使用负值来实现。在Three.js中，画布断言正Y值向上移动，负Y值向下移动。当渲染器绘制路径/形状时，它使用SVG中的原始Y值，通常会导致绘图坐标向上移动，从而使得您的SVG倒置绘制。最初的回答。

- lorless

Answer 2

在SVG加载器示例中：https://github.com/mrdoob/three.js/blob/master/examples/webgl_loader_svg.html 你也可以翻转实际几何体，而不是组缩放。这样，对象和/或组将保持一致的比例信息。

for ( var j = 0; j < shapes.length; j ++ ) {
    var shape = shapes[ j ];
    var geometry = new THREE.ShapeBufferGeometry( shape );
    geometry.applyMatrix4(new THREE.Matrix4().makeScale ( 1, -1, 1 )) // <-- this
    var mesh = new THREE.Mesh( geometry, material );
    group.add( mesh );
}

- Seth Walker

Answer 3

其中一种解决方案是改变摄像机角度，这将保留几何形状和位置。

camera.up = new THREE.Vector3( 0, 0, -1 );

- rohittheozzy