@operato/scene-urdf 1.2.2

package/dist/elements/urdf-drag-controls.d.ts

@@ -0,0 +1,32 @@
+import { Raycaster, Vector3, Scene, Camera, Ray } from 'three';
+import { URDFJoint } from 'urdf-loader';
+export declare class URDFDragControls {
+    scene: Scene;
+    enabled: boolean;
+    raycaster: Raycaster;
+    initialGrabPoint: Vector3;
+    hitDistance: number;
+    hovered: any;
+    manipulating: any;
+    constructor(scene: Scene);
+    update(): void;
+    updateJoint(joint: URDFJoint, angle: number): void;
+    onDragStart(joint: URDFJoint): void;
+    onDragEnd(joint: URDFJoint): void;
+    onHover(joint: URDFJoint): void;
+    onUnhover(joint: URDFJoint): void;
+    getRevoluteDelta(joint: URDFJoint, startPoint: Vector3, endPoint: Vector3): number;
+    getPrismaticDelta(joint: URDFJoint, startPoint: Vector3, endPoint: Vector3): number;
+    moveRay(toRay: Ray): void;
+    setGrabbed(grabbed: boolean): void;
+}
+export declare class PointerURDFDragControls extends URDFDragControls {
+    camera: Camera;
+    domElement: HTMLElement;
+    _mouseDown: (e: MouseEvent) => void;
+    _mouseMove: (e: MouseEvent) => void;
+    _mouseUp: (e: MouseEvent) => void;
+    constructor(scene: Scene, camera: Camera, domElement: HTMLElement);
+    getRevoluteDelta(joint: URDFJoint, startPoint: Vector3, endPoint: Vector3): number;
+    dispose(): void;
+}

package/dist/elements/urdf-drag-controls.js

