Customize the Box3Helper appearance

Questions
1

Hi, I’m wondering if there is a way to customize the appearance of the Box3Helper. It takes color as an argument, but would that be possible to make the line thicker by using linewidth somehow, and possibly also making it dashed?
I’d appreciate any pointers! Thank you

2

While it’s a bit awkward (the “right” way to go about it would probably be something like using Box3.getSize and Box3.getCentre, then built your own geometry with them) - Box3Helper is still just a 3d object - and you can extract it’s geometry (helper.geometry).

After you pick up the geometry, your creativity is the limit - mix the vertices with fat lines (both normal and dashed), remap them to a spline, go full Borderlands on the geometry with some custom shader.

2 Likes
3

Hi @mjurczyk, thank you so much for such quick answer. I’m new to Three.js so I appreciate any help :slight_smile: I’m going to play around with this!

4

Hi @mjurczyk, I came back to this task after a while and I can’t seem to find any resource regarding how to extract the geometry and then use it. As mentioned, I’m a beginner, so I would like to ask if you could point me in the right direction/resource or just explain a bit more in detail? Thank you!

1 Like
5

:point_up: the answer’s in the original post. Geometry is a property of any Mesh - you can access it simply in the object.

6

Yes, any example of that you can point me to? I’m still not sure how to use that to customize Box3Helper specifically (which has only 3 properties:(box: THREE.Box3, color?: THREE.Color) )

7

Not correct. Those two things (Box3 and color) are parameters, that you pass into Box3Helper constructor.
Box3Helper itself is an object of LineSegments, that has a geometry and a material.

3 Likes
9

Alright, sorry for the wrong terminology, thanks for clarifying! So I need to pass Box3 and color into Box3Helper. Box3 on another hand is constructed with ( min : Vector3, max : Vector3 ). I get how to create a LineSegments but how does it come into play for the Box3Helper I need? I would appreciate a straightforward explanation, apologies!

10

Uhm… I’ve read your initial post and I’m afraid that it’s not possible to do the things you want with Box3Helper.

  1. How it’s done now, it’s not possible to have dashes on lines, as for that you have to call .computeLineDistances() method of LineSegments, but it won’t work, because the geometry is indexed (so you’ll just get a console warning).
  2. By default and forever after, line width is 1 pixel width. And to be able to change the width you need to use that approach: three.js examples

So, it seems you’re on the way to create a box helper, of dashed thick lines, from the scratch :sunglasses:
Maybe somebody here has a idea of simpler/easier solution :slight_smile:

1 Like