Thickness of lines using THREE.LineBasicMaterial

by

1) Use native OpenGL

You can achieve rendering of line thicknesses with a workaround by setting your browser to use native OpenGL instead of ANGLE. You can read here on how to do this on Chrome.
Keep in mind that you will experience performance differences if you swap to native OpenGL.

EDIT:

The master MrDoob himself posted here how to do this for both Chrome and Firefox.

Note: This first option is no longer a valid solution since the latest OpenGL versions no longer support line thickness either. Check also @gman his answer. This means if you want to use line thickness the second option is the way to go.

2) Use THREE.MeshLine class

There is also another solution; this THREE.MeshLine class on github is a nice workaround. It comes with a special THREE.MeshLineMaterial. According to the docs it is as simple as:

  • Create and populate a geometry
  • Create a THREE.MeshLine and assign the geometry
  • Create a THREE.MeshLineMaterial
  • Use THREE.MeshLine and THREE.MeshLineMaterial to create a THREE.Mesh

More Related Contents:

  1. Drawing a line with three.js dynamically
  2. Multiple transparent textures on the same mesh face in Three.js
  3. How to stop a requestAnimationFrame recursion/loop?
  4. How to get the absolute position of a vertex in three.js?
  5. Three.js / WebGL – transparent planes hiding other planes behind them
  6. Replicating MeshLambertMaterial Using ShaderMaterial ignores textures
  7. How to detect collision in three.js?
  8. Three.js/WebGL: Large spheres appear broken at intersection
  9. WebGL / Three.js – Particles colored by texture flicker erratically while moving camera
  10. Antialiasing not working in Three.js
  11. Threejs: assign different colors to each vertex in a geometry
  12. Why do shaders have to be in html file for webgl program?
  13. “Cross origin requests are only supported for HTTP.” error when loading a local file
  14. How can I render an ‘atmosphere’ over a rendering of the Earth in Three.js?
  15. How to Fit Camera to Object
  16. THREE.js Ray Intersect fails by adding div
  17. Three.js – Orthographic camera
  18. How to rotate a 3D object on axis three.js?
  19. Using textures in THREE.js
  20. Is it possible to enable unbounded number of renderers in THREE.js?
  21. Rendering a transparent shell
  22. Any way to get a bounding box from a three.js Object3D?
  23. How do I clean up and unload a WebGL canvas context from GPU after use?
  24. Three JS Pivot point
  25. Convert 2:1 equirectangular panorama to cube map
  26. three.js transparent object occlusion
  27. How do you pack one 32 bit integers into 4, 8bit ints in GLSL / WebGL?
  28. How to render clipped surfaces as solid objects
  29. Three.js add an object to a group but keep global position/rotation/scale as it was
  30. Switch threejs controls ( from TrackBall to FlyControls and vice versa)

Leave a Comment