Could somebody please kindly explain how to use DrawWireAlignedBox?

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.min.copy(pos).sub(this.halfExtents);
    this.max.copy(pos).add(this.halfExtents);

    this.app.drawWireAlignedBox(this.min, this.max, this.color);
};

And a sample project: PlayCanvas | HTML5 Game Engine

3 Likes