I have successfully created two transparent boxes that are positioned so their faces touch. However, the issue arises when the faces of the boxes actually touch.
// inner object
var mesh2 = new THREE.Mesh(geometry, material);
mesh2.position.x = 0;
mesh2.position.y = 0;
mesh2.position.z = 0;
mesh2.scale.x = 100;
mesh2.scale.y = 50;
mesh2.scale.z = 100;
scene.add( mesh2 );
// outer object
var mesh1 = new THREE.Mesh(geometry, material);
mesh1.position.x = 0;
mesh1.position.y = 0;
mesh1.position.z = 0;
mesh1.scale.x = 100;
mesh1.scale.y = 100;
mesh1.scale.z = 100;
scene.add( mesh1 );
You can view the code here: http://jsfiddle.net/unkya/14/
Is there a solution to remove these artifacts while still maintaining the touching faces?
Additionally, is there a method to add the boxes to the scene without requiring the insertion of the innermost ones first?
Your help is greatly appreciated!