Can I show only the front side of wireframe mesh?

I would like to display a wireframed sphere whose lines on the back would be in a different color, in order to convey a better understanding of depth.

I’ve tried this :

sphereFront = new THREE.Mesh(
		new THREE.SphereBufferGeometry(0.5, 16, 16),
		new THREE.MeshBasicMaterial({ wireframe: true, color: 0x00e5ff, side: THREE.FrontSide })
	);

sphereBack = new THREE.Mesh(
		new THREE.SphereBufferGeometry(0.5, 16, 16),
		new THREE.MeshBasicMaterial({ wireframe: true, color: 0x0040ff, side: THREE.BackSide })
	);

scene.add( sphereFront, sphereBack );

But the side parameter seems to have no effect when wireframe parameter is true, the lines are always rendered on both sides.

Is there any workaround ?

Hi!
There’s another approach, that has exactly the effect you’re looking for: https://threejs.org/examples/?q=wire#webgl_materials_wireframe (using gl_FrontFacing).

2 Likes

Thank you, it’s exactly this :blush:

1 Like

You’re welcome :slight_smile: :beers:

For the posterity, this didn’t work with the sphereBufferGeometry, but worked fine with icosahedronBufferGeometry :+1: