three-stdlib 2.22.7 → 2.22.9

package/dist/webxr/ARButton.js

@@ -0,0 +1,119 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+class ARButton {
+  static createButton(renderer, sessionInit = {}) {
+    const button = document.createElement("button");
+    function showStartAR() {
+      if (sessionInit.domOverlay === void 0) {
+        const overlay = document.createElement("div");
+        overlay.style.display = "none";
+        document.body.appendChild(overlay);
+        const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+        svg.setAttribute("width", "38px");
+        svg.setAttribute("height", "38px");
+        svg.style.position = "absolute";
+        svg.style.right = "20px";
+        svg.style.top = "20px";
+        svg.addEventListener("click", function() {
+          currentSession == null ? void 0 : currentSession.end();
+        });
+        overlay.appendChild(svg);
+        const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+        path.setAttribute("d", "M 12,12 L 28,28 M 28,12 12,28");
+        path.setAttribute("stroke", "#fff");
+        path.setAttribute("stroke-width", "2px");
+        svg.appendChild(path);
+        if (sessionInit.optionalFeatures === void 0) {
+          sessionInit.optionalFeatures = [];
+        }
+        sessionInit.optionalFeatures.push("dom-overlay");
+        sessionInit.domOverlay = { root: overlay };
+      }
+      let currentSession = null;
+      async function onSessionStarted(session) {
+        session.addEventListener("end", onSessionEnded);
+        renderer.xr.setReferenceSpaceType("local");
+        await renderer.xr.setSession(session);
+        button.textContent = "STOP AR";
+        sessionInit.domOverlay.root.style.display = "";
+        currentSession = session;
+      }
+      function onSessionEnded() {
+        currentSession.removeEventListener("end", onSessionEnded);
+        button.textContent = "START AR";
+        sessionInit.domOverlay.root.style.display = "none";
+        currentSession = null;
+      }
+      button.style.display = "";
+      button.style.cursor = "pointer";
+      button.style.left = "calc(50% - 50px)";
+      button.style.width = "100px";
+      button.textContent = "START AR";
+      button.onmouseenter = () => {
+        button.style.opacity = "1.0";
+      };
+      button.onmouseleave = () => {
+        button.style.opacity = "0.5";
+      };
+      button.onclick = () => {
+        if (currentSession === null) {
+          ;
+          navigator.xr.requestSession("immersive-ar", sessionInit).then(onSessionStarted);
+        } else {
+          currentSession.end();
+        }
+      };
+    }
+    function disableButton() {
+      button.style.display = "";
+      button.style.cursor = "auto";
+      button.style.left = "calc(50% - 75px)";
+      button.style.width = "150px";
+      button.onmouseenter = null;
+      button.onmouseleave = null;
+      button.onclick = null;
+    }
+    function showARNotSupported() {
+      disableButton();
+      button.textContent = "AR NOT SUPPORTED";
+    }
+    function stylizeElement(element) {
+      element.style.position = "absolute";
+      element.style.bottom = "20px";
+      element.style.padding = "12px 6px";
+      element.style.border = "1px solid #fff";
+      element.style.borderRadius = "4px";
+      element.style.background = "rgba(0,0,0,0.1)";
+      element.style.color = "#fff";
+      element.style.font = "normal 13px sans-serif";
+      element.style.textAlign = "center";
+      element.style.opacity = "0.5";
+      element.style.outline = "none";
+      element.style.zIndex = "999";
+    }
+    if ("xr" in navigator) {
+      button.id = "ARButton";
+      button.style.display = "none";
+      stylizeElement(button);
+      navigator.xr.isSessionSupported("immersive-ar").then(function(supported) {
+        supported ? showStartAR() : showARNotSupported();
+      }).catch(showARNotSupported);
+      return button;
+    } else {
+      const message = document.createElement("a");
+      if (window.isSecureContext === false) {
+        message.href = document.location.href.replace(/^http:/, "https:");
+        message.innerHTML = "WEBXR NEEDS HTTPS";
+      } else {
+        message.href = "https://immersiveweb.dev/";
+        message.innerHTML = "WEBXR NOT AVAILABLE";
+      }
+      message.style.left = "calc(50% - 90px)";
+      message.style.width = "180px";
+      message.style.textDecoration = "none";
+      stylizeElement(message);
+      return message;
+    }
+  }
+}
+exports.ARButton = ARButton;

