CODEWITHSUNDEEP
three.js
Owen
Owen

Reputation: 790

Transparent cube with stroke only

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

Upvotes: 2

Views: 858

Answers (1)

Garrett Johnson
Garrett Johnson

Reputation: 2534

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.

Upvotes: 2

Related Questions