2

2D svg ファイルに基づいて Three.js で建物の 3D マップをレンダリングしようとしています。基本的に、私がやっていることは、svg から各パスを取得し、d3.js から transformSVGPath を使用して形状を作成し、それを押し出すことです。

var material = new THREE.MeshLambertMaterial({
    color: 0xffffff,
    shading: THREE.FlatShading,
    overdraw: 0.5
});
var obj = {
    name: id,
    shape: transformSVGPathExposed(el.path)
};
obj.shape3d = obj.shape.extrude({
    amount: 5,
    bevelEnabled: false
});
obj.mesh = new THREE.Mesh(obj.shape3d, material);
obj.mesh.rotation.x = Math.PI/2;
obj.mesh.scale.set(1,1,1);
obj.mesh.position.x = -750;
obj.mesh.position.z = -500;
obj.mesh.position.y = 20;
MapEngine.shops.push(obj);

transformSVGPathExposed は、外部から呼び出し可能に公開された d3.js の transformSVGPath 関数です。私の svg ファイルは次のようになります: map svg . レンダリング効果は次のようになります: Three.js render

これらの醜い滑らかでないメッシュが表示される理由は何ですか?

4

1 に答える 1

3

これは CanvasRenderer のよく知られた問題であり、明らかに設計によるものです。回避策として、material.overdraw を 0.35 などのゼロ以外の値に設定します (このパラメーターは最近ブール値から浮動小数点数に変更されました)。https://github.com/mrdoob/three.js/pull/3407を参照してください

その他のオプションは、WebGLRenderer に切り替えることです。レンダリングの問題はなく、通常ははるかに高速です。

于 2013-10-23T11:50:26.677 に答える