package/dist/webxr/ARButton.mjs

@@ -0,0 +1,119 @@
+class ARButton {
+  static createButton(renderer, sessionInit = {}) {
+    const button = document.createElement("button");
+    function showStartAR() {
+      if (sessionInit.domOverlay === void 0) {
+        const overlay = document.createElement("div");
+        overlay.style.display = "none";
+        document.body.appendChild(overlay);
+        const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+        svg.setAttribute("width", "38px");
+        svg.setAttribute("height", "38px");
+        svg.style.position = "absolute";
+        svg.style.right = "20px";
+        svg.style.top = "20px";
+        svg.addEventListener("click", function() {
+          currentSession == null ? void 0 : currentSession.end();
+        });
+        overlay.appendChild(svg);
+        const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+        path.setAttribute("d", "M 12,12 L 28,28 M 28,12 12,28");
+        path.setAttribute("stroke", "#fff");
+        path.setAttribute("stroke-width", "2px");
+        svg.appendChild(path);
+        if (sessionInit.optionalFeatures === void 0) {
+          sessionInit.optionalFeatures = [];
+        }
+        sessionInit.optionalFeatures.push("dom-overlay");
+        sessionInit.domOverlay = { root: overlay };
+      }
+      let currentSession = null;
+      async function onSessionStarted(session) {
+        session.addEventListener("end", onSessionEnded);
+        renderer.xr.setReferenceSpaceType("local");
+        await renderer.xr.setSession(session);
+        button.textContent = "STOP AR";
+        sessionInit.domOverlay.root.style.display = "";
+        currentSession = session;
+      }
+      function onSessionEnded() {
+        currentSession.removeEventListener("end", onSessionEnded);
+        button.textContent = "START AR";
+        sessionInit.domOverlay.root.style.display = "none";
+        currentSession = null;
+      }
+      button.style.display = "";
+      button.style.cursor = "pointer";
+      button.style.left = "calc(50% - 50px)";
+      button.style.width = "100px";
+      button.textContent = "START AR";
+      button.onmouseenter = () => {
+        button.style.opacity = "1.0";
+      };
+      button.onmouseleave = () => {
+        button.style.opacity = "0.5";
+      };
+      button.onclick = () => {
+        if (currentSession === null) {
+          ;
+          navigator.xr.requestSession("immersive-ar", sessionInit).then(onSessionStarted);
+        } else {
+          currentSession.end();
+        }
+      };
+    }
+    function disableButton() {
+      button.style.display = "";
+      button.style.cursor = "auto";
+      button.style.left = "calc(50% - 75px)";
+      button.style.width = "150px";
+      button.onmouseenter = null;
+      button.onmouseleave = null;
+      button.onclick = null;
+    }
+    function showARNotSupported() {
+      disableButton();
+      button.textContent = "AR NOT SUPPORTED";
+    }
+    function stylizeElement(element) {
+      element.style.position = "absolute";
+      element.style.bottom = "20px";
+      element.style.padding = "12px 6px";
+      element.style.border = "1px solid #fff";
+      element.style.borderRadius = "4px";
+      element.style.background = "rgba(0,0,0,0.1)";
+      element.style.color = "#fff";
+      element.style.font = "normal 13px sans-serif";
+      element.style.textAlign = "center";
+      element.style.opacity = "0.5";
+      element.style.outline = "none";
+      element.style.zIndex = "999";
+    }
+    if ("xr" in navigator) {
+      button.id = "ARButton";
+      button.style.display = "none";
+      stylizeElement(button);
+      navigator.xr.isSessionSupported("immersive-ar").then(function(supported) {
+        supported ? showStartAR() : showARNotSupported();
+      }).catch(showARNotSupported);
+      return button;
+    } else {
+      const message = document.createElement("a");
+      if (window.isSecureContext === false) {
+        message.href = document.location.href.replace(/^http:/, "https:");
+        message.innerHTML = "WEBXR NEEDS HTTPS";
+      } else {
+        message.href = "https://immersiveweb.dev/";
+        message.innerHTML = "WEBXR NOT AVAILABLE";
+      }
+      message.style.left = "calc(50% - 90px)";
+      message.style.width = "180px";
+      message.style.textDecoration = "none";
+      stylizeElement(message);
+      return message;
+    }
+  }
+}
+export {
+  ARButton
+};

