How to make a 3D selection box like the one in Editor?

Hey, guys, I just found the 3D selection box(the box by white line segment in the following pic) used in the Editor is nice, and wanna make it in my project.

What I can think so far is
1 Make a transparent box, but with solid line segment at eight corners of one box.
2 Once an obect selected by cursor, scale the box acoording to the size of the selected object, and postion the box to the selected object.

This method is kind of ugly, because the solid line segmane also can be scaled, it goes thin or thigh.

Do you have any ideas about it?

We use renderLine method with some math to draw those lines, and calculating AABB based on selection aabb’s.

Hi max, thanks for your help. I’m working on it now, but got a problem.
The renderLine function seems not to work. I use it like this,

var start = new pc.Vec3(0,0,0);
var end = new pc.Vec3(50,0,0);
var color = new pc.Color(30,50,70);
this.app.renderLine(start, end, color);

But when it runs, I can’t see the line in the game scene…
This is the link to my project https://playcanvas.com/project/482357/overview/ffff

Just tried renderring the line in update function, and it finally showed up…

renderLine is part of immediate rendering functionality, means it will only render once after executing the function, and will not preserve the object. So it is easier to use it for debugging and arbitrary rendering on demand.

I finally bring it out. Thanks for your quick flash-like help, max !!!

Btw, can I make the line bolder?

1 Like

Here comes the problems! :frowning:
Those lines are implemented using WebGL which is based on native support by GPU and driver, and sad story, in OpenGL and DirectX support for lines wider than 1px is very inconsistent, leading to it be unsupported virtually.

So if you need fat lines, then you would need to implement own line renderer…

Looks like you have miss-configured VSM shadows bias.

Yes, just noticed the shadow bias problem, too. I have already changed it, and now it’s good! :grin: