# Three js move camera

**URL:** https://discourse.threejs.org/t/three-js-move-camera/6852
**Category:** Questions
**Tags:** collision-detection
**Created:** [April 1, 2019, 4:13pm UTC](https://discourse.threejs.org/t/three-js-move-camera/6852 "2019-04-01T16:13:15Z")
**Posts on this page:** 5
**Page:** 1

<div class="post-metadata">

### Author: ![M\_Mehdi](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/m_mehdi/32/1026_2.png) [@M\_Mehdi](https://discourse.threejs.org/u/M_Mehdi)
#### Post date: [April 1, 2019, 4:13pm UTC](https://discourse.threejs.org/t/three-js-move-camera/6852/1 "2019-04-01T16:13:15Z")

</div>

hello friends  
I am new to three js and I have a question about collision detection.  
I have a scene with perspective camera and I put 20 objects like the spheres, the cubes and the pyramids in this 3D scene. I have made the AWSD for moving my camera through this scene and it works (using event and keycodes). now I want to restrict my camera. it means I want it to not pass through the objects. so I started to use raycaster for finding the collisions but it doesn’t work perfectly for all directions.  
any comment can be a great help  
thanks

---

<div class="post-metadata">

### Author: ![yombo](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/yombo/32/3325_2.png) [@yombo](https://discourse.threejs.org/u/yombo)
#### Post date: [April 1, 2019, 6:01pm UTC](https://discourse.threejs.org/t/three-js-move-camera/6852/2 "2019-04-01T18:01:03Z")

</div>

If you show us your detection and collision avoiding code we will be able to help you 😉

---

<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: [April 2, 2019, 1:02pm UTC](https://discourse.threejs.org/t/three-js-move-camera/6852/3 "2019-04-02T13:02:03Z")

</div>

Instead of using a ray, you might have more success by performing a simple sphere/sphere intersection test via [Sphere.intersectsSphere](https://threejs.org/docs/index.html#api/en/math/Sphere.intersectsSphere). After defining a bounding sphere for your camera, you can test for an intersections with the bounding volumes of all other objects in your scene. Ensure to perform the intersection test in world space. To transform the bounding sphere of an object into world space, do this:

```auto
const sphere = new THREE.Sphere();
sphere.copy( geometry.boundingSphere).applyMatrix4( object.matrixWorld );

if ( boundingSphereCamera.intersectsSphere( sphere ) ) {

    // handle intersection

}

```

When creating your objects, call `object.geometry.computeBoundingSphere()` once for each instance in order to prepare the bounding spheres for the upcoming intersection tests.

---

<div class="post-metadata">

### Author: ![M\_Mehdi](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/m_mehdi/32/1026_2.png) [@M\_Mehdi](https://discourse.threejs.org/u/M_Mehdi)
#### Post date: [April 3, 2019, 2:01pm UTC](https://discourse.threejs.org/t/three-js-move-camera/6852/4 "2019-04-03T14:01:48Z")

</div>

thank you for your attention to my question  
i have some other difficulties and questions and it would be very nice of you if you can help me:

1- for simplifying the things for myself, i created a box around all of objects with this command  
let boundingBox = new THREE.Box3().fromObject( object );  
and after that i tried to detect the collision using:  
let collision = boundingBox.containsPoint( camera.position );  
do you think it is a good practice or it is recommended to use Sphere.intersectsSphere?? (because i dont know how can i define a bounding sphere for my camera)

2- i cant understand what this part will do for me  
sphere.copy( geometry.boundingSphere).applyMatrix4( object.matrixWorld );

3- i tried to create all of the objects at first and push them in an array. afterwards define bounding box3/sphere for all of them by passing them in a loop. but it doesnt work for me. is it impossible or i made a mistake??

thank you

---

<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: [April 3, 2019, 2:32pm UTC](https://discourse.threejs.org/t/three-js-move-camera/6852/5 "2019-04-03T14:32:41Z")

</div>

Using `.containsPoint()` is fine however it’s good if you have some space between the camera and the objects in your scene. Using a bounding sphere will allow you to adjust this space with `Sphere.radius`.

> [@M\_Mehdi](#):
>
> because i dont know how can i define a bounding sphere for my camera

You create an instance of `Sphere`, assign a radius and the initial center point to it. Each simulation step, you apply the world matrix of the camera to the sphere via `Sphere.applyMatrix4()`.

> [@M\_Mehdi](#):
>
> i cant understand what this part will do for me

If an object has a geometry, you can compute the bounding sphere in local space via `BufferGeometry.computeBoundingSphere()`. When you now apply the current world matrix of the object to the sphere, you can use it for your intersection test. The code copies the sphere so it does not overwrite the bounding sphere in local space.

> [@M\_Mehdi](#):
>
> but it doesnt work for me. is it impossible or i made a mistake??

What do you mean with _it does no work_. Do you get runtime errors? I think it’s best when you share your current state of work as a [live example](https://jsfiddle.net/f2Lommf5/).
