three.js - 翻转路径/形状对象的 y 轴

Question

我使用基于https://code.google.com/p/canvg/的http://mtcc.com/site/jscanvastest.html将一些 SVG 转换为 HTML5 画布。我使用输出的一部分来构造 THREE.Shape -object，使用 lineTo、moveTo 和 bezierCurveTo。

因为 y 轴的方向在 HTML5 canvas 和 three.js 之间是不同的，所以我正在寻找一种在 three.js 中翻转 y 轴的方法。

以下两种方法不适用于 THREE.Shape。它们都翻转了表面方向，因此网格在错误的一侧变得可见，从而抵消了翻转的效果。

1)

geom.applyMatrix(new THREE.Matrix4(1,0,0,0,0,-1,0,0,0,0,1,0,0,0,0,0));

2)

mesh.scale.set( 1, -1, 1 );

应产生字母“L”的几何示例

var ctx = new THREE.Shape();
ctx.moveTo(50,10);
ctx.lineTo(50,80);
ctx.lineTo(90,80);
ctx.lineTo(90,60);
ctx.lineTo(69,60);
ctx.lineTo(60,10);
var geom = new THREE.ShapeGeometry( ctx );
var mesh = new THREE.Mesh( geom, new THREE.MeshLambertMaterial( { color: 0x000000 } ) );