2

In three.js How can I render a cube with no fill but only the edges? For example: enter image description here

Owen
  • 760
  • 1
  • 7
  • 25

1 Answers1

1

If you need to control the thickness of the lines you can use the LineGeometry class that's implemented in the THREE.js examples folder that creates triangle strips instead of GL.Lines to render.

See the following examples:

Let me know if you need clarification and I can try to give a bit more detail.

Edit

I've taken your example comment and modified it a bit here: https://jsfiddle.net/L21ozkdq/2/.

Here are the big things to keep in mind (they are called out in comments, as well): - Import the LineGeometry example files.

  • Create a LineGeometry object instead of BufferGeometry.

  • Create a LineMaterial instead of LineBasicMaterial.

  • Create a Line2 Object from the geometry and material.

  • Create a positions array instead of an attribute for the LineGeometry.

  • Create a box from a single line instead of many line segments in the position array.

Garrett Johnson
  • 2,413
  • 9
  • 17
  • Using the lines_fat_wireframe example I can get a cube with a stroke but it also has lines across each face, how can I avoid that? Code: https://pastebin.com/1m8VFpGc – Owen Mar 05 '19 at 14:19
  • The built in THREE box will have lines across each face because it's made of triangles. You'll have to create custom LineGeometry (like in the in catmull rom curve `webgl_lines_fat` example) with lines that only go along the edges of the cube. – Garrett Johnson Mar 05 '19 at 16:33
  • I created the cube lines which works but the line width can't be changed due to a limitation with OpenGL. What can be done to get around this? Code: https://jsfiddle.net/rxcmhpfe/ Doc: https://threejs.org/docs/#api/en/materials/LineBasicMaterial.linewidth – Owen Mar 06 '19 at 09:32
  • 1
    @Owen I've updated the answer with more details. You have to use the example scripts that extend THREE provided in the links I posted. Hope that helps! – Garrett Johnson Mar 06 '19 at 18:00