# Collision detect between CSS2DObject-s

**URL:** <https://discourse.threejs.org/t/collision-detect-between-css2dobject-s/71185>\
**Category:** Questions\
**Tags:** collision-detection, css2dobject\
**Created:** [September 25, 2024, 10:50am UTC](https://discourse.threejs.org/t/collision-detect-between-css2dobject-s/71185 "2024-09-25T10:50:13Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![emlem](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/emlem/32/52096_2.png) [@emlem](https://discourse.threejs.org/u/emlem)\
**Post date:** [September 25, 2024, 10:50am UTC](https://discourse.threejs.org/t/collision-detect-between-css2dobject-s/71185/1 "2024-09-25T10:50:13Z")

</div>

Hello everyone!

I need help with how to detect if one CSS2DObject overlaps with another CSS2DObject. The essence of the problem is that imagine a sphere, on the surface of which the camera is placed, and around the camera, CSS2DObjects are placed dynamically. I would like to achieve that when I place an object, it detects if it overlaps with another one.

What I have already tried: I retrieve the getBoundingClientRect() of the object’s HTML element and compare it with those of the other objects. This works as long as the objects are in the field of view; if they are not in view, then I do not get relevant values from getBoundingClientRect(). My goal would be that when the page loads, all objects are placed, we are looking in a given direction, and all objects are positioned so that they do not overlap each other (without having to rotate around).

Thank you in advance for your help!

---

<div class="post-metadata">

**Author:** ![pb5000](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/pb5000/32/61466_2.png) [@pb5000](https://discourse.threejs.org/u/pb5000)\
**Post date:** [July 7, 2025, 8:34pm UTC](https://discourse.threejs.org/t/collision-detect-between-css2dobject-s/71185/2 "2025-07-07T20:34:11Z")

</div>

I’ve had the same question-- but for me, I think I can keep everything in the field of view. I’ll try your suggestion of retrieving the getBoundingClientRect().

---

<div class="post-metadata">

**Author:** ![Fennec](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/fennec/32/59265_2.png) [@Fennec](https://discourse.threejs.org/u/Fennec)\
**Post date:** [July 7, 2025, 11:50pm UTC](https://discourse.threejs.org/t/collision-detect-between-css2dobject-s/71185/3 "2025-07-07T23:50:27Z")

</div>

Instead of taping into the DOM, you can use the `CSS2DObject` representation of your elements. Since `CSS2DObject` extends `Object3D`, it can be integrated with any physics engine or used in a custom implementation with basic collision detection using bounding volumes like bounding spheres, AABBs, or OBBs.