three-stdlib 2.22.7 → 2.22.9

package/dist/webxr/OculusHandPointerModel.js

@@ -0,0 +1,224 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const THREE = require("three");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const THREE__namespace = /* @__PURE__ */ _interopNamespaceDefault(THREE);
+const PINCH_MAX = 0.05;
+const PINCH_THRESHOLD = 0.02;
+const PINCH_MIN = 0.01;
+const POINTER_ADVANCE_MAX = 0.02;
+const POINTER_OPACITY_MAX = 1;
+const POINTER_OPACITY_MIN = 0.4;
+const POINTER_FRONT_RADIUS = 2e-3;
+const POINTER_REAR_RADIUS = 0.01;
+const POINTER_REAR_RADIUS_MIN = 3e-3;
+const POINTER_LENGTH = 0.035;
+const POINTER_SEGMENTS = 16;
+const POINTER_RINGS = 12;
+const POINTER_HEMISPHERE_ANGLE = 110;
+const YAXIS = new THREE__namespace.Vector3(0, 1, 0);
+const ZAXIS = new THREE__namespace.Vector3(0, 0, 1);
+const CURSOR_RADIUS = 0.02;
+const CURSOR_MAX_DISTANCE = 1.5;
+class OculusHandPointerModel extends THREE__namespace.Object3D {
+  constructor(hand, controller) {
+    super();
+    this.hand = hand;
+    this.controller = controller;
+    this.motionController = null;
+    this.envMap = null;
+    this.mesh = null;
+    this.pointerGeometry = null;
+    this.pointerMesh = null;
+    this.pointerObject = null;
+    this.pinched = false;
+    this.attached = false;
+    this.cursorObject = null;
+    this.raycaster = null;
+    hand.addEventListener("connected", (event) => {
+      const xrInputSource = event.data;
+      if (xrInputSource.hand) {
+        this.visible = true;
+        this.xrInputSource = xrInputSource;
+        this.createPointer();
+      }
+    });
+  }
+  _drawVerticesRing(vertices, baseVector, ringIndex) {
+    const segmentVector = baseVector.clone();
+    for (var i = 0; i < POINTER_SEGMENTS; i++) {
+      segmentVector.applyAxisAngle(ZAXIS, Math.PI * 2 / POINTER_SEGMENTS);
+      const vid = ringIndex * POINTER_SEGMENTS + i;
+      vertices[3 * vid] = segmentVector.x;
+      vertices[3 * vid + 1] = segmentVector.y;
+      vertices[3 * vid + 2] = segmentVector.z;
+    }
+  }
+  _updatePointerVertices(rearRadius) {
+    const vertices = this.pointerGeometry.attributes.position.array;
+    const frontFaceBase = new THREE__namespace.Vector3(POINTER_FRONT_RADIUS, 0, -1 * (POINTER_LENGTH - rearRadius));
+    this._drawVerticesRing(vertices, frontFaceBase, 0);
+    const rearBase = new THREE__namespace.Vector3(
+      Math.sin(Math.PI * POINTER_HEMISPHERE_ANGLE / 180) * rearRadius,
+      Math.cos(Math.PI * POINTER_HEMISPHERE_ANGLE / 180) * rearRadius,
+      0
+    );
+    for (var i = 0; i < POINTER_RINGS; i++) {
+      this._drawVerticesRing(vertices, rearBase, i + 1);
+      rearBase.applyAxisAngle(YAXIS, Math.PI * POINTER_HEMISPHERE_ANGLE / 180 / (POINTER_RINGS * -2));
+    }
+    const frontCenterIndex = POINTER_SEGMENTS * (1 + POINTER_RINGS);
+    const rearCenterIndex = POINTER_SEGMENTS * (1 + POINTER_RINGS) + 1;
+    const frontCenter = new THREE__namespace.Vector3(0, 0, -1 * (POINTER_LENGTH - rearRadius));
+    vertices[frontCenterIndex * 3] = frontCenter.x;
+    vertices[frontCenterIndex * 3 + 1] = frontCenter.y;
+    vertices[frontCenterIndex * 3 + 2] = frontCenter.z;
+    const rearCenter = new THREE__namespace.Vector3(0, 0, rearRadius);
+    vertices[rearCenterIndex * 3] = rearCenter.x;
+    vertices[rearCenterIndex * 3 + 1] = rearCenter.y;
+    vertices[rearCenterIndex * 3 + 2] = rearCenter.z;
+    this.pointerGeometry.setAttribute("position", new THREE__namespace.Float32BufferAttribute(vertices, 3));
+  }
+  createPointer() {
+    var i, j;
+    const vertices = new Array(((POINTER_RINGS + 1) * POINTER_SEGMENTS + 2) * 3).fill(0);
+    const indices = [];
+    this.pointerGeometry = new THREE__namespace.BufferGeometry();
+    this.pointerGeometry.setAttribute("position", new THREE__namespace.Float32BufferAttribute(vertices, 3));
+    this._updatePointerVertices(POINTER_REAR_RADIUS);
+    for (i = 0; i < POINTER_RINGS; i++) {
+      for (j = 0; j < POINTER_SEGMENTS - 1; j++) {
+        indices.push(i * POINTER_SEGMENTS + j, i * POINTER_SEGMENTS + j + 1, (i + 1) * POINTER_SEGMENTS + j);
+        indices.push(i * POINTER_SEGMENTS + j + 1, (i + 1) * POINTER_SEGMENTS + j + 1, (i + 1) * POINTER_SEGMENTS + j);
+      }
+      indices.push((i + 1) * POINTER_SEGMENTS - 1, i * POINTER_SEGMENTS, (i + 2) * POINTER_SEGMENTS - 1);
+      indices.push(i * POINTER_SEGMENTS, (i + 1) * POINTER_SEGMENTS, (i + 2) * POINTER_SEGMENTS - 1);
+    }
+    const frontCenterIndex = POINTER_SEGMENTS * (1 + POINTER_RINGS);
+    const rearCenterIndex = POINTER_SEGMENTS * (1 + POINTER_RINGS) + 1;
+    for (i = 0; i < POINTER_SEGMENTS - 1; i++) {
+      indices.push(frontCenterIndex, i + 1, i);
+      indices.push(rearCenterIndex, i + POINTER_SEGMENTS * POINTER_RINGS, i + POINTER_SEGMENTS * POINTER_RINGS + 1);
+    }
+    indices.push(frontCenterIndex, 0, POINTER_SEGMENTS - 1);
+    indices.push(rearCenterIndex, POINTER_SEGMENTS * (POINTER_RINGS + 1) - 1, POINTER_SEGMENTS * POINTER_RINGS);
+    const material = new THREE__namespace.MeshBasicMaterial();
+    material.transparent = true;
+    material.opacity = POINTER_OPACITY_MIN;
+    this.pointerGeometry.setIndex(indices);
+    this.pointerMesh = new THREE__namespace.Mesh(this.pointerGeometry, material);
+    this.pointerMesh.position.set(0, 0, -1 * POINTER_REAR_RADIUS);
+    this.pointerObject = new THREE__namespace.Object3D();
+    this.pointerObject.add(this.pointerMesh);
+    this.raycaster = new THREE__namespace.Raycaster();
+    const cursorGeometry = new THREE__namespace.SphereGeometry(CURSOR_RADIUS, 10, 10);
+    const cursorMaterial = new THREE__namespace.MeshBasicMaterial();
+    cursorMaterial.transparent = true;
+    cursorMaterial.opacity = POINTER_OPACITY_MIN;
+    this.cursorObject = new THREE__namespace.Mesh(cursorGeometry, cursorMaterial);
+    this.pointerObject.add(this.cursorObject);
+    this.add(this.pointerObject);
+  }
+  _updateRaycaster() {
+    if (this.raycaster) {
+      const pointerMatrix = this.pointerObject.matrixWorld;
+      const tempMatrix = new THREE__namespace.Matrix4();
+      tempMatrix.identity().extractRotation(pointerMatrix);
+      this.raycaster.ray.origin.setFromMatrixPosition(pointerMatrix);
+      this.raycaster.ray.direction.set(0, 0, -1).applyMatrix4(tempMatrix);
+    }
+  }
+  _updatePointer() {
+    this.pointerObject.visible = this.controller.visible;
+    const indexTip = this.hand.joints["index-finger-tip"];
+    const thumbTip = this.hand.joints["thumb-tip"];
+    const distance = indexTip.position.distanceTo(thumbTip.position);
+    const position = indexTip.position.clone().add(thumbTip.position).multiplyScalar(0.5);
+    this.pointerObject.position.copy(position);
+    this.pointerObject.quaternion.copy(this.controller.quaternion);
+    this.pinched = distance <= PINCH_THRESHOLD;
+    const pinchScale = (distance - PINCH_MIN) / (PINCH_MAX - PINCH_MIN);
+    const focusScale = (distance - PINCH_MIN) / (PINCH_THRESHOLD - PINCH_MIN);
+    if (pinchScale > 1) {
+      this._updatePointerVertices(POINTER_REAR_RADIUS);
+      this.pointerMesh.position.set(0, 0, -1 * POINTER_REAR_RADIUS);
+      this.pointerMesh.material.opacity = POINTER_OPACITY_MIN;
+    } else if (pinchScale > 0) {
+      const rearRadius = (POINTER_REAR_RADIUS - POINTER_REAR_RADIUS_MIN) * pinchScale + POINTER_REAR_RADIUS_MIN;
+      this._updatePointerVertices(rearRadius);
+      if (focusScale < 1) {
+        this.pointerMesh.position.set(0, 0, -1 * rearRadius - (1 - focusScale) * POINTER_ADVANCE_MAX);
+        this.pointerMesh.material.opacity = POINTER_OPACITY_MIN + (1 - focusScale) * (POINTER_OPACITY_MAX - POINTER_OPACITY_MIN);
+      } else {
+        this.pointerMesh.position.set(0, 0, -1 * rearRadius);
+        this.pointerMesh.material.opacity = POINTER_OPACITY_MIN;
+      }
+    } else {
+      this._updatePointerVertices(POINTER_REAR_RADIUS_MIN);
+      this.pointerMesh.position.set(0, 0, -1 * POINTER_REAR_RADIUS_MIN - POINTER_ADVANCE_MAX);
+      this.pointerMesh.material.opacity = POINTER_OPACITY_MAX;
+    }
+    this.cursorObject.material.opacity = this.pointerMesh.material.opacity;
+  }
+  updateMatrixWorld(force) {
+    super.updateMatrixWorld(force);
+    if (this.pointerGeometry) {
+      this._updatePointer();
+      this._updateRaycaster();
+    }
+  }
+  isPinched() {
+    return this.pinched;
+  }
+  setAttached(attached) {
+    this.attached = attached;
+  }
+  isAttached() {
+    return this.attached;
+  }
+  intersectObject(object, recursive = true) {
+    if (this.raycaster) {
+      return this.raycaster.intersectObject(object, recursive);
+    }
+  }
+  intersectObjects(objects, recursive = true) {
+    if (this.raycaster) {
+      return this.raycaster.intersectObjects(objects, recursive);
+    }
+  }
+  checkIntersections(objects, recursive = false) {
+    if (this.raycaster && !this.attached) {
+      const intersections = this.raycaster.intersectObjects(objects, recursive);
+      const direction = new THREE__namespace.Vector3(0, 0, -1);
+      if (intersections.length > 0) {
+        const intersection = intersections[0];
+        const distance = intersection.distance;
+        this.cursorObject.position.copy(direction.multiplyScalar(distance));
+      } else {
+        this.cursorObject.position.copy(direction.multiplyScalar(CURSOR_MAX_DISTANCE));
+      }
+    }
+  }
+  setCursor(distance) {
+    const direction = new THREE__namespace.Vector3(0, 0, -1);
+    if (this.raycaster && !this.attached) {
+      this.cursorObject.position.copy(direction.multiplyScalar(distance));
+    }
+  }
+}
+exports.OculusHandPointerModel = OculusHandPointerModel;

