graphics-3d

@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

Name	Type	Default	Description
pcl	Float32Array	null	Point cloud as one-dimensional array in the XYZ order
editableCuboids	Set<Cuboid*>	[]	Cuboids rendered in the scene
editTarget	`Cuboid	null`	null
cameraMode	`orthographic	perspective`	perspective
mode	InteractionMode**	edit	Sets the canvas interaction mode. Use none for no interactions at all.

*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

Name	Description
rotate() => void	Rotate selected cuboid by 90°
swap() => void	Swap selected cuboid coordinates

Events

pxn-canvas-2d

Event Name	Detail	Description
create	EditionDetail	Fired when a shape has been created.
update	EditionDetail	Fired when a shapes update has been made.
delete	EditionDetail	Fired when shapes are deleted. Detail is the list of the deleted shape ids.
selection	SelectionDetail	Fired when shapes are selected.
mode	InteractionMode	Fired when user interaction mode changed

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

Shortcuts

pxn-cuboid-editor

Key	Description
n	Switch to create mode
Escape	Unselect shapes
Delete	Delete selected shapes
Ctrl+C	Copy in clipboard currently selected cuboid
Ctrl+V	Create new cuboid (with new id) from the clipboard content
+	Scale up size of points in pointcloud
-	Scale down size of points in pointcloud