Three.js Wireframe Only Shape With Hidden Edges As Dashed Lines

I'm trying to create a specific type of 3D object in three.js. I want for example a cube in wireframe mode (so only edges shown). But I want the edges that are behind to be dashed.

Solution 1:

I managed to do it. You need to create three objects.

1st object: the solid 3d object (I mean the faces not the edges)

2nd object: all edges but dashed

3rd object: all edges but normal (not dashed)

For the 1st object set the material with color: false, side: THREE.DoubleSide, depthTest: true.

Second object material: color: (whatever you like), depthTest: false.

Third object material: color: (whatever you like), depthTest: true.

I also set all materials with polygonOffset: true, polygonOffsetFactor: 1, polygonOffsetUnits: 1 to get rid of z-fighting.

Solution 2:

This is a really cool idea. I have implemented your answer as described above at:

http://stemkoski.github.com/Three.js/Dashed-3D.html

in case anybody wants to see it in action.