three.js wireframe only shape with hidden edges as dashed lines

9
votes

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. Illustration: illustration

I don't know if this is feasible with three.js or if I should try directly with webgl. Should I use THREE.Mesh in wireframe or THREE.Line with LineDashedMaterial or maybe both on top of each other?

2
javascriptthree.jswebgl

2 Answers

7
votes

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.

4
votes

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.