Question

我用THREE.Ribbon绘制地图道路，每条道路都有不同颜色的边框，所以我使用两条缎带，一条边框颜色较宽，一条较窄，然后我可以实现我的目的。

我还用圆圈在两个带上绘制帽子，当然画两个圆圈，较小的一个覆盖较大的圆圈，就像在canvas2D中的linecap一样。

我不能使用THREE.Line作为替代方案，因为我的webgl中Line的最大宽度值为1。

我的代码就像这样：

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坐标时。

感谢您的指导！

Answer 1

如果你想使用“画家的算法”（whatevr最后画的总是你看到的），只需在材料中关闭Z.这是，在声明材料时将“depthTest”属性设置为false

两条带有相同z的缎带，它们互相覆盖

1 个答案: