1

three.js materials have a side attribute which controls whether the front and/or back side faces of a mesh get rendered. Is there a way to do the same thing with wireframes, so that only the front-facing edges get rendered?

Showing backside of a cube: 

  material = new THREE.MeshPhongMaterial({
    color: 0xFF9800, 
    side: THREE.BackSide,
    opacity: 1//0
  });

enter image description here https://jsfiddle.net/8p7jja9L/34/

Trying to show frontside of wireframe:

  var geo = new THREE.EdgesGeometry( mesh.geometry );
  var mat = new THREE.LineBasicMaterial( { 
    color: 0x000000, 
    linewidth: 4,
    side: THREE.FrontSide
  } );
  var wireframe = new THREE.LineSegments( geo, mat );
  mesh.add( wireframe );

  wireframe.renderOrder = 1;

enter image description here https://jsfiddle.net/8p7jja9L/35/

Yarin
  • 173,523
  • 149
  • 402
  • 512

1 Answers1

1

If I understand you correctly, you can simply add wireframe: true to the material and specify the side you want to render:

https://jsfiddle.net/8p7jja9L/39/

  material = new THREE.MeshPhongMaterial({
    color: 0xFF9800, 
    side: THREE.FrontSide,
    wireframe: true <---
  });

this will render a single side of the wireframe for three.js' box geometry. If this is not the wireframe you imagined, you may need to construct a box out of planes or use a tool like blender to create the wireframe you desire.

Alex Fallenstedt
  • 2,040
  • 1
  • 18
  • 34
  • 1
    I was hoping for a way to do it using the EdgesGeometry, but I think the way you demonstrated is the best I can hope for. Thanks- – Yarin Nov 28 '17 at 03:11
  • 1
    As of v112 on Jan 11, 2020, the frontside does not change wireframe. Both sides are visible now. unfortunately – den232 Jan 11 '20 at 17:52
  • take a look at this question https://stackoverflow.com/questions/31539130/display-wireframe-and-solid-color – prieston Jan 13 '21 at 19:48