@@ -0,0 +1,185 @@
+import { Raycaster, Vector3, Plane, Vector2 } from 'three';
+// Find the nearest parent that is a joint
+function isJoint(j) {
+    return j.isURDFJoint && j.jointType !== 'fixed';
+}
+function findNearestJoint(child) {
+    let curr = child;
+    while (curr) {
+        if (isJoint(curr)) {
+            return curr;
+        }
+        curr = curr.parent;
+    }
+    return curr;
+}
+const prevHitPoint = new Vector3();
+const newHitPoint = new Vector3();
+const pivotPoint = new Vector3();
+const tempVector = new Vector3();
+const tempVector2 = new Vector3();
+const projectedStartPoint = new Vector3();
+const projectedEndPoint = new Vector3();
+const plane = new Plane();
+export class URDFDragControls {
+    constructor(scene) {
+        this.enabled = true;
+        this.scene = scene;
+        this.raycaster = new Raycaster();
+        this.initialGrabPoint = new Vector3();
+        this.hitDistance = -1;
+        this.hovered = null;
+        this.manipulating = null;
+    }
+    update() {
+        const { raycaster, hovered, manipulating, scene } = this;
+        if (manipulating) {
+            return;
+        }
+        let hoveredJoint = null;
+        const intersections = raycaster.intersectObject(scene, true);
+        if (intersections.length !== 0) {
+            const hit = intersections[0];
+            this.hitDistance = hit.distance;
+            hoveredJoint = findNearestJoint(hit.object);
+            this.initialGrabPoint.copy(hit.point);
+        }
+        if (hoveredJoint !== hovered) {
+            if (hovered) {
+                this.onUnhover(hovered);
+            }
+            this.hovered = hoveredJoint;
+            if (hoveredJoint) {
+                this.onHover(hoveredJoint);
+            }
+        }
+    }
+    updateJoint(joint, angle) {
+        joint.setJointValue(angle);
+    }
+    onDragStart(joint) { }
+    onDragEnd(joint) { }
+    onHover(joint) { }
+    onUnhover(joint) { }
+    getRevoluteDelta(joint, startPoint, endPoint) {
+        // set up the plane
+        tempVector.copy(joint.axis).transformDirection(joint.matrixWorld).normalize();
+        pivotPoint.set(0, 0, 0).applyMatrix4(joint.matrixWorld);
+        plane.setFromNormalAndCoplanarPoint(tempVector, pivotPoint);
+        // project the drag points onto the plane
+        plane.projectPoint(startPoint, projectedStartPoint);
+        plane.projectPoint(endPoint, projectedEndPoint);
+        // get the directions relative to the pivot
+        projectedStartPoint.sub(pivotPoint);
+        projectedEndPoint.sub(pivotPoint);
+        tempVector.crossVectors(projectedStartPoint, projectedEndPoint);
+        const direction = Math.sign(tempVector.dot(plane.normal));
+        return direction * projectedEndPoint.angleTo(projectedStartPoint);
+    }
+    getPrismaticDelta(joint, startPoint, endPoint) {
+        tempVector.subVectors(endPoint, startPoint);
+        plane.normal.copy(joint.axis).transformDirection(joint.parent.matrixWorld).normalize();
+        return tempVector.dot(plane.normal);
+    }
+    moveRay(toRay) {
+        const { raycaster, hitDistance, manipulating } = this;
+        const { ray } = raycaster;
+        if (manipulating) {
+            ray.at(hitDistance, prevHitPoint);
+            toRay.at(hitDistance, newHitPoint);
+            let delta = 0;
+            if (manipulating.jointType === 'revolute' || manipulating.jointType === 'continuous') {
+                delta = this.getRevoluteDelta(manipulating, prevHitPoint, newHitPoint);
+            }
+            else if (manipulating.jointType === 'prismatic') {
+                delta = this.getPrismaticDelta(manipulating, prevHitPoint, newHitPoint);
+            }
+            if (delta) {
+                this.updateJoint(manipulating, manipulating.angle + delta);
+            }
+        }
+        this.raycaster.ray.copy(toRay);
+        this.update();
+    }
+    setGrabbed(grabbed) {
+        const { hovered, manipulating } = this;
+        if (grabbed) {
+            if (manipulating !== null || hovered === null) {
+                return;
+            }
+            this.manipulating = hovered;
+            this.onDragStart(hovered);
+        }
+        else {
+            if (this.manipulating === null) {
+                return;
+            }
+            this.onDragEnd(this.manipulating);
+            this.manipulating = null;
+            this.update();
+        }
+    }
+}
+export class PointerURDFDragControls extends URDFDragControls {
+    constructor(scene, camera, domElement) {
+        super(scene);
+        this.camera = camera;
+        this.domElement = domElement;
+        const raycaster = new Raycaster();
+        const mouse = new Vector2();
+        function updateMouse(e) {
+            mouse.x = (e.offsetX / domElement.offsetWidth) * 2 - 1;
+            mouse.y = -(e.offsetY / domElement.offsetHeight) * 2 + 1;
+        }
+        this._mouseDown = (e) => {
+            updateMouse(e);
+            raycaster.setFromCamera(mouse, this.camera);
+            this.moveRay(raycaster.ray);
+            this.setGrabbed(true);
+        };
+        this._mouseMove = (e) => {
+            updateMouse(e);
+            raycaster.setFromCamera(mouse, this.camera);
+            this.moveRay(raycaster.ray);
+        };
+        this._mouseUp = (e) => {
+            updateMouse(e);
+            raycaster.setFromCamera(mouse, this.camera);
+            this.moveRay(raycaster.ray);
+            this.setGrabbed(false);
+        };
+        domElement.addEventListener('pointerdown', this._mouseDown);
+        domElement.addEventListener('pointermove', this._mouseMove);
+        domElement.addEventListener('pointerup', this._mouseUp);
+    }
+    getRevoluteDelta(joint, startPoint, endPoint) {
+        const { camera, initialGrabPoint } = this;
+        // set up the plane
+        tempVector.copy(joint.axis).transformDirection(joint.matrixWorld).normalize();
+        pivotPoint.set(0, 0, 0).applyMatrix4(joint.matrixWorld);
+        plane.setFromNormalAndCoplanarPoint(tempVector, pivotPoint);
+        tempVector.copy(camera.position).sub(initialGrabPoint).normalize();
+        // if looking into the plane of rotation
+        if (Math.abs(tempVector.dot(plane.normal)) > 0.3) {
+            return super.getRevoluteDelta(joint, startPoint, endPoint);
+        }
+        else {
+            // get the up direction
+            tempVector.set(0, 1, 0).transformDirection(camera.matrixWorld);
+            // get points projected onto the plane of rotation
+            plane.projectPoint(startPoint, projectedStartPoint);
+            plane.projectPoint(endPoint, projectedEndPoint);
+            tempVector.set(0, 0, -1).transformDirection(camera.matrixWorld);
+            tempVector.cross(plane.normal);
+            tempVector2.subVectors(endPoint, startPoint);
+            return tempVector.dot(tempVector2);
+        }
+    }
+    dispose() {
+        const { domElement } = this;
+        domElement.removeEventListener('pointerdown', this._mouseDown);
+        domElement.removeEventListener('pointermove', this._mouseMove);
+        domElement.removeEventListener('pointerup', this._mouseUp);
+    }
+}
+//# sourceMappingURL=urdf-drag-controls.js.map

