Could somebody please kindly explain how to use DrawWireAlignedBox?

This seems like it was added on 1.62 update.
Could we get like and example how to use it?
DrawWireAlignedBox is a bit confusing for me, what is the min and max vec3 its expecting?
Or if I have a box how do i extract the min and max for this method to work?
I wish there was a simple DrawWireBox, just like the engine has DrawWireSphere that receives a center and box size.


Hi @fcsa,

I think that helper method is able to draw axis aligned box shapes using lines. You can use the half extents similarly to how you’d calculate the AABB together with the box center position to draw your box.

Here is a helper script I wrote:

var DrawWireAlignedBox = pc.createScript('drawWireAlignedBox');

DrawWireAlignedBox.attributes.add('halfExtents', { type: 'vec3', default: [1, 1, 1] });
DrawWireAlignedBox.attributes.add('color', { type: 'rgb' });

// initialize code called once per entity
DrawWireAlignedBox.prototype.initialize = function () {

    // --- variables
    this.min = new pc.Vec3();
    this.max = new pc.Vec3();

// update code called every frame
DrawWireAlignedBox.prototype.update = function (dt) {

    const pos = this.entity.getPosition();
    this.max.copy(pos).add(this.halfExtents);, this.max, this.color);

And a sample project: PlayCanvas | HTML5 Game Engine


Please note that DrawWireAlignedBox is a private function to the engine and can be changed, modified, removed etc without warning.

The API is designed to be used with BoundingBox | PlayCanvas API Reference that has getMax() and getMin() functions that can be used with DrawWireAlignedBox directly.


Thank you so much @Leonidas. You are a beast!!
@yaustar thanks for the heads up, I hope it stays though it helps a lot for debugging.
I’m actually using dynamic bounding boxes from ‘findComponents’ with render in the entity hierarchy, which is why I wanted to learn how to use this method.