Rendering transparent mesh with overlapping triangles in Three.js

Question

I'd like to render a transparent shape consisting of several overlapping triangles. Currently I'm using the following code:

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));

Here's a jsfiddle to illustrate my problem http://jsfiddle.net/7wk0cfcj/

The above code works well, except there's a darker area in the middle of the shape(due to overlapping of triangles). I'd like the mesh to appear as single transparent object with the same colour everywhere. Is there a way to achieve this without changing the triangles so that they don't overlap?

Answer 1

Since the Z value is always the same, you could change the z test function on the material to prevent drawing twice in the same spot for your selection.

This feature is not released yet in three.js; its in the dev branch.

http://jsfiddle.net/fgaudet/7wk0cfcj/5/ with a external ref to the dev branch...

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