package/dist/elements/urdf-drag-controls.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"urdf-drag-controls.js","sourceRoot":"","sources":["../../src/elements/urdf-drag-controls.ts"],"names":[],"mappings":"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","sourcesContent":["import { Raycaster, Vector3, Plane, Vector2, Scene, Camera, Object3D, Ray } from 'three'\nimport { URDFJoint } from 'urdf-loader'\n\n// Find the nearest parent that is a joint\nfunction isJoint(j: URDFJoint) {\n  return j.isURDFJoint && j.jointType !== 'fixed'\n}\n\nfunction findNearestJoint(child: Object3D) {\n  let curr: Object3D | null = child\n  while (curr) {\n    if (isJoint(curr as URDFJoint)) {\n      return curr\n    }\n\n    curr = curr.parent\n  }\n\n  return curr\n}\n\nconst prevHitPoint = new Vector3()\nconst newHitPoint = new Vector3()\nconst pivotPoint = new Vector3()\nconst tempVector = new Vector3()\nconst tempVector2 = new Vector3()\nconst projectedStartPoint = new Vector3()\nconst projectedEndPoint = new Vector3()\nconst plane = new Plane()\nexport class URDFDragControls {\n  scene: Scene\n\n  enabled: boolean\n  raycaster: Raycaster\n  initialGrabPoint: Vector3\n  hitDistance: number\n\n  hovered: any\n  manipulating: any\n\n  constructor(scene: Scene) {\n    this.enabled = true\n    this.scene = scene\n\n    this.raycaster = new Raycaster()\n    this.initialGrabPoint = new Vector3()\n\n    this.hitDistance = -1\n    this.hovered = null\n    this.manipulating = null\n  }\n\n  update() {\n    const { raycaster, hovered, manipulating, scene } = this\n\n    if (manipulating) {\n      return\n    }\n\n    let hoveredJoint = null\n    const intersections = raycaster.intersectObject(scene, true)\n    if (intersections.length !== 0) {\n      const hit = intersections[0]\n      this.hitDistance = hit.distance\n      hoveredJoint = findNearestJoint(hit.object)\n      this.initialGrabPoint.copy(hit.point)\n    }\n\n    if (hoveredJoint !== hovered) {\n      if (hovered) {\n        this.onUnhover(hovered)\n      }\n\n      this.hovered = hoveredJoint\n\n      if (hoveredJoint) {\n        this.onHover(hoveredJoint as URDFJoint)\n      }\n    }\n  }\n\n  updateJoint(joint: URDFJoint, angle: number) {\n    joint.setJointValue(angle)\n  }\n\n  onDragStart(joint: URDFJoint) {}\n\n  onDragEnd(joint: URDFJoint) {}\n\n  onHover(joint: URDFJoint) {}\n\n  onUnhover(joint: URDFJoint) {}\n\n  getRevoluteDelta(joint: URDFJoint, startPoint: Vector3, endPoint: Vector3) {\n    // set up the plane\n    tempVector.copy(joint.axis).transformDirection(joint.matrixWorld).normalize()\n    pivotPoint.set(0, 0, 0).applyMatrix4(joint.matrixWorld)\n    plane.setFromNormalAndCoplanarPoint(tempVector, pivotPoint)\n\n    // project the drag points onto the plane\n    plane.projectPoint(startPoint, projectedStartPoint)\n    plane.projectPoint(endPoint, projectedEndPoint)\n\n    // get the directions relative to the pivot\n    projectedStartPoint.sub(pivotPoint)\n    projectedEndPoint.sub(pivotPoint)\n\n    tempVector.crossVectors(projectedStartPoint, projectedEndPoint)\n\n    const direction = Math.sign(tempVector.dot(plane.normal))\n    return direction * projectedEndPoint.angleTo(projectedStartPoint)\n  }\n\n  getPrismaticDelta(joint: URDFJoint, startPoint: Vector3, endPoint: Vector3) {\n    tempVector.subVectors(endPoint, startPoint)\n    plane.normal.copy(joint.axis).transformDirection(joint.parent!.matrixWorld).normalize()\n\n    return tempVector.dot(plane.normal)\n  }\n\n  moveRay(toRay: Ray) {\n    const { raycaster, hitDistance, manipulating } = this\n    const { ray } = raycaster\n\n    if (manipulating) {\n      ray.at(hitDistance, prevHitPoint)\n      toRay.at(hitDistance, newHitPoint)\n\n      let delta = 0\n      if (manipulating.jointType === 'revolute' || manipulating.jointType === 'continuous') {\n        delta = this.getRevoluteDelta(manipulating, prevHitPoint, newHitPoint)\n      } else if (manipulating.jointType === 'prismatic') {\n        delta = this.getPrismaticDelta(manipulating, prevHitPoint, newHitPoint)\n      }\n\n      if (delta) {\n        this.updateJoint(manipulating, manipulating.angle + delta)\n      }\n    }\n\n    this.raycaster.ray.copy(toRay)\n    this.update()\n  }\n\n  setGrabbed(grabbed: boolean) {\n    const { hovered, manipulating } = this\n    if (grabbed) {\n      if (manipulating !== null || hovered === null) {\n        return\n      }\n\n      this.manipulating = hovered\n      this.onDragStart(hovered)\n    } else {\n      if (this.manipulating === null) {\n        return\n      }\n\n      this.onDragEnd(this.manipulating)\n      this.manipulating = null\n      this.update()\n    }\n  }\n}\n\nexport class PointerURDFDragControls extends URDFDragControls {\n  camera: Camera\n  domElement: HTMLElement\n\n  _mouseDown: (e: MouseEvent) => void\n  _mouseMove: (e: MouseEvent) => void\n  _mouseUp: (e: MouseEvent) => void\n\n  constructor(scene: Scene, camera: Camera, domElement: HTMLElement) {\n    super(scene)\n\n    this.camera = camera\n    this.domElement = domElement\n\n    const raycaster = new Raycaster()\n    const mouse = new Vector2()\n\n    function updateMouse(e: MouseEvent) {\n      mouse.x = (e.offsetX / domElement.offsetWidth) * 2 - 1\n      mouse.y = -(e.offsetY / domElement.offsetHeight) * 2 + 1\n    }\n\n    this._mouseDown = (e: MouseEvent) => {\n      updateMouse(e)\n      raycaster.setFromCamera(mouse, this.camera)\n      this.moveRay(raycaster.ray)\n      this.setGrabbed(true)\n    }\n\n    this._mouseMove = (e: MouseEvent) => {\n      updateMouse(e)\n      raycaster.setFromCamera(mouse, this.camera)\n      this.moveRay(raycaster.ray)\n    }\n\n    this._mouseUp = (e: MouseEvent) => {\n      updateMouse(e)\n      raycaster.setFromCamera(mouse, this.camera)\n      this.moveRay(raycaster.ray)\n      this.setGrabbed(false)\n    }\n\n    domElement.addEventListener('pointerdown', this._mouseDown)\n    domElement.addEventListener('pointermove', this._mouseMove)\n    domElement.addEventListener('pointerup', this._mouseUp)\n  }\n\n  getRevoluteDelta(joint: URDFJoint, startPoint: Vector3, endPoint: Vector3) {\n    const { camera, initialGrabPoint } = this\n\n    // set up the plane\n    tempVector.copy(joint.axis).transformDirection(joint.matrixWorld).normalize()\n    pivotPoint.set(0, 0, 0).applyMatrix4(joint.matrixWorld)\n    plane.setFromNormalAndCoplanarPoint(tempVector, pivotPoint)\n\n    tempVector.copy(camera.position).sub(initialGrabPoint).normalize()\n\n    // if looking into the plane of rotation\n    if (Math.abs(tempVector.dot(plane.normal)) > 0.3) {\n      return super.getRevoluteDelta(joint, startPoint, endPoint)\n    } else {\n      // get the up direction\n      tempVector.set(0, 1, 0).transformDirection(camera.matrixWorld)\n\n      // get points projected onto the plane of rotation\n      plane.projectPoint(startPoint, projectedStartPoint)\n      plane.projectPoint(endPoint, projectedEndPoint)\n\n      tempVector.set(0, 0, -1).transformDirection(camera.matrixWorld)\n      tempVector.cross(plane.normal)\n      tempVector2.subVectors(endPoint, startPoint)\n\n      return tempVector.dot(tempVector2)\n    }\n  }\n\n  dispose() {\n    const { domElement } = this\n    domElement.removeEventListener('pointerdown', this._mouseDown)\n    domElement.removeEventListener('pointermove', this._mouseMove)\n    domElement.removeEventListener('pointerup', this._mouseUp)\n  }\n}\n"]}

