# Collision detection in three.js

**URL:** <https://discourse.threejs.org/t/collision-detection-in-three-js/3468>\
**Category:** Questions\
**Tags:** physics, collision-detection\
**Created:** [July 18, 2018, 9:40am UTC](https://discourse.threejs.org/t/collision-detection-in-three-js/3468 "2018-07-18T09:40:07Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![ithjz](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/ithjz/32/2214_2.png) [@ithjz](https://discourse.threejs.org/u/ithjz)\
**Post date:** [July 18, 2018, 9:40am UTC](https://discourse.threejs.org/t/collision-detection-in-three-js/3468/1 "2018-07-18T09:40:07Z")

</div>

Two example of collision of obj models of 3D, is this feasible?

I did not find such an example in the three.js framework.

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [July 18, 2018, 9:55am UTC](https://discourse.threejs.org/t/collision-detection-in-three-js/3468/2 "2018-07-18T09:55:15Z")

</div>

`three.js` does not provide a system for collision detection or colliders. You have basically two options: You can implement collision detection with some math and coarse bounding volumes like `THREE.Sphere` or `THREE.Box3` or you try to integrate a physics engine in your app. Check out the following examples to get an impression of this approach:

[https://threejs.org/examples/physics\_ammo\_rope](https://threejs.org/examples/physics_ammo_rope)

For most apps, a real physics engine is actually an overkill. Like mentioned above, you can implement a basic collision detection with more or less simple math like in the following example. Check out the code section in the `render` function which ensures the balls are kept inside the room and collide against each other.

[https://threejs.org/examples/webxr\_vr\_ballshooter](https://threejs.org/examples/webxr_vr_ballshooter)

---

<div class="post-metadata">

**Author:** ![NEVEN](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/neven/32/27524_2.png) [@NEVEN](https://discourse.threejs.org/u/NEVEN)\
**Post date:** [June 27, 2022, 1:58pm UTC](https://discourse.threejs.org/t/collision-detection-in-three-js/3468/3 "2022-06-27T13:58:37Z")

</div>

The link to the second example 404s: [https://threejs.org/examples/webvr\_ballshooter.html](https://threejs.org/examples/webvr_ballshooter.html)

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [June 27, 2022, 2:25pm UTC](https://discourse.threejs.org/t/collision-detection-in-three-js/3468/4 "2022-06-27T14:25:47Z")

</div>

Thanks for the heads up! Both links are updated.

---

<div class="post-metadata">

**Author:** ![NEVEN](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/neven/32/27524_2.png) [@NEVEN](https://discourse.threejs.org/u/NEVEN)\
**Post date:** [June 27, 2022, 2:47pm UTC](https://discourse.threejs.org/t/collision-detection-in-three-js/3468/5 "2022-06-27T14:47:02Z")

</div>

Where can one see the code of the second example? I don’t see it in the source.

I need to implement collision detection and I am looking at this [example](https://stackoverflow.com/a/11480717/1385498) using raycasting but I don’t understand but it seems one can only check if the player collided with an object. I need to check and return the object that collided with the player.

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [June 27, 2022, 8:53pm UTC](https://discourse.threejs.org/t/collision-detection-in-three-js/3468/6 "2022-06-27T20:53:16Z")

</div>

> [@NEVEN](#):
>
> Where can one see the code of the second example? I don’t see it in the source.

The code for keeping objects inside the virtual room is in the `render()` function.

> <https://github.com/mrdoob/three.js/blob/e9b9783c743688ded2c0987751b420b83581c7f7/examples/webxr_vr_ballshooter.html#L230-L309>