package/dist/webxr/OculusHandPointerModel.mjs

@@ -0,0 +1,207 @@
+import * as THREE from "three";
+const PINCH_MAX = 0.05;
+const PINCH_THRESHOLD = 0.02;
+const PINCH_MIN = 0.01;
+const POINTER_ADVANCE_MAX = 0.02;
+const POINTER_OPACITY_MAX = 1;
+const POINTER_OPACITY_MIN = 0.4;
+const POINTER_FRONT_RADIUS = 2e-3;
+const POINTER_REAR_RADIUS = 0.01;
+const POINTER_REAR_RADIUS_MIN = 3e-3;
+const POINTER_LENGTH = 0.035;
+const POINTER_SEGMENTS = 16;
+const POINTER_RINGS = 12;
+const POINTER_HEMISPHERE_ANGLE = 110;
+const YAXIS = new THREE.Vector3(0, 1, 0);
+const ZAXIS = new THREE.Vector3(0, 0, 1);
+const CURSOR_RADIUS = 0.02;
+const CURSOR_MAX_DISTANCE = 1.5;
+class OculusHandPointerModel extends THREE.Object3D {
+  constructor(hand, controller) {
+    super();
+    this.hand = hand;
+    this.controller = controller;
+    this.motionController = null;
+    this.envMap = null;
+    this.mesh = null;
+    this.pointerGeometry = null;
+    this.pointerMesh = null;
+    this.pointerObject = null;
+    this.pinched = false;
+    this.attached = false;
+    this.cursorObject = null;
+    this.raycaster = null;
+    hand.addEventListener("connected", (event) => {
+      const xrInputSource = event.data;
+      if (xrInputSource.hand) {
+        this.visible = true;
+        this.xrInputSource = xrInputSource;
+        this.createPointer();
+      }
+    });
+  }
+  _drawVerticesRing(vertices, baseVector, ringIndex) {
+    const segmentVector = baseVector.clone();
+    for (var i = 0; i < POINTER_SEGMENTS; i++) {
+      segmentVector.applyAxisAngle(ZAXIS, Math.PI * 2 / POINTER_SEGMENTS);
+      const vid = ringIndex * POINTER_SEGMENTS + i;
+      vertices[3 * vid] = segmentVector.x;
+      vertices[3 * vid + 1] = segmentVector.y;
+      vertices[3 * vid + 2] = segmentVector.z;
+    }
+  }
+  _updatePointerVertices(rearRadius) {
+    const vertices = this.pointerGeometry.attributes.position.array;
+    const frontFaceBase = new THREE.Vector3(POINTER_FRONT_RADIUS, 0, -1 * (POINTER_LENGTH - rearRadius));
+    this._drawVerticesRing(vertices, frontFaceBase, 0);
+    const rearBase = new THREE.Vector3(
+      Math.sin(Math.PI * POINTER_HEMISPHERE_ANGLE / 180) * rearRadius,
+      Math.cos(Math.PI * POINTER_HEMISPHERE_ANGLE / 180) * rearRadius,
+      0
+    );
+    for (var i = 0; i < POINTER_RINGS; i++) {
+      this._drawVerticesRing(vertices, rearBase, i + 1);
+      rearBase.applyAxisAngle(YAXIS, Math.PI * POINTER_HEMISPHERE_ANGLE / 180 / (POINTER_RINGS * -2));
+    }
+    const frontCenterIndex = POINTER_SEGMENTS * (1 + POINTER_RINGS);
+    const rearCenterIndex = POINTER_SEGMENTS * (1 + POINTER_RINGS) + 1;
+    const frontCenter = new THREE.Vector3(0, 0, -1 * (POINTER_LENGTH - rearRadius));
+    vertices[frontCenterIndex * 3] = frontCenter.x;
+    vertices[frontCenterIndex * 3 + 1] = frontCenter.y;
+    vertices[frontCenterIndex * 3 + 2] = frontCenter.z;
+    const rearCenter = new THREE.Vector3(0, 0, rearRadius);
+    vertices[rearCenterIndex * 3] = rearCenter.x;
+    vertices[rearCenterIndex * 3 + 1] = rearCenter.y;
+    vertices[rearCenterIndex * 3 + 2] = rearCenter.z;
+    this.pointerGeometry.setAttribute("position", new THREE.Float32BufferAttribute(vertices, 3));
+  }
+  createPointer() {
+    var i, j;
+    const vertices = new Array(((POINTER_RINGS + 1) * POINTER_SEGMENTS + 2) * 3).fill(0);
+    const indices = [];
+    this.pointerGeometry = new THREE.BufferGeometry();
+    this.pointerGeometry.setAttribute("position", new THREE.Float32BufferAttribute(vertices, 3));
+    this._updatePointerVertices(POINTER_REAR_RADIUS);
+    for (i = 0; i < POINTER_RINGS; i++) {
+      for (j = 0; j < POINTER_SEGMENTS - 1; j++) {
+        indices.push(i * POINTER_SEGMENTS + j, i * POINTER_SEGMENTS + j + 1, (i + 1) * POINTER_SEGMENTS + j);
+        indices.push(i * POINTER_SEGMENTS + j + 1, (i + 1) * POINTER_SEGMENTS + j + 1, (i + 1) * POINTER_SEGMENTS + j);
+      }
+      indices.push((i + 1) * POINTER_SEGMENTS - 1, i * POINTER_SEGMENTS, (i + 2) * POINTER_SEGMENTS - 1);
+      indices.push(i * POINTER_SEGMENTS, (i + 1) * POINTER_SEGMENTS, (i + 2) * POINTER_SEGMENTS - 1);
+    }
+    const frontCenterIndex = POINTER_SEGMENTS * (1 + POINTER_RINGS);
+    const rearCenterIndex = POINTER_SEGMENTS * (1 + POINTER_RINGS) + 1;
+    for (i = 0; i < POINTER_SEGMENTS - 1; i++) {
+      indices.push(frontCenterIndex, i + 1, i);
+      indices.push(rearCenterIndex, i + POINTER_SEGMENTS * POINTER_RINGS, i + POINTER_SEGMENTS * POINTER_RINGS + 1);
+    }
+    indices.push(frontCenterIndex, 0, POINTER_SEGMENTS - 1);
+    indices.push(rearCenterIndex, POINTER_SEGMENTS * (POINTER_RINGS + 1) - 1, POINTER_SEGMENTS * POINTER_RINGS);
+    const material = new THREE.MeshBasicMaterial();
+    material.transparent = true;
+    material.opacity = POINTER_OPACITY_MIN;
+    this.pointerGeometry.setIndex(indices);
+    this.pointerMesh = new THREE.Mesh(this.pointerGeometry, material);
+    this.pointerMesh.position.set(0, 0, -1 * POINTER_REAR_RADIUS);
+    this.pointerObject = new THREE.Object3D();
+    this.pointerObject.add(this.pointerMesh);
+    this.raycaster = new THREE.Raycaster();
+    const cursorGeometry = new THREE.SphereGeometry(CURSOR_RADIUS, 10, 10);
+    const cursorMaterial = new THREE.MeshBasicMaterial();
+    cursorMaterial.transparent = true;
+    cursorMaterial.opacity = POINTER_OPACITY_MIN;
+    this.cursorObject = new THREE.Mesh(cursorGeometry, cursorMaterial);
+    this.pointerObject.add(this.cursorObject);
+    this.add(this.pointerObject);
+  }
+  _updateRaycaster() {
+    if (this.raycaster) {
+      const pointerMatrix = this.pointerObject.matrixWorld;
+      const tempMatrix = new THREE.Matrix4();
+      tempMatrix.identity().extractRotation(pointerMatrix);
+      this.raycaster.ray.origin.setFromMatrixPosition(pointerMatrix);
+      this.raycaster.ray.direction.set(0, 0, -1).applyMatrix4(tempMatrix);
+    }
+  }
+  _updatePointer() {
+    this.pointerObject.visible = this.controller.visible;
+    const indexTip = this.hand.joints["index-finger-tip"];
+    const thumbTip = this.hand.joints["thumb-tip"];
+    const distance = indexTip.position.distanceTo(thumbTip.position);
+    const position = indexTip.position.clone().add(thumbTip.position).multiplyScalar(0.5);
+    this.pointerObject.position.copy(position);
+    this.pointerObject.quaternion.copy(this.controller.quaternion);
+    this.pinched = distance <= PINCH_THRESHOLD;
+    const pinchScale = (distance - PINCH_MIN) / (PINCH_MAX - PINCH_MIN);
+    const focusScale = (distance - PINCH_MIN) / (PINCH_THRESHOLD - PINCH_MIN);
+    if (pinchScale > 1) {
+      this._updatePointerVertices(POINTER_REAR_RADIUS);
+      this.pointerMesh.position.set(0, 0, -1 * POINTER_REAR_RADIUS);
+      this.pointerMesh.material.opacity = POINTER_OPACITY_MIN;
+    } else if (pinchScale > 0) {
+      const rearRadius = (POINTER_REAR_RADIUS - POINTER_REAR_RADIUS_MIN) * pinchScale + POINTER_REAR_RADIUS_MIN;
+      this._updatePointerVertices(rearRadius);
+      if (focusScale < 1) {
+        this.pointerMesh.position.set(0, 0, -1 * rearRadius - (1 - focusScale) * POINTER_ADVANCE_MAX);
+        this.pointerMesh.material.opacity = POINTER_OPACITY_MIN + (1 - focusScale) * (POINTER_OPACITY_MAX - POINTER_OPACITY_MIN);
+      } else {
+        this.pointerMesh.position.set(0, 0, -1 * rearRadius);
+        this.pointerMesh.material.opacity = POINTER_OPACITY_MIN;
+      }
+    } else {
+      this._updatePointerVertices(POINTER_REAR_RADIUS_MIN);
+      this.pointerMesh.position.set(0, 0, -1 * POINTER_REAR_RADIUS_MIN - POINTER_ADVANCE_MAX);
+      this.pointerMesh.material.opacity = POINTER_OPACITY_MAX;
+    }
+    this.cursorObject.material.opacity = this.pointerMesh.material.opacity;
+  }
+  updateMatrixWorld(force) {
+    super.updateMatrixWorld(force);
+    if (this.pointerGeometry) {
+      this._updatePointer();
+      this._updateRaycaster();
+    }
+  }
+  isPinched() {
+    return this.pinched;
+  }
+  setAttached(attached) {
+    this.attached = attached;
+  }
+  isAttached() {
+    return this.attached;
+  }
+  intersectObject(object, recursive = true) {
+    if (this.raycaster) {
+      return this.raycaster.intersectObject(object, recursive);
+    }
+  }
+  intersectObjects(objects, recursive = true) {
+    if (this.raycaster) {
+      return this.raycaster.intersectObjects(objects, recursive);
+    }
+  }
+  checkIntersections(objects, recursive = false) {
+    if (this.raycaster && !this.attached) {
+      const intersections = this.raycaster.intersectObjects(objects, recursive);
+      const direction = new THREE.Vector3(0, 0, -1);
+      if (intersections.length > 0) {
+        const intersection = intersections[0];
+        const distance = intersection.distance;
+        this.cursorObject.position.copy(direction.multiplyScalar(distance));
+      } else {
+        this.cursorObject.position.copy(direction.multiplyScalar(CURSOR_MAX_DISTANCE));
+      }
+    }
+  }
+  setCursor(distance) {
+    const direction = new THREE.Vector3(0, 0, -1);
+    if (this.raycaster && !this.attached) {
+      this.cursorObject.position.copy(direction.multiplyScalar(distance));
+    }
+  }
+}
+export {
+  OculusHandPointerModel
+};

