@pixano/graphics-3d v0.7.0

@pixano/graphics-3d

Set of web components for 3D point cloud annotations.

Import

import "@pixano/graphics-3d";
// or a specific element
import "@pixano/graphics-3d/lib/pxn-cuboid";

Example: Rectangle annotation

Example usage:

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() {
    fetch('pointcloud.bin').then((response) => {
      return response.ok ? response.arrayBuffer() : Promise.reject(response.status);
    }).then((points) => {
      this.element.pcl = new Float32Array(points);
    });
  }

  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];
  }

  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>
    <div>
        <button @click=${() => this.element.mode = 'create'}>Add</button>
    </div>`;
  }
}

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

API

Properties/Attributes

pxn-cuboid-editor

*Cuboid format:

interface Cuboid {
  id: string;
  // x, y, z
  position: number[];
  // length, width, height
  size: number[];
  // rotation around z axis (trigometric)
  heading: number;
  // optional color
  color?: number;
}

**InteractionMode is a string with the following possible values:

type InteractiveMode =  "edit" | "create" | "none";

Methods

pxn-cuboid-editor

Events

pxn-canvas-2d

interface EditionDetail {
  // cuboid being created/edited/deleted
  detail: Cuboid;
}
interface SelectionDetail {
  // cuboids being selected
  detail: Cuboid[];
}

Shortcuts

pxn-cuboid-editor