Is there a way to draw a box like shape with only border using three js?

Question

I am a newbie to threejs, I wanted to render a box around a symbol in my canvas.The box should be transparent, should only have border around it .The border width of the box should be configurable.

Currently wireframe is used to render a box like shape and I am not able to increase the width of the wireframe to more than 1.It is also mentioned in the documentation that we cannot increase wireframeLinewidth more than 1.

https://threejs.org/docs/index.html#api/en/materials/MeshBasicMaterial

Current code implementation is as follow

const material = new THREE.MeshBasicMaterial({
  color: feature.color,
  opacity: 0.75,
  transparent: true,
  side: THREE.DoubleSide,
  wireframe: true,
  wireframeLinewidth: 1
});

Please help if there a way to build a transparent box like shape with configurable border width in threejs

Mugen87 · Accepted Answer · 2019-08-13 11:23:41Z

0

Please help if there a way to build a transparent box like shape with configurable border width in threejs

Rendering lines with WebGL line primitives will result in 1px wide lines. However, there is actually a way to create wireframes with configurable width. The following official example demonstrates this approach:

https://threejs.org/examples/webgl_lines_fat_wireframe

The class THREE.Wireframe renders its line geometry as triangles (sometimes called wide, fat or mesh lines). Just import the class as well as LineMaterial and WireframeGeometry2 and you can use this approach in your project.

three.js R107

answered Aug 13, 2019 at 11:23

Mugen87

31.2k4 gold badges34 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Shijil Narayanan Over a year ago

Thanks Mugen, I will try this approach.

Collectives™ on Stack Overflow

Is there a way to draw a box like shape with only border using three js?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related