package/dist/webxr/OculusHandModel.d.ts

@@ -0,0 +1,22 @@
+import { Object3D, Mesh, Texture, XRInputSource, Vector3 } from 'three';
+import { XRHandMeshModel } from './XRHandMeshModel';
+export interface XRButton extends Object3D {
+    onPress(): void;
+    onClear(): void;
+    isPressed(): boolean;
+    whilePressed(): void;
+}
+declare class OculusHandModel extends Object3D {
+    controller: Object3D;
+    motionController: XRHandMeshModel | null;
+    envMap: Texture | null;
+    mesh: Mesh | null;
+    xrInputSource: XRInputSource | null;
+    constructor(controller: Object3D, leftModelPath?: string, rightModelPath?: string);
+    updateMatrixWorld(force?: boolean): void;
+    getPointerPosition(): Vector3 | null;
+    intersectBoxObject(boxObject: Object3D): boolean;
+    checkButton(button: XRButton): void;
+    dispose(): void;
+}
+export { OculusHandModel };

package/dist/webxr/OculusHandModel.js

@@ -0,0 +1,82 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const THREE = require("three");
+const XRHandMeshModel = require("./XRHandMeshModel.js");
+const TOUCH_RADIUS = 0.01;
+const POINTING_JOINT = "index-finger-tip";
+class OculusHandModel extends THREE.Object3D {
+  constructor(controller, leftModelPath, rightModelPath) {
+    super();
+    __publicField(this, "controller");
+    __publicField(this, "motionController");
+    __publicField(this, "envMap");
+    __publicField(this, "mesh");
+    __publicField(this, "xrInputSource");
+    this.controller = controller;
+    this.motionController = null;
+    this.envMap = null;
+    this.mesh = null;
+    this.xrInputSource = null;
+    controller.addEventListener("connected", (event) => {
+      const xrInputSource = event.data;
+      if (xrInputSource.hand && !this.motionController) {
+        this.xrInputSource = xrInputSource;
+        this.motionController = new XRHandMeshModel.XRHandMeshModel(
+          this,
+          controller,
+          void 0,
+          xrInputSource.handedness,
+          xrInputSource.handedness === "left" ? leftModelPath : rightModelPath
+        );
+      }
+    });
+    controller.addEventListener("disconnected", () => {
+      this.dispose();
+    });
+  }
+  updateMatrixWorld(force) {
+    super.updateMatrixWorld(force);
+    if (this.motionController) {
+      this.motionController.updateMesh();
+    }
+  }
+  getPointerPosition() {
+    const indexFingerTip = this.controller.joints[POINTING_JOINT];
+    if (indexFingerTip) {
+      return indexFingerTip.position;
+    } else {
+      return null;
+    }
+  }
+  intersectBoxObject(boxObject) {
+    const pointerPosition = this.getPointerPosition();
+    if (pointerPosition) {
+      const indexSphere = new THREE.Sphere(pointerPosition, TOUCH_RADIUS);
+      const box = new THREE.Box3().setFromObject(boxObject);
+      return indexSphere.intersectsBox(box);
+    } else {
+      return false;
+    }
+  }
+  checkButton(button) {
+    if (this.intersectBoxObject(button)) {
+      button.onPress();
+    } else {
+      button.onClear();
+    }
+    if (button.isPressed()) {
+      button.whilePressed();
+    }
+  }
+  dispose() {
+    this.clear();
+    this.motionController = null;
+  }
+}
+exports.OculusHandModel = OculusHandModel;

package/dist/webxr/OculusHandModel.mjs

