Camera Collision Detection

Questions
,
1

Hello all,

I am currently working on a project where you can view an object in a room.
The room is represented by a BoxGeometry.
The default position of the camera with OrbitControls is inside the room. I would like to make sure that the camera cannot leave the room.
Unfortunately I can use properties like polarAngle and azimuthAngle only conditionally, because a complete rotation of the camera within the room should be possible.

My idea was to determine in the update of the OrbitControl or the camera now whether the room is left, and thus prevent the update.

But before that I would like to know if there are better solutions for this problem, maybe even supported by threejs.

I am glad about every answer! Thanks a lot!

Kind regards
VForsmann

1 Like
2

you can use a raycaster between the orbit controls target and camera position. And adjust the camera position to any intersection.
Demo here : Raycaster Collision Detection - Three.js Tutorials (sbcode.net)
Source code here : https://sbcode.net/view_source/raycaster2.html
See the lines after
controls.addEventListener('change', function () { ...

2 Likes
3

This looks awesome!
Thank you very much :slight_smile:

4

A note regarding this - just raycasting will work in most collision situations, but sometimes you will still be able to see backfaces of the walls / through of the walls - that’s due to camera field of view reaching further than just the centre of the viewport (try slowly moving the camera along the ground plane in @seanwasere example, at some point you’ll also be able to through the floor.) As an example:

  1. You detect collisions on the way to target and move the camera to the last collision point:

view-1
view-12048×2048 419 KB

  1. Camera is moved forward and centre of the screen does reach beyond the wall:

view-2
view-22048×2048 414 KB

But the edges of the viewport will still be cutting through the walls.

To take that into account, you can either detect collisions using a sphere (with centre at the camera position, with radius adjusting to camera fov), or add fov-based padding after reaching the collision point (which will kinda be equivalent to sphere, just fewer math :sweat_smile: )

2 Likes
5

i recently bumped into this project: GitHub - yomotsu/camera-controls: A camera control for three.js, similar to THREE.OrbitControls yet supports smooth transitions and more features.

this has natural support for collisions and entrapment. search for boundary, there’s a demo for this, too.

3 Likes
6

Thank you very much guys!
With your solutions i could build what i wanted!
Could also adept it to the camera target not leaving the room and use some small maths to early detect the collision and have no problems with the camera fov!

1 Like
7

I am using Camera Control in this project, using forward and truck to move the camera, how to block the camera moving through the wall?

8

You can send a ray in the direction of the camera and if there is an intersection with the object or you can calculate the distance to that object, you can block to camera from moving in this direction.