Three.JS wireframe material – all polygons vs. just edges

by

If you want to render a wireframe of a given geometry, you can now use this pattern:

var geo = new THREE.EdgesGeometry( geometry ); // or WireframeGeometry( geometry )

var mat = new THREE.LineBasicMaterial( { color: 0xffffff, linewidth: 2 } );

var wireframe = new THREE.LineSegments( geo, mat );

scene.add( wireframe );

WireframeGeometry will render all edges. EdgesGeometry will render the hard edges only.

Also see this related answer on how to render both a model and its wireframe.

EDIT: updated to three.js.r.82

More Related Contents:

  1. “Cross origin requests are only supported for HTTP.” error when loading a local file
  2. How can I render an ‘atmosphere’ over a rendering of the Earth in Three.js?
  3. How to Fit Camera to Object
  4. THREE.js Ray Intersect fails by adding div
  5. Three.js – Orthographic camera
  6. How to rotate a 3D object on axis three.js?
  7. Thickness of lines using THREE.LineBasicMaterial
  8. Converting World coordinates to Screen coordinates in Three.js using Projection
  9. Transparent background with three.js
  10. Three.js / WebGL – transparent planes hiding other planes behind them
  11. Is it possible to enable unbounded number of renderers in THREE.js?
  12. Rendering a transparent shell
  13. How do you save an image from a Three.js canvas?
  14. Replicating MeshLambertMaterial Using ShaderMaterial ignores textures
  15. Three JS Pivot point
  16. Convert 2:1 equirectangular panorama to cube map
  17. three.js transparent object occlusion
  18. How to change face color in Three.js
  19. WebGL / Three.js – Particles colored by texture flicker erratically while moving camera
  20. How to get the global/world position of a child object?
  21. Orthographic camera and selecting objects with raycast
  22. catch the click event on a specific mesh in the renderer
  23. Antialiasing not working in Three.js
  24. Detect clicked object in THREE.js
  25. How to render clipped surfaces as solid objects
  26. Three.js add an object to a group but keep global position/rotation/scale as it was
  27. How to flip a Three.js texture horizontally
  28. Why do shaders have to be in html file for webgl program?
  29. How to toggle preserveDrawingBuffer in three.js?
  30. Apply color gradient to material on mesh – three.js

Leave a Comment