package/dist/webxr/Text2D.d.ts

@@ -0,0 +1,3 @@
+import { Mesh } from 'three'
+
+export function createText(message: string, height: number): Mesh

package/dist/webxr/Text2D.js

@@ -0,0 +1,48 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const THREE = require("three");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const THREE__namespace = /* @__PURE__ */ _interopNamespaceDefault(THREE);
+function createText(message, height) {
+  const canvas = document.createElement("canvas");
+  const context = canvas.getContext("2d");
+  let metrics = null;
+  const textHeight = 100;
+  context.font = "normal " + textHeight + "px Arial";
+  metrics = context.measureText(message);
+  const textWidth = metrics.width;
+  canvas.width = textWidth;
+  canvas.height = textHeight;
+  context.font = "normal " + textHeight + "px Arial";
+  context.textAlign = "center";
+  context.textBaseline = "middle";
+  context.fillStyle = "#ffffff";
+  context.fillText(message, textWidth / 2, textHeight / 2);
+  const texture = new THREE__namespace.Texture(canvas);
+  texture.needsUpdate = true;
+  const material = new THREE__namespace.MeshBasicMaterial({
+    color: 16777215,
+    side: THREE__namespace.DoubleSide,
+    map: texture,
+    transparent: true
+  });
+  const geometry = new THREE__namespace.PlaneGeometry(height * textWidth / textHeight, height);
+  const plane = new THREE__namespace.Mesh(geometry, material);
+  return plane;
+}
+exports.createText = createText;

