两条 z 相同的丝带，它们相互覆盖答案

【问题标题】：Two ribbon with same z, they covered each other两条 z 相同的丝带，它们相互覆盖
【发布时间】：2012-12-16 06:55:20
【问题描述】：

我正在用 THREE.Ribbon 绘制地图道路，每条道路都有不同颜色的边框，所以我使用了两条色带，一个用边框颜色宽，一个窄，这样就可以达到我的目的了。

我也在ribbon的两端画了一个带圆圈的cap，当然画了两个圆圈，小一个覆盖大一个，就像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末端的帽子看起来异常，当我看上面的丝带，效果很好，但是我用一个角度看，发现丝带不能覆盖圆形。

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

感谢您的指导！

【问题讨论】：

标签： webgl three.js

【解决方案1】：

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

【讨论】：

我知道你提到的“depthTest”，我设置为false，但现象与“depthWrite:false”相同。 this.camera.position.z = 1500; this.camera.position.z = 1000; this.camera.position.y = -600; this.camera.lookAt(new THREE.Vector3(0, 0, 0));
我知道你提到的“depthTest”，我设置为false，但现象与“depthWrite:false”相同。当我这样设置相机位置时： this.camera.position.z = 1500;它运作良好，但是当我这样设置位置时：this.camera.position.z = 1000; this.camera.position.y = -600; this.camera.lookAt(new THREE.Vector3(0, 0, 0));显示上半部分的圆圈，它应该被丝带覆盖，下半部分效果很好。