I am trying to create a unique transparent shape made up of multiple overlapping triangles. Below is the code I am currently using:
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));
To see the issue I am facing with this code, please visit this jsfiddle http://jsfiddle.net/7wk0cfcj/
The current code produces a shape with a darker area in the middle caused by the overlap of triangles. I want the mesh to appear as a single transparent object with consistent color throughout. Is there a solution to achieve this without modifying the triangles to prevent them from overlapping?