package/dist/webxr/Text2D.mjs

@@ -0,0 +1,31 @@
+import * as THREE from "three";
+function createText(message, height) {
+  const canvas = document.createElement("canvas");
+  const context = canvas.getContext("2d");
+  let metrics = null;
+  const textHeight = 100;
+  context.font = "normal " + textHeight + "px Arial";
+  metrics = context.measureText(message);
+  const textWidth = metrics.width;
+  canvas.width = textWidth;
+  canvas.height = textHeight;
+  context.font = "normal " + textHeight + "px Arial";
+  context.textAlign = "center";
+  context.textBaseline = "middle";
+  context.fillStyle = "#ffffff";
+  context.fillText(message, textWidth / 2, textHeight / 2);
+  const texture = new THREE.Texture(canvas);
+  texture.needsUpdate = true;
+  const material = new THREE.MeshBasicMaterial({
+    color: 16777215,
+    side: THREE.DoubleSide,
+    map: texture,
+    transparent: true
+  });
+  const geometry = new THREE.PlaneGeometry(height * textWidth / textHeight, height);
+  const plane = new THREE.Mesh(geometry, material);
+  return plane;
+}
+export {
+  createText
+};

package/dist/webxr/VRButton.d.ts

@@ -0,0 +1,7 @@
+import { WebGLRenderer, XRSessionInit } from 'three';
+declare class VRButton {
+    static createButton(renderer: WebGLRenderer, sessionInit?: XRSessionInit): HTMLButtonElement | HTMLAnchorElement;
+    static xrSessionIsGranted: boolean;
+    static registerSessionGrantedListener(): void;
+}
+export { VRButton };