@@ -0,0 +1,82 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+import { Object3D, Sphere, Box3 } from "three";
+import { XRHandMeshModel } from "./XRHandMeshModel.mjs";
+const TOUCH_RADIUS = 0.01;
+const POINTING_JOINT = "index-finger-tip";
+class OculusHandModel extends Object3D {
+  constructor(controller, leftModelPath, rightModelPath) {
+    super();
+    __publicField(this, "controller");
+    __publicField(this, "motionController");
+    __publicField(this, "envMap");
+    __publicField(this, "mesh");
+    __publicField(this, "xrInputSource");
+    this.controller = controller;
+    this.motionController = null;
+    this.envMap = null;
+    this.mesh = null;
+    this.xrInputSource = null;
+    controller.addEventListener("connected", (event) => {
+      const xrInputSource = event.data;
+      if (xrInputSource.hand && !this.motionController) {
+        this.xrInputSource = xrInputSource;
+        this.motionController = new XRHandMeshModel(
+          this,
+          controller,
+          void 0,
+          xrInputSource.handedness,
+          xrInputSource.handedness === "left" ? leftModelPath : rightModelPath
+        );
+      }
+    });
+    controller.addEventListener("disconnected", () => {
+      this.dispose();
+    });
+  }
+  updateMatrixWorld(force) {
+    super.updateMatrixWorld(force);
+    if (this.motionController) {
+      this.motionController.updateMesh();
+    }
+  }
+  getPointerPosition() {
+    const indexFingerTip = this.controller.joints[POINTING_JOINT];
+    if (indexFingerTip) {
+      return indexFingerTip.position;
+    } else {
+      return null;
+    }
+  }
+  intersectBoxObject(boxObject) {
+    const pointerPosition = this.getPointerPosition();
+    if (pointerPosition) {
+      const indexSphere = new Sphere(pointerPosition, TOUCH_RADIUS);
+      const box = new Box3().setFromObject(boxObject);
+      return indexSphere.intersectsBox(box);
+    } else {
+      return false;
+    }
+  }
+  checkButton(button) {
+    if (this.intersectBoxObject(button)) {
+      button.onPress();
+    } else {
+      button.onClear();
+    }
+    if (button.isPressed()) {
+      button.whilePressed();
+    }
+  }
+  dispose() {
+    this.clear();
+    this.motionController = null;
+  }
+}
+export {
+  OculusHandModel
+};

package/dist/webxr/OculusHandPointerModel.d.ts

@@ -0,0 +1,63 @@
+import {
+  BufferGeometry,
+  Intersection,
+  Mesh,
+  MeshBasicMaterial,
+  Object3D,
+  Raycaster,
+  SphereBufferGeometry,
+  Texture,
+  Vector3,
+} from 'three'
+
+export class OculusHandPointerModel extends Object3D {
+  hand: Object3D
+  controller: Object3D
+  motionController: Object3D | null
+
+  envMap: Texture | null
+
+  mesh: Mesh | null
+
+  pointerGeometry: BufferGeometry | null
+  pointerMesh: Mesh<BufferGeometry, MeshBasicMaterial> | null
+  pointerObject: Object3D | null
+
+  pinched: boolean
+  attached: boolean
+
+  cursorObject: Mesh<SphereBufferGeometry, MeshBasicMaterial> | null
+
+  raycaster: Raycaster
+
+  visible: boolean
+  xrInputSource: unknown
+
+  constructor(hand: Object3D, controller: Object3D)
+
+  private _drawVerticesRing(vertices: number[], baseVector: Vector3, ringIndex: number): void
+
+  private _updatePointerVertices(rearRadius: number): void
+
+  public createPointer(): void
+
+  private _updateRaycaster(): void
+
+  private _updatePointer(): void
+
+  public updateMatrixWorld(force?: boolean): void
+
+  public isPinched(): boolean
+
+  public setAttached(attached: boolean): void
+
+  public isAttached(): boolean
+
+  public intersectObject(object: Object3D, recursive?: boolean): Intersection[] | void
+
+  public intersectObjects(objects: Object3D[], recursive?: boolean): Intersection[] | void
+
+  public checkIntersections(objects: Object3D[], recursive?: boolean): void
+
+  public setCursor(distance: number): void
+}