package/dist/elements/urdf-manipulator-element.d.ts

@@ -0,0 +1,15 @@
+import { PointerURDFDragControls } from './urdf-drag-controls';
+import { MeshPhongMaterial } from 'three';
+import URDFViewerElement from './urdf-viewer-element';
+export default class URDFManipulatorElement extends URDFViewerElement {
+    static get observedAttributes(): string[];
+    highlightMaterial: MeshPhongMaterial;
+    dragControls: PointerURDFDragControls;
+    get disableDragging(): boolean;
+    set disableDragging(val: boolean);
+    get highlightColor(): string;
+    set highlightColor(val: string);
+    constructor();
+    disconnectedCallback(): void;
+    attributeChangedCallback(attr: string, oldval: any, newval: any): void;
+}

package/dist/elements/urdf-manipulator-element.js

@@ -0,0 +1,110 @@
+import { __decorate } from "tslib";
+import { customElement } from 'lit/decorators.js';
+import * as THREE from 'three';
+import { PointerURDFDragControls } from './urdf-drag-controls';
+import URDFViewerElement from './urdf-viewer-element';
+// urdf-manipulator element
+// Displays a URDF model that can be manipulated with the mouse
+// Events
+// joint-mouseover: Fired when a joint is hovered over
+// joint-mouseout: Fired when a joint is no longer hovered over
+// manipulate-start: Fires when a joint is manipulated
+// manipulate-end: Fires when a joint is done being manipulated
+let URDFManipulatorElement = class URDFManipulatorElement extends URDFViewerElement {
+    static get observedAttributes() {
+        return ['highlight-color', ...super.observedAttributes];
+    }
+    get disableDragging() {
+        return this.hasAttribute('disable-dragging');
+    }
+    set disableDragging(val) {
+        val ? this.setAttribute('disable-dragging', String(!!val)) : this.removeAttribute('disable-dragging');
+    }
+    get highlightColor() {
+        return this.getAttribute('highlight-color') || '#FFFFFF';
+    }
+    set highlightColor(val) {
+        val ? this.setAttribute('highlight-color', val) : this.removeAttribute('highlight-color');
+    }
+    constructor() {
+        super();
+        // The highlight material
+        this.highlightMaterial = new THREE.MeshPhongMaterial({
+            shininess: 10,
+            color: this.highlightColor,
+            emissive: this.highlightColor,
+            emissiveIntensity: 0.25
+        });
+        const isJoint = (j) => {
+            return j.isURDFJoint && j.jointType !== 'fixed';
+        };
+        // Highlight the link geometry under a joint
+        const highlightLinkGeometry = (m, revert) => {
+            const traverse = (c) => {
+                // Set or revert the highlight color
+                if (c.type === 'Mesh') {
+                    if (revert) {
+                        c.material = c.__origMaterial;
+                        delete c.__origMaterial;
+                    }
+                    else {
+                        c.__origMaterial = c.material;
+                        c.material = this.highlightMaterial;
+                    }
+                }
+                // Look into the children and stop if the next child is
+                // another joint
+                if (c === m || !isJoint(c)) {
+                    for (let i = 0; i < c.children.length; i++) {
+                        traverse(c.children[i]);
+                    }
+                }
+            };
+            traverse(m);
+        };
+        const el = this.renderer.domElement;
+        const dragControls = new PointerURDFDragControls(this.scene, this.camera, el);
+        dragControls.onDragStart = joint => {
+            this.dispatchEvent(new CustomEvent('manipulate-start', { bubbles: true, cancelable: true, detail: joint.name }));
+            this.controls.enabled = false;
+            this.redraw();
+        };
+        dragControls.onDragEnd = joint => {
+            this.dispatchEvent(new CustomEvent('manipulate-end', { bubbles: true, cancelable: true, detail: joint.name }));
+            this.controls.enabled = true;
+            this.redraw();
+        };
+        dragControls.updateJoint = (joint, angle) => {
+            this.setJointValue(joint.name, angle);
+        };
+        dragControls.onHover = (joint) => {
+            highlightLinkGeometry(joint, false);
+            this.dispatchEvent(new CustomEvent('joint-mouseover', { bubbles: true, cancelable: true, detail: joint.name }));
+            this.redraw();
+        };
+        dragControls.onUnhover = joint => {
+            highlightLinkGeometry(joint, true);
+            this.dispatchEvent(new CustomEvent('joint-mouseout', { bubbles: true, cancelable: true, detail: joint.name }));
+            this.redraw();
+        };
+        this.dragControls = dragControls;
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.dragControls.dispose();
+    }
+    attributeChangedCallback(attr, oldval, newval) {
+        super.attributeChangedCallback(attr, oldval, newval);
+        switch (attr) {
+            case 'highlight-color':
+                this.highlightMaterial.color.set(this.highlightColor);
+                this.highlightMaterial.emissive.set(this.highlightColor);
+                break;
+        }
+    }
+};
+URDFManipulatorElement = __decorate([
+    customElement('urdf-viewer')
+], URDFManipulatorElement);
+export default URDFManipulatorElement;
+//# sourceMappingURL=urdf-manipulator-element.js.map

