Hey there! Let's break down how to tackle your THREE.Raycaster collision challenges in this endless runner setup. First, let's align on your core game design: your skateboard stays fixed at (0,0,0), the world moves toward it, you dodge fast-moving vehicles (and lose points/get penalized if hit) while collecting slower props (which grant points). Below are the most common pain points with Raycaster in this scenario, plus actionable fixes:

1. Collision Detection Inaccuracy (False Hits/Misses) #

It’s super common for Raycaster to miss collisions or trigger false positives when dealing with moving world objects and a fixed player. Here’s how to fix it:

• Cast a ray bundle instead of a single ray: Since your skateboard has a physical size, casting multiple rays around its (0,0,0) position will better approximate its hitbox. For example, cast rays from the left/right/top edges of the skateboard in the direction the world is moving (e.g., negative Z if that’s your forward axis):

  const raycaster = new THREE.Raycaster();
  // Define ray positions around the skateboard's hitbox
  const rayOrigins = [
    new THREE.Vector3(-0.4, 0, 0),  // Left edge
    new THREE.Vector3(0.4, 0, 0),   // Right edge
    new THREE.Vector3(0, 0.2, 0)    // Top edge (for taller props/vehicles)
  ];
  const worldDirection = new THREE.Vector3(0, 0, -1).normalize(); // World moves toward skateboard
  
  for (const origin of rayOrigins) {
    raycaster.set(origin, worldDirection);
    // Check intersections with active vehicles and props
    const hits = raycaster.intersectObjects(activeVehicles.concat(activeProps), true);
    if (hits.length > 0) handleCollision(hits[0].object);
  }
  

• Use simplified collision geometry: For complex vehicle/prop meshes, create a hidden low-poly "collision mesh" attached to the main object. Raycast against these simplified meshes instead of the high-detail render meshes—this boosts both accuracy and performance.

2. Performance Slowdowns with Lots of Objects #

As your endless runner spawns more vehicles and props, raycasting against every object each frame can lag the game. Try these optimizations:

• Cull off-screen objects: Maintain separate lists of activeVehicles and activeProps that only include objects within the camera’s view (plus a small buffer zone ahead). Don’t run raycasts against objects that are already behind the skateboard or too far ahead to collide.
• Use Raycaster layers: Assign vehicles to one layer and props to another using object.layers.set(). Then, toggle the raycaster’s target layer each frame if you only need to check one type of object (e.g., check props more frequently since they’re slower):

  // Assign layers when creating objects
  vehicleMesh.layers.set(1); // Vehicle layer
  propMesh.layers.set(2);    // Prop layer
  
  // When checking vehicle collisions
  raycaster.layers.set(1);
  const vehicleHits = raycaster.intersectObjects(activeVehicles, true);
  
  // When checking prop collisions
  raycaster.layers.set(2);
  const propHits = raycaster.intersectObjects(activeProps, true);
  

3. Distinguishing Vehicle vs. Prop Collision Logic #

You mentioned vehicle and prop collision behavior differs—here’s how to cleanly separate their logic:

• Add custom metadata to objects: Attach a userData object to each vehicle/prop mesh to flag its type and associated point values:

  const vehicleMesh = new THREE.Mesh(vehicleGeo, vehicleMat);
  vehicleMesh.userData = { type: "vehicle", points: -15 }; // Penalty for hitting
  
  const propMesh = new THREE.Mesh(propGeo, propMat);
  propMesh.userData = { type: "prop", points: 50, isCollected: false }; // Reward for collecting
  

• Trigger logic based on metadata: When a collision is detected, check the object’s userData to run the right action:

  function handleCollision(hitObject) {
    const data = hitObject.userData;
    if (data.type === "vehicle") {
      // Dodge failed: deduct points, trigger game over if needed
      updateScore(data.points);
      triggerVehicleHitFeedback();
    } else if (data.type === "prop" && !data.isCollected) {
      // Collect prop: add points, remove/reset the prop
      data.isCollected = true;
      updateScore(data.points);
      resetPropToRear(hitObject);
    }
  }
  

4. Avoiding Collisions During Object Reset #

When you reset vehicles/props to the rear of the world, you might accidentally trigger false collisions during the move. Fix this by:

• Adding a reset buffer zone: Only reset objects once they’re fully outside the camera’s view (and beyond the raycaster’s detection range).
• Toggling collision state during reset: Set a isResetting flag in the object’s userData while moving it, and skip collision checks for objects with this flag.

内容的提问来源于stack exchange，提问作者JJ Gerrish