package/dist/webxr/VRButton.js

@@ -0,0 +1,111 @@
+"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 _VRButton = class {
+  static createButton(renderer, sessionInit = {}) {
+    const button = document.createElement("button");
+    function showEnterVR() {
+      let currentSession = null;
+      async function onSessionStarted(session) {
+        session.addEventListener("end", onSessionEnded);
+        await renderer.xr.setSession(session);
+        button.textContent = "EXIT VR";
+        currentSession = session;
+      }
+      function onSessionEnded() {
+        currentSession.removeEventListener("end", onSessionEnded);
+        button.textContent = "ENTER VR";
+        currentSession = null;
+      }
+      button.style.display = "";
+      button.style.cursor = "pointer";
+      button.style.left = "calc(50% - 50px)";
+      button.style.width = "100px";
+      button.textContent = "ENTER VR";
+      button.onmouseenter = () => {
+        button.style.opacity = "1.0";
+      };
+      button.onmouseleave = () => {
+        button.style.opacity = "0.5";
+      };
+      button.onclick = () => {
+        var _a;
+        if (currentSession === null) {
+          const optionalFeatures = [sessionInit.optionalFeatures, "local-floor", "bounded-floor", "hand-tracking"].flat().filter(Boolean);
+          (_a = navigator.xr) == null ? void 0 : _a.requestSession("immersive-vr", { ...sessionInit, optionalFeatures }).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 showWebXRNotFound() {
+      disableButton();
+      button.textContent = "VR 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) {
+      stylizeElement(button);
+      button.id = "VRButton";
+      button.style.display = "none";
+      navigator.xr.isSessionSupported("immersive-vr").then((supported) => {
+        supported ? showEnterVR() : showWebXRNotFound();
+        if (supported && _VRButton.xrSessionIsGranted) {
+          button.click();
+        }
+      });
+      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;
+    }
+  }
+  static registerSessionGrantedListener() {
+    if ("xr" in navigator) {
+      ;
+      navigator.xr.addEventListener("sessiongranted", () => {
+        _VRButton.xrSessionIsGranted = true;
+      });
+    }
+  }
+};
+let VRButton = _VRButton;
+__publicField(VRButton, "xrSessionIsGranted", false);
+exports.VRButton = VRButton;