package/dist/elements/urdf-manipulator-element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"urdf-manipulator-element.js","sourceRoot":"","sources":["../../src/elements/urdf-manipulator-element.ts"],"names":[],"mappings":"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","sourcesContent":["import { customElement } from 'lit/decorators.js'\nimport * as THREE from 'three'\nimport { PointerURDFDragControls } from './urdf-drag-controls'\nimport { Material, MeshPhongMaterial } from 'three'\nimport URDFViewerElement from './urdf-viewer-element'\nimport { URDFJoint } from 'urdf-loader'\n\n// urdf-manipulator element\n// Displays a URDF model that can be manipulated with the mouse\n\n// Events\n// joint-mouseover: Fired when a joint is hovered over\n// joint-mouseout: Fired when a joint is no longer hovered over\n// manipulate-start: Fires when a joint is manipulated\n// manipulate-end: Fires when a joint is done being manipulated\n\n@customElement('urdf-viewer')\nexport default class URDFManipulatorElement extends URDFViewerElement {\n  static get observedAttributes() {\n    return ['highlight-color', ...super.observedAttributes]\n  }\n\n  highlightMaterial: MeshPhongMaterial\n  dragControls: PointerURDFDragControls\n\n  get disableDragging() {\n    return this.hasAttribute('disable-dragging')\n  }\n\n  set disableDragging(val) {\n    val ? this.setAttribute('disable-dragging', String(!!val)) : this.removeAttribute('disable-dragging')\n  }\n\n  get highlightColor() {\n    return this.getAttribute('highlight-color') || '#FFFFFF'\n  }\n\n  set highlightColor(val) {\n    val ? this.setAttribute('highlight-color', val) : this.removeAttribute('highlight-color')\n  }\n\n  constructor() {\n    super()\n\n    // The highlight material\n    this.highlightMaterial = new THREE.MeshPhongMaterial({\n      shininess: 10,\n      color: this.highlightColor,\n      emissive: this.highlightColor,\n      emissiveIntensity: 0.25\n    })\n\n    const isJoint = (j: URDFJoint) => {\n      return j.isURDFJoint && j.jointType !== 'fixed'\n    }\n\n    // Highlight the link geometry under a joint\n    const highlightLinkGeometry = (m: THREE.Material, revert: boolean) => {\n      const traverse = (c: any) => {\n        // Set or revert the highlight color\n        if (c.type === 'Mesh') {\n          if (revert) {\n            c.material = c.__origMaterial\n            delete c.__origMaterial\n          } else {\n            c.__origMaterial = c.material\n            c.material = this.highlightMaterial\n          }\n        }\n\n        // Look into the children and stop if the next child is\n        // another joint\n        if (c === m || !isJoint(c)) {\n          for (let i = 0; i < c.children.length; i++) {\n            traverse(c.children[i])\n          }\n        }\n      }\n\n      traverse(m)\n    }\n\n    const el = this.renderer.domElement\n\n    const dragControls = new PointerURDFDragControls(this.scene, this.camera, el)\n\n    dragControls.onDragStart = joint => {\n      this.dispatchEvent(new CustomEvent('manipulate-start', { bubbles: true, cancelable: true, detail: joint.name }))\n      this.controls.enabled = false\n      this.redraw()\n    }\n\n    dragControls.onDragEnd = joint => {\n      this.dispatchEvent(new CustomEvent('manipulate-end', { bubbles: true, cancelable: true, detail: joint.name }))\n      this.controls.enabled = true\n      this.redraw()\n    }\n\n    dragControls.updateJoint = (joint, angle) => {\n      this.setJointValue(joint.name, angle)\n    }\n\n    dragControls.onHover = (joint: URDFJoint) => {\n      highlightLinkGeometry(joint as any, false)\n      this.dispatchEvent(new CustomEvent('joint-mouseover', { bubbles: true, cancelable: true, detail: joint.name }))\n      this.redraw()\n    }\n\n    dragControls.onUnhover = joint => {\n      highlightLinkGeometry(joint as any, true)\n      this.dispatchEvent(new CustomEvent('joint-mouseout', { bubbles: true, cancelable: true, detail: joint.name }))\n      this.redraw()\n    }\n\n    this.dragControls = dragControls\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n    this.dragControls.dispose()\n  }\n\n  attributeChangedCallback(attr: string, oldval: any, newval: any) {\n    super.attributeChangedCallback(attr, oldval, newval)\n\n    switch (attr) {\n      case 'highlight-color':\n        this.highlightMaterial.color.set(this.highlightColor)\n        this.highlightMaterial.emissive.set(this.highlightColor)\n        break\n    }\n  }\n}\n"]}

