Question

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

但是，这与y坐标的概念从我组的中心开始显示正值的概念相混淆。通常，路径上的正y坐标会推动svg向上绘制（很像正x坐标仍会向右推动），但是用于校正倒置svg的比例翻转技巧也会翻转y坐标放置svg的方向。因此，更大的正y值会将svg放置在画布的底部。

任何人都可以解释为什么svgs会被向上渲染，也许可以解释如何解决此问题，以便我的y坐标仍然表现出预期的效果？

Answer 1

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

在SVG中，似乎X轴为正值时，它向右延伸得更远，而Y轴为正值时，它向下拉得更远。这是从图像的左上角开始计算的。

在Three.js中，您可以向左移动中心（X：0，Y：0）并低于中心。这是通过负值实现的。在Three.js中，画布断言正Y值向上移动而负Y值向下移动。

渲染器绘制路径/形状时，它使用SVG中的原始Y值，该值通常为正数，从而导致绘制坐标向上移动而不是向下移动（就像在SVG中通常那样），从而产生效果将您的SVG颠倒过来。

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.applyMatrix(new THREE.Matrix4().makeScale ( 1, -1, 1 )) // <-- this
    var mesh = new THREE.Mesh( geometry, material );
    group.add( mesh );
}

Answer 3

解决方案之一是更改相机角度，这将保留几何形状和位置。

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

为什么three.js SVGLoader会使svgs颠倒？

3 个答案: