# Camera collision in third-person orbit controlls

**URL:** <https://discourse.threejs.org/t/camera-collision-in-third-person-orbit-controlls/61443>\
**Category:** Questions\
**Tags:** controls\
**Created:** [February 13, 2024, 1:20pm UTC](https://discourse.threejs.org/t/camera-collision-in-third-person-orbit-controlls/61443 "2024-02-13T13:20:22Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![dedadev](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/dedadev/32/44652_2.png) [@dedadev](https://discourse.threejs.org/u/dedadev)\
**Post date:** [February 13, 2024, 1:20pm UTC](https://discourse.threejs.org/t/camera-collision-in-third-person-orbit-controlls/61443/1 "2024-02-13T13:20:23Z")

</div>

I want to prevent the camera from clipping into walls and ground. My idea was to attach a small sphere to a camera (I have an octree implemented from the FPS example), test that sphere against the collider, and if there is a collision, move a sphere along the normals and towards the orbit target, like in popular MMOs.

code:

```ts
  const sphereCollider = new THREE.Sphere( cameraStartingPosition, 0.2 );

  // animation loop
  sphereCollider.center.copy(camera.position);

  const result = collider.sphereIntersect(sphereCollider);

  if ( result ) {
    const normalVector: THREE.Vector3 = result.normal.multiplyScalar( result.depth );
    camera.position.addScaledVector(normalVector, 1);
    camera.position.lerp(orbitControls.target, 0.01);
  }

```

Issues:  
#1 It works only when I rotate the camera slowly, if I do it fast it clips. (see the video)  
#2 When a camera gets closer to the orbit target due to collision I have to manually re-position it, how to do that automatically?  
#3 When a camera is next to the wall, I can see inside, how to prevent that?

---

<div class="post-metadata">

**Author:** ![mjurczyk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mjurczyk/32/10995_2.png) [@mjurczyk](https://discourse.threejs.org/u/mjurczyk)\
**Post date:** [February 13, 2024, 1:54pm UTC](https://discourse.threejs.org/t/camera-collision-in-third-person-orbit-controlls/61443/2 "2024-02-13T13:54:29Z")

</div>

[CameraControls](https://github.com/yomotsu/camera-controls) is what you seek - it’s a drop-in replacement for orbit controls.

---

<div class="post-metadata">

**Author:** ![dedadev](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/dedadev/32/44652_2.png) [@dedadev](https://discourse.threejs.org/u/dedadev)\
**Post date:** [February 13, 2024, 4:45pm UTC](https://discourse.threejs.org/t/camera-collision-in-third-person-orbit-controlls/61443/3 "2024-02-13T16:45:43Z")

</div>

Hey, thanks  
It solves the first 2 issues, but not the third one.  
Looks like my buildings don’t have a volume, there are just walls with 0 widths, maybe it could be fixed on the modeling level, in the blender.