3D bounding box

Easily create cuboids and match them to point clouds with any geometric transformation.

Try our demo below !

To change the camera view, use left button for rotation, right button for translation.
In bird eye view, bounding boxes are created in order to automatically fit the nearest point cloud segment.
Edition : to select an object, click on it, a second click switches to rotation mode, a third click to resize mode.
Drag the arrows of the object’s coordinate system to perform a translation along an axis.

Easily write your own annotation application in Javascript using the cuboid element:

Copy to Clipboard

import { css, html, LitElement} from 'lit-element';
import '@pixano/graphics-3d';

const colors = [
  'blue', 'green', 'purple',
  'yellow', 'pink', 'orange', 'tan'
];

class MyDemoCuboid extends LitElement {
  
  firstUpdated() {
    // Called after the element’s DOM has been updated the first time
    // Set element's point cloud from flatten array of (x,y,z) points.
    this.element.pcl = new Float32Array([1.23, 2.98, 1.73, 1.24, 2.99, 1.73, ...]);
  }

onCreate(evt) {
    // listening to the create event dispatched
    // by the element to assign a nice color to
    // the new cuboid.
    const newObj = evt.detail;
    newObj.color = colors[this.element.editableCuboids.size % colors.length];
    this.element.mode = 'update';
  }

get element() {
    // Utility getter of the element
    return this.shadowRoot.querySelector('pxn-cuboid-editor');
  }

render() {
    // Render the template with the cuboid element
    // enriched with some buttons to interact with it.
    return html`
    <pxn-cuboid-editor @create=${this.onCreate}></pxn-cuboid-editor>
   `;
  }
}

customElements.define('my-demo-cuboid', MyDemoCuboid);

Browse the complete code on GitHub

3D bounding box

Third party