How to Add Raycasters to Each Mesh in a glTF Model in four Directions and Ensure Self-Intersection

Questions
, ,
1

I’m working on a project where I need to add raycasters to each mesh in a glTF model using three.js. I want to add raycasters pointing in the -x, x, -z, and z directions. Additionally, I need to ensure that one of these raycasters intersects the mesh itself.

Here is what I have done so far:

  1. Loaded the glTF model using THREE.GLTFLoader.
  2. Iterated over each mesh in the model.
  3. Calculated the bounding box and center of each mesh.

However, I’m struggling with the correct placement and orientation of the raycasters to ensure that one of them intersects the mesh itself. I can’t use the centroid approach due to the presence of other meshes.

this is a simple example of what i have:

import * as THREE from 'three';

class MeshRaycaster {
  private mesh: THREE.Mesh;
  private raycasterX: THREE.Raycaster;
  private raycasterNegX: THREE.Raycaster;
  private raycasterZ: THREE.Raycaster;
  private raycasterNegZ: THREE.Raycaster;
  private arrowHelperX: THREE.ArrowHelper;
  private arrowHelperNegX: THREE.ArrowHelper;
  private arrowHelperZ: THREE.ArrowHelper;
  private arrowHelperNegZ: THREE.ArrowHelper;

  constructor(mesh: THREE.Mesh) {
    this.mesh = mesh;
    this.initializeRaycasters();
  }

  private initializeRaycasters() {
    // Calculate the bounding box of the mesh
    const boundingBox = new THREE.Box3().setFromObject(this.mesh);
    const centroid = new THREE.Vector3();
    boundingBox.getCenter(centroid);

    // Use boundingBox.min.y for the Y coordinate
    const minY = boundingBox.min.y;

    // Add one unit along the x and z axes, keeping y as boundingBox.min.y
    const originX = new THREE.Vector3(
      centroid.x + 0,
      minY + 1.5,
      centroid.z + 0,
    );
    const originNegX = new THREE.Vector3(
      centroid.x + 0,
      minY + 1.5,
      centroid.z + 0,
    );
    const originZ = new THREE.Vector3(
      centroid.x + 0,
      minY + 1.5,
      centroid.z + 0,
    );
    const originNegZ = new THREE.Vector3(
      centroid.x + 0,
      minY + 1.5,
      centroid.z + 0,
    );

    // Use modified origins for raycasters
    this.raycasterX = new THREE.Raycaster(originX, new THREE.Vector3(1, 0, 0));
    this.raycasterNegX = new THREE.Raycaster(
      originNegX,
      new THREE.Vector3(-1, 0, 0),
    );
    this.raycasterZ = new THREE.Raycaster(originZ, new THREE.Vector3(0, 0, 1));
    this.raycasterNegZ = new THREE.Raycaster(
      originNegZ,
      new THREE.Vector3(0, 0, -1),
    );

    // Add ArrowHelpers to visualize the raycasters
    this.arrowHelperX = new THREE.ArrowHelper(
      this.raycasterX.ray.direction,
      originX,
      20,
      0xff0000,
    );
    this.arrowHelperNegX = new THREE.ArrowHelper(
      this.raycasterNegX.ray.direction,
      originNegX,
      20,
      0x00ff00,
    );
    this.arrowHelperZ = new THREE.ArrowHelper(
      this.raycasterZ.ray.direction,
      originZ,
      20,
      0x0000ff,
    );
    this.arrowHelperNegZ = new THREE.ArrowHelper(
      this.raycasterNegZ.ray.direction,
      originNegZ,
      20,
      0xffff00,
    );
  }

also ive never used three-bvh so if its better, and how i can use it for this code