A revised response from Lee tailored to the most recent release of three.js

for (let index = 0; index < Player.geometry.attributes.position.array.length; index++)
{       
    let localVertex = new THREE.Vector3().fromBufferAttribute(Player.geometry.attributes.position, index).clone();
    let globalVertex = localVertex.applyMatrix4(Player.matrix);
    let directionVector = globalVertex.sub( Player.position );

    let ray = new THREE.Raycaster( Player.position, directionVector.clone().normalize() );
    let collisionResults = ray.intersectObjects( collidableMeshList );
    if ( collisionResults.length > 0 && collisionResults[0].distance < directionVector.length() ) 
    {
        // handle collision event
    }
}

Exploring this topic thoroughly would require more time and space than a single SO question allows. However, I'll provide a brief overview to improve the site's SEO:

For basic collision detection without a full physics engine, consider exploring alternative options (link removed due to expired website).

If you're interested in implementing collision response beyond simple detection, take a look at (link removed due to expired website), an accessible Ammo.js wrapper designed for use with Three.js.

This function is specifically designed for BoxGeometry and BoxBufferGeometry shapes.

Implement the following custom function:

function checkTouching(a, d) {
  let b1 = a.position.y - a.geometry.parameters.height / 2;
  let t1 = a.position.y + a.geometry.parameters.height / 2;
  let r1 = a.position.x + a.geometry.parameters.width / 2;
  let l1 = a.position.x - a.geometry.parameters.width / 2;
  let f1 = a.position.z - a.geometry.parameters.depth / 2;
  let B1 = a.position.z + a.geometry.parameters.depth / 2;
  let b2 = d.position.y - d.geometry.parameters.height / 2;
  let t2 = d.position.y + d.geometry.parameters.height / 2;
  let r2 = d.position.x + d.geometry.parameters.width / 2;
  let l2 = d.position.x - d.geometry.parameters.width / 2;
  let f2 = d.position.z - d.geometry.parameters.depth / 2;
  let B2 = d.position.z + d.geometry.parameters.depth / 2;
  if (t1 < b2 || r1 < l2 || b1 > t2 || l1 > r2 || f1 > B2 || B1 < f2) {
    return false;
  }
  return true;
}

Utilize this function in conditional statements as shown below:

if (checkTouching(cube1,cube2)) {
alert("Collision Detected!")
}

You can view an example of this function in action at

Note: If you rotate or scale either cube/prism, collisions may not be accurately detected due to lack of consideration for these transformations.

My alternate solution provides a more accurate output, returning true only when a collision is detected and false otherwise (with some exceptions). Let's start by creating the following function:

function checkCollision(objA, objB) {
  let meshes = [objB]; 
  let origin = objA.position.clone();
  let numVertices = objA.geometry.vertices.length;
  let positionA = objA.position;
  let matrixA = objA.matrix;
  let verticesA = objA.geometry.vertices;
    for (var vertexIndex = numVertices - 1; vertexIndex >= 0; vertexIndex--) {      
        let localVertex = verticesA[vertexIndex].clone();
        let globalVertex = localVertex.applyMatrix4(matrixA);
        let directionVector = globalVertex.sub(positionA);
        
        let raycaster = new THREE.Raycaster(origin, directionVector.clone().normalize());
        let results = raycaster.intersectObjects(meshes);
        if (results.length > 0 && results[0].distance < directionVector.length()) { 
            return true;
    }
    }
 return false;
}

This function is based on an answer given by Lee Stemkoski, with optimizations to improve performance and eliminate the need for an array of meshes. Now, step 2: create this function:

function checkOverlap(objA, objB) {
  return checkCollision(objA, objB) || checkCollision(objB, objA) || (objA.position.z == objB.position.z && objA.position.x == objB.position.x && objA.position.y == objB.position.y)
}

This function evaluates to true if the center of mesh A is not within mesh B AND the center of mesh B is not within mesh A, OR their positions are equal AND they are touching. This logic accommodates scaling changes applied to one or both meshes. For a live example, visit:

If you're looking for a simpler solution than ray casting and creating your own physics environment, consider using CANNON.js or AMMO.js. These physics libraries are built on top of THREE.js and provide a secondary physics environment where you can tie object positions to simulate physics. While CANNON.js documentation is easy to follow, it hasn't been updated in 4 years. However, the community has forked the repo and keeps it updated as cannon-es. Here's a code snippet to demonstrate how it works:

// Code snippet demonstrating floor and ball creation in CANNON.js
// This creates a floor and a ball in both THREE.js and CANNON.js environment.

Once you set up your scene with CANNON.js, you can update the position of your THREE.js scene within the animate function based on the physics scene. For more information, refer to the documentation. Using a physics library simplifies collision simulation. You might also want to explore Physi.js, another user-friendly library that doesn't require setting up a separate physics environment.

Within my implementation of threejs, I solely utilize

geometry.attributes.position.array

rather than geometry.vertices. In order to convert this to vertices, I have devised the following TypeScript function:

export const getVerticesForObject = (obj: THREE.Mesh): THREE.Vector3[] => {
  const bufferVertices = obj.geometry.attributes.position.array;
  const vertices: THREE.Vector3[] = [];

  for (let i = 0; i < bufferVertices.length; i += 3) {
    vertices.push(
      new THREE.Vector3(
        bufferVertices[i] + obj.position.x,
        bufferVertices[i + 1] + obj.position.y,
        bufferVertices[i + 2] + obj.position.z
      )
    );
  }
  return vertices;
};

The reasoning behind passing in the object's position for each dimension is that the bufferVertices are originally relative to the object's center. For my specific requirements, I needed them to be in a global context.

In addition, I have created a small function to identify collisions based on vertices. This method provides the option to sample vertices for intricate objects or assess proximity by comparing all vertices with those of another object:

const COLLISION_DISTANCE = 0.025;
const SAMPLE_SIZE = 50;
export const detectCollision = ({
  collider,
  collidables,
  method,
}: DetectCollisionParams): GameObject | undefined => {
  const { geometry, position } = collider.obj;
  if (!geometry.boundingSphere) return;

  const colliderCenter = new THREE.Vector3(position.x, position.y, position.z);
  const colliderSampleVertices =
    method === "sample"
      ? _.sampleSize(getVerticesForObject(collider.obj), SAMPLE_SIZE)
      : getVerticesForObject(collider.obj);

  for (const collidable of collidables) {
    // Firstly, ascertain if it resides within the bounding box
    const { geometry: colGeometry, position: colPosition } = collidable.obj;
    if (!colGeometry.boundingSphere) continue;
    const colCenter = new THREE.Vector3(
      colPosition.x,
      colPosition.y,
      colPosition.z
    );
    const bothRadiuses =
      geometry.boundingSphere.radius + colGeometry.boundingSphere.radius;
    const distance = colliderCenter.distanceTo(colCenter);
    if (distance > bothRadiuses) continue;

    // Subsequently, determine if there are any overlapping vectors
    const colSampleVertices =
      method === "sample"
        ? _.sampleSize(getVerticesForObject(collidable.obj), SAMPLE_SIZE)
        : getVerticesForObject(collidable.obj);
    for (const v1 of colliderSampleVertices) {
      for (const v2 of colSampleVertices) {
        if (v1.distanceTo(v2) < COLLISION_DISTANCE) {
          return collidable;
        }
      }
    }
  }
};

If you're looking for a reliable collision detection library, I highly recommend checking out cannon.js. It's incredibly efficient and user-friendly, making collision detection tasks a breeze. Another great option to consider is ammo.js.

When navigating through my walls, I meticulously examine the x and z coordinates to determine camera movement adjustments.

For further details, visit this link.

Assuming that this.segments represents an array of objects called Wall:

this.segments.forEach(elem => {
  var pos = elem.position;
  if ((Math.round(this.camera.position.x) === (pos.x | pos.z)) || (Math.round(this.camera.position.z) === (pos.x | pos.z))) {
    console.log(Math.round(this.camera.position.x) + "x" + pos.x + " " + pos.z);
    console.log(Math.round(this.camera.position.z) + "z" + pos.x + " " + pos.z);
    if ((Math.round(this.camera.position.z) === (pos.z)) && this.hid.moveForward) {
      this.hid.controls.moveForward(-moveSpeed);
    } else if ((Math.round(this.camera.position.z) !== (pos.z)) && this.hid.moveForward) {
      this.hid.controls.moveForward(moveSpeed);
    } else if ((Math.round(this.camera.position.z) === (pos.z)) && this.hid.moveBackward) {
      this.hid.controls.moveForward(-moveSpeed);
    } else if ((Math.round(this.camera.position.z) !== (pos.z)) && this.hid.moveBackward) {
      this.hid.controls.moveForward(moveSpeed);
    }
    if (Math.round(this.camera.position.x) === (pos.x) && this.hid.moveLeft) {
      this.hid.controls.moveRight(moveSpeed);
    } else if (Math.round(this.camera.position.x) !== (pos.x) && this.hid.moveLeft) {
      this.hid.controls.moveRight(-moveSpeed);
    } else if (Math.round(this.camera.position.x) === (pos.x) && this.hid.moveRight) {
      this.hid.controls.moveRight(-moveSpeed);
    } else if (Math.round(this.camera.position.x) !== (pos.x) && this.hid.moveRight) {
      this.hid.controls.moveRight(moveSpeed);
    }
    if (Math.round(this.camera.position.x) === (pos.z) && this.hid.moveLeft) {
      this.hid.controls.moveRight(moveSpeed);
    } else if (Math.round(this.camera.position.x) !== (pos.z) && this.hid.moveLeft) {
      this.hid.controls.moveRight(-moveSpeed);
    } else if (Math.round(this.camera.position.x) === (pos.z) && this.hid.moveRight) {
      this.hid.controls.moveRight(-moveSpeed);
    } else if (Math.round(this.camera.position.x) !== (pos.z) && this.hid.moveRight) {
      this.hid.controls.moveRight(moveSpeed);
    }
  }
});