CODEWITHSUNDEEP
javascriptcssangularthree.js
Shijil Narayanan
Shijil Narayanan

Reputation: 1019

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

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

Upvotes: 0

Views: 1912

Answers (1)

Mugen87
Mugen87

Reputation: 31076

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

Upvotes: 0

Related Questions