# Intersection between 2 objects

**URL:** <https://discourse.threejs.org/t/intersection-between-2-objects/59323>\
**Category:** Questions\
**Tags:** intersection\
**Created:** [December 17, 2023, 10:33am UTC](https://discourse.threejs.org/t/intersection-between-2-objects/59323 "2023-12-17T10:33:09Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![HMb\_Mead](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/hmb_mead/32/43070_2.png) [@HMb\_Mead](https://discourse.threejs.org/u/HMb_Mead)\
**Post date:** [December 17, 2023, 10:33am UTC](https://discourse.threejs.org/t/intersection-between-2-objects/59323/1 "2023-12-17T10:33:09Z")

</div>

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

```javascript
<!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>

```

---

<div class="post-metadata">

**Author:** ![anidivr](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/anidivr/32/32924_2.png) [@anidivr](https://discourse.threejs.org/u/anidivr)\
**Post date:** [December 17, 2023, 12:13pm UTC](https://discourse.threejs.org/t/intersection-between-2-objects/59323/2 "2023-12-17T12:13:05Z")

</div>

These might be helpful. They have intersect methods

[Sphere – three.js docs (threejs.org)](https://threejs.org/docs/index.html?q=plane#api/en/math/Sphere)  
[Plane – three.js docs (threejs.org)](https://threejs.org/docs/index.html?q=plane#api/en/math/Plane)

---

<div class="post-metadata">

**Author:** ![HMb\_Mead](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/hmb_mead/32/43070_2.png) [@HMb\_Mead](https://discourse.threejs.org/u/HMb_Mead)\
**Post date:** [December 17, 2023, 12:59pm UTC](https://discourse.threejs.org/t/intersection-between-2-objects/59323/3 "2023-12-17T12:59:04Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![anidivr](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/anidivr/32/32924_2.png) [@anidivr](https://discourse.threejs.org/u/anidivr)\
**Post date:** [December 18, 2023, 1:46pm UTC](https://discourse.threejs.org/t/intersection-between-2-objects/59323/4 "2023-12-18T13:46:18Z")

</div>

When they do intersect, you’ll need to cast a ray from the ball to the plane to get the [intersection details](https://threejs.org/docs/index.html?q=ray#api/en/core/Raycaster.intersectObject)
