Intersection between 2 objects

Questions
1

hi I’m new with three.js and face problem I will appreciate any help
the problem is I have ball moving in helix path and collide with plane I will stopped the ball at this point my equation is how to find intersection point between ball and plane

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Three.js Ball in Helix Motion</title>
    <style>
      body {
        margin: 0;
      }
    </style>
  </head>
  <body>
    <script src="https://threejs.org/build/three.js"></script>
    <script>
      // Set up scene
      const scene = new THREE.Scene();
      const camera = new THREE.PerspectiveCamera(
        75,
        window.innerWidth / window.innerHeight,
        0.1,
        1000
      );
      const renderer = new THREE.WebGLRenderer();
      renderer.setSize(window.innerWidth, window.innerHeight);
      document.body.appendChild(renderer.domElement);

      // Create a ball
      const ballGeometry = new THREE.SphereGeometry(1, 32, 32);
      const ballMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000 });
      const ball = new THREE.Mesh(ballGeometry, ballMaterial);

      // Set up bounding sphere
      ball.geometry.computeBoundingSphere();
      const ballBB = new THREE.Sphere().copy(ball.geometry.boundingSphere);

      scene.add(ball);

      // Create a plane
      const planeGeometry = new THREE.PlaneGeometry(10, 10);
      const planeMaterial = new THREE.MeshBasicMaterial({
        color: 0x00ff00,
        side: THREE.DoubleSide,
      });
      const plane = new THREE.Mesh(planeGeometry, planeMaterial);

      // Rotate the plane to be parallel to the y-axis
      plane.rotation.y = Math.PI / 1.9;
      plane.position.set(5, 0, 0);
      scene.add(plane);

      // Set up camera position
      camera.position.z = 20;

      // Animation logic for helix motion
      const helixRadius = 1;
      const helixHeight = 1;
      let time = 0;
      let collisionDetected = false; // Variable to track collision

      const animate = function () {
        ball.geometry.computeBoundingSphere(); // Recalculate bounding sphere in case the geometry changes
        ballBB.copy(ball.geometry.boundingSphere).applyMatrix4(ball.matrixWorld);

        requestAnimationFrame(animate);

        // Move the ball in a helix motion if no collision
        if (!collisionDetected) {
          ball.position.z = helixRadius * Math.cos(time);
          ball.position.x = helixHeight * time;
          ball.position.y = helixRadius * Math.sin(time);
        }

        // Check for collision using intersectsSphere
        if (!collisionDetected && ballBB.intersectsSphere(new THREE.Sphere(plane.position, 1))) {
          // Collision detected
          console.log("Collision detected!");
                    // Calculate the collision point
                    const collisionPoint = new THREE.Vector3();
          ball.getWorldPosition(collisionPoint);

          // Log the collision point
          console.log("Collision Point:", collisionPoint.x, collisionPoint.y, collisionPoint.z);
          //-----------
     
    console.log("Here need to obtain intersection point");
          //-------------
          collisionDetected = true;
          ball.material.color.set(0x0000ff); // Change ball color on collision
        } else {
          ball.material.color.set(0xff0000); // Reset ball color if no collision
        }

        time += 0.01;

        renderer.render(scene, camera);
      };

      // Handle window resize
      window.addEventListener("resize", function () {
        const newWidth = window.innerWidth;
        const newHeight = window.innerHeight;

        camera.aspect = newWidth / newHeight;
        camera.updateProjectionMatrix();

        renderer.setSize(newWidth, newHeight);
      });

      // Start the animation loop
      animate();
    </script>
  </body>
</html>
1 Like
2

These might be helpful. They have intersect methods

Sphere – three.js docs (threejs.org)
Plane – three.js docs (threejs.org)

1 Like
3

thanks for replay this doc. is useful to check if there is an intersection but its not tell where the intersection is

4

When they do intersect, you’ll need to cast a ray from the ball to the plane to get the intersection details