0

私は THREE.Ribbon で地図道路を描いています。すべての道路には異なる色の境界線があるので、2 つのリボンを使用します。

また、canvas2D の linecap のように、リボンの両端にキャップを円で描きます。確かに 2 つの円を描きます。小さな円が大きな円を覆います。

WebGL では Line の幅の最大値が 1 であるため、THREE.Line を代替手段として使用することはできません。

私のコードは次のようなものです：

var circleShape = new THREE.Shape();
var circleRadius = lineWidth/2;
circleShape.moveTo( 0, circleRadius );
circleShape.quadraticCurveTo( circleRadius, circleRadius, circleRadius, 0 );
circleShape.quadraticCurveTo( circleRadius, -circleRadius, 0, -circleRadius );
circleShape.quadraticCurveTo( -circleRadius, -circleRadius, -circleRadius, 0 );
circleShape.quadraticCurveTo( -circleRadius, circleRadius, 0, circleRadius );
var circle = new THREE.ShapeGeometry( circleShape);
var material = new THREE.MeshBasicMaterial( { color: color, depthWrite: false} );
var mesh = new THREE.Mesh( circle, material );
this.parent.add( mesh );

var material = new THREE.MeshBasicMaterial( { color: widerColor, depthWrite: false} );
var widerRibbon = new THREE.Ribbon( widerGeometry, material );
this.parent.add( widerRibbon );

var material = new THREE.MeshBasicMaterial( { color: narrowerColor, depthWrite: false} );
var narrowerRibbon = new THREE.Ribbon( narrowerGeometry, material );
this.parent.add( narrowerRibbon );

私の論理は、後者が前者をカバーするというものです。幅の狭いリボンは幅の広いリボンを覆い、リボンは円の半分を覆います。

私の困難：

その結果、それらは互いにカバーします (depthWrite:false なし)。

THREE.MeshBasicMaterial が depthWrite を false に設定できることがわかりました。それを追加すると、幅の狭いリボンが幅の広いリボンをうまくカバーしていることがわかりましたが、奇妙なのは、リボンの端のキャップが異常に見えることです。リボンを右に見ると、上から見るとうまくいきますが、斜めから見るとリボンが円をカバーできていません。

この問題に対処する方法がわかりません。後の図面がすべて同じ z 座標を持っているときに、前の図面をカバーしたいだけです。

ご指導ありがとうございました！

4

1 に答える 1

0

「画家のアルゴリズム」を使用したい場合 (最後にペイントされたものが常に表示されます)、マテリアルで Z をオフにします。これは、マテリアルを宣言するときに "depthTest" 属性を false に設定することです

于 2012-12-15T22:55:20.573 に答える