package/dist/elements/urdf-viewer-element.d.ts

@@ -0,0 +1,53 @@
+import * as THREE from 'three';
+import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
+import { URDFRobot } from 'urdf-loader/src/URDFLoader';
+export default class URDFViewerElement extends HTMLElement {
+    static get observedAttributes(): string[];
+    get package(): string;
+    set package(val: string);
+    get urdf(): string;
+    set urdf(val: string);
+    get ignoreLimits(): boolean;
+    set ignoreLimits(val: boolean);
+    get up(): string;
+    set up(val: string);
+    get displayShadow(): boolean;
+    set displayShadow(val: boolean);
+    get ambientColor(): string;
+    set ambientColor(val: string);
+    get noAutoRecenter(): boolean;
+    set noAutoRecenter(val: boolean);
+    get jointValues(): any;
+    set jointValues(val: any);
+    get angles(): any;
+    set angles(v: any);
+    robot?: URDFRobot;
+    controls: OrbitControls;
+    scene: THREE.Scene;
+    camera: THREE.PerspectiveCamera;
+    world: THREE.Object3D;
+    renderer: THREE.WebGLRenderer;
+    plane: THREE.Mesh;
+    directionalLight: THREE.DirectionalLight;
+    ambientLight: THREE.HemisphereLight;
+    _prevload?: string;
+    _requestId: number;
+    _dirty: boolean;
+    _loadScheduled: boolean;
+    loadMeshFunc?: (url: string, manager: THREE.LoadingManager, onLoad: (mesh: THREE.Object3D, err?: Error) => void) => void;
+    urlModifierFunc?: (url: string) => string;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(attr: string, oldval: any, newval: any): void;
+    updateSize(): void;
+    redraw(): void;
+    recenter(): void;
+    setJointValue(jointName: string, ...values: Number[]): void;
+    setJointValues(values: Number[]): void;
+    _updateEnvironment(): void;
+    _scheduleLoad(): void;
+    _loadUrdf(pkg: string, urdf: string): void;
+    _setUp(up: string): void;
+    _setIgnoreLimits(ignore: boolean, dispatch?: boolean): void;
+}