Javascript 在Three.js中使用重叠三角形渲染透明网格

我想渲染一个由几个重叠三角形组成的透明形状。目前我正在使用以下代码：

geometry = new THREE.Geometry();
material = new THREE.MeshBasicMaterial({
    color: 0x00ff00,
    side: THREE.DoubleSide,
    transparent: true,
    opacity: 0.2
});


mesh = new THREE.Mesh( geometry, material );
geometry.vertices.push(new THREE.Vector3(100, 0, 1));
geometry.vertices.push(new THREE.Vector3(0, -200, 1));
geometry.vertices.push(new THREE.Vector3(200, -200, 1));

geometry.vertices.push(new THREE.Vector3(0, 0, 1));
geometry.vertices.push(new THREE.Vector3(200, 0, 1));
geometry.vertices.push(new THREE.Vector3(100, -200, 1));
geometry.faces.push(new THREE.Face3(0,1,2));
geometry.faces.push(new THREE.Face3(3,4,5));

这里有一个jsfiddle来说明我的问题

上述代码运行良好，除了形状中间的一个较暗的区域（由于三角形的重叠）。我希望网格显示为一个透明的物体，每个地方都有相同的颜色。有没有一种方法可以在不改变三角形的情况下实现这一点，从而使它们不会重叠？

添加到材质中：

blending:3.NoBlending

缺点是你看不透了，所以三角形后面的物体是看不见的

---

由于Z值始终相同，您可以更改材质上的Z测试功能，以防止在同一位置绘制两次供您选择

该功能尚未在three.js中发布；它在开发部门

使用对开发分支的外部引用

material = new THREE.MeshBasicMaterial({
    color: 0x00ff00,
    side: THREE.DoubleSide,
    transparent: true,
    opacity: 0.2,
    depthFunc: THREE.LessDepth
});

---

您可以尝试使用组合插件，如（CSG代表Constructional solid Geometry）。该插件将简单的几何图形组合在一起，形成复杂的形状。这是一个非常轻的插件，非常容易使用。为什么你想让它透明？只需给它纯色。如果三角形是透明的，它肯定会显示重叠。因为你有顶点，而不是渲染三角形，你可以渲染多边形。使用不透明材质将三角形渲染为纹理。然后将纹理渲染为半透明的不透明度覆盖。不幸的是，这不是我想要的。我的用例是，我希望允许用户高亮显示屏幕上的某个区域。我不想让一个区域变得更暗，如果用户在它上面画两次。非常感谢你，这正是我需要的。您也可以在当前的three.js版本中使用

renderer.context.depthFunc（renderer.context.LESS）