# \[2D\] Blocking camera vision using obstacles

**URL:** <https://discourse.threejs.org/t/2d-blocking-camera-vision-using-obstacles/43638>\
**Category:** Questions\
**Tags:** raycasting, geometry\
**Created:** [October 14, 2022, 9:12pm UTC](https://discourse.threejs.org/t/2d-blocking-camera-vision-using-obstacles/43638 "2022-10-14T21:12:19Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![jonybekov](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/jonybekov/32/30298_2.png) [@jonybekov](https://discourse.threejs.org/u/jonybekov)\
**Post date:** [October 14, 2022, 9:12pm UTC](https://discourse.threejs.org/t/2d-blocking-camera-vision-using-obstacles/43638/1 "2022-10-14T21:12:19Z")

</div>

Hey, guys!

I want to implement camera vision which can be blocked by obstacles using three.js & react-three-fiber. Here’s the result that I want to achieve:

[https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/0/d/0df95b76468282813bafa2bbe94e89e5f98856c4.mp4](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/0/d/0df95b76468282813bafa2bbe94e89e5f98856c4.mp4)
  
Credit: [Ninja vs EVILCORP](https://js13kgames.com/games/ninja-vs-evilcorp/index.html)

As you can see above, the yellow area is camera vision and it’s not going through obstacles.

I found a couple of resources that may help to solve this problem using raycasting:  
[https://www.redblobgames.com/articles/visibility/](https://www.redblobgames.com/articles/visibility/)

> **[Sight & Light](https://ncase.me/sight-and-light/)**
>
> How to create 2D visibility/shadow effects for your game.

The problem is that I cannot cast rays to all directions (only limited degree and distance).  
I have no idea how to do this.  
I’d really appreciate your help.

Here’s a sandbox for starting point:

> **[camera-vision-with-obstacles - CodeSandbox](https://codesandbox.io/s/camera-vision-with-obstacles-yelst9)**
>
> camera-vision-with-obstacles by jonybekov using @react-three/drei, @react-three/fiber, @types/three, leva, react, react-dom, react-scripts, three

---

<div class="post-metadata">

**Author:** ![dllb](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/dllb/32/19191_2.png) [@dllb](https://discourse.threejs.org/u/dllb)\
**Post date:** [October 15, 2022, 7:10am UTC](https://discourse.threejs.org/t/2d-blocking-camera-vision-using-obstacles/43638/2 "2022-10-15T07:10:48Z")

</div>

> The problem is that I cannot cast rays to all directions (only limited degree and distance).

Yes, three.js cameras are based on projection so they can always see much less than 180 degrees, but you could use 4 x 90deg cameras, or 3 x 120deg, or rotate one camera to cover 360 degrees. That would be the easy approach.

Or make your own special camera (I had made a distortion-free 180deg camera once in Flash, then combined two of them for 360 degrees for 3D spherical view, but I have yet to translate it to three.js code).

Or it might be possible to make a shader for speed.