three.js/examples/jsm/webxr/OculusHandPointerModel.js

import * as THREE from "../../../build/three.module.js";

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 = 0.002;
const POINTER_REAR_RADIUS = 0.01;
const POINTER_REAR_RADIUS_MIN = 0.003;
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);
      let 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;
    // first ring for front face
    const frontFaceBase = new THREE.Vector3(
      POINTER_FRONT_RADIUS,
      0,
      -1 * (POINTER_LENGTH - rearRadius)
    );
    this._drawVerticesRing(vertices, frontFaceBase, 0);

    // rings for rear hemisphere
    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)
      );
    }

    // front and rear face center vertices
    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)
    );
    // verticesNeedUpdate = true;
  }

  createPointer() {
    var i, j;
    const vertices = new Array(
      ((POINTER_RINGS + 1) * POINTER_SEGMENTS + 2) * 3
    ).fill(0);
    // const vertices = [];
    const indices = [];
    this.pointerGeometry = new THREE.BufferGeometry();

    this.pointerGeometry.setAttribute(
      "position",
      new THREE.Float32BufferAttribute(vertices, 3)
    );

    this._updatePointerVertices(POINTER_REAR_RADIUS);

    // construct faces to connect rings
    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
      );
    }

    // construct front and rear face
    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();

    // create cursor
    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) {
    THREE.Object3D.prototype.updateMatrixWorld.call(this, force);
    if (this.pointerGeometry) {
      this._updatePointer();
      this._updateRaycaster();
    }
  }

  isPinched() {
    return this.pinched;
  }

  setAttached(attached) {
    this.attached = attached;
  }

  isAttached() {
    return this.attached;
  }

  intersectObject(object) {
    if (this.raycaster) {
      return this.raycaster.intersectObject(object);
    }
  }

  intersectObjects(objects) {
    if (this.raycaster) {
      return this.raycaster.intersectObjects(objects);
    }
  }

  checkIntersections(objects) {
    if (this.raycaster && !this.attached) {
      let intersections = this.raycaster.intersectObjects(objects);
      let direction = new THREE.Vector3(0, 0, -1);
      if (intersections.length > 0) {
        let intersection = intersections[0];
        let distance = intersection.distance;
        this.cursorObject.position.copy(direction.multiplyScalar(distance));
      } else {
        this.cursorObject.position.copy(direction.multiplyScalar(CURSOR_MAX_DISTANCE));
      }
    }
  }

  setCursor(distance) {
    let direction = new THREE.Vector3(0, 0, -1);
    if (this.raycaster && !this.attached) {
      this.cursorObject.position.copy(direction.multiplyScalar(distance));
    }
  }
}

export { OculusHandPointerModel };