CODEWITHSUNDEEP
three.js
Yarin
Yarin

Reputation: 183849

Showing single side of wireframe - three.js

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/

Upvotes: 1

Views: 1432

Answers (1)

Alex Fallenstedt
Alex Fallenstedt

Reputation: 2091

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.

Upvotes: 1

Related Questions