three.js - パス/シェイプ オブジェクトの y 軸の反転

Question

https://code.google.com/p/canvg/に基づいてhttp://mtcc.com/site/jscanvastest.htmlを使用して、一部の SVG を HTML5 キャンバスに変換しました。出力の一部を使用して、lineTo、moveTo、および bezierCurveTo を使用して THREE.Shape オブジェクトを構築します。

HTML5 キャンバスと three.js では y 軸の向きが異なるため、 three.js で y 軸を反転させる方法を探しています。

THREE.Shape では機能しない 2 つのアプローチに従います。どちらもサーフェスの方向を反転させるため、メッシュが反対側に表示され、反転の効果が無効になります。

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 } ) );