0

我正在用 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，我加了，然后我发现较窄的ribbon成功覆盖了较宽的ribbon，但奇怪的是ribbon两端的帽子似乎异常，当我看右边的ribbon时在上面，它工作得很好，但是当我用一个角度看它时，我发现丝带无法覆盖圆圈。

我不知道如何处理这个问题，我只是希望后面的图在它们都具有相同的 z 坐标时覆盖前面的图。

感谢您的指导！

4

1 回答 1

0

如果您想使用“画家的算法”（最后绘制的始终是您所看到的），只需在材质中关闭 Z。也就是在声明材质时将“depthTest”属性设置为false

于 2012-12-15T22:55:20.573 回答