# Check if positions are behind object

**URL:** <https://discourse.threejs.org/t/check-if-positions-are-behind-object/35451>\
**Category:** Questions\
**Tags:** math\
**Created:** [March 1, 2022, 3:56pm UTC](https://discourse.threejs.org/t/check-if-positions-are-behind-object/35451 "2022-03-01T15:56:32Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![jcy](https://avatars.discourse-cdn.com/v4/letter/j/91b2a8/32.png) [@jcy](https://discourse.threejs.org/u/jcy)\
**Post date:** [March 1, 2022, 3:56pm UTC](https://discourse.threejs.org/t/check-if-positions-are-behind-object/35451/1 "2022-03-01T15:56:32Z")

</div>

Hi,

I have a 3D character along with several predefined positions on the floor. Is there a way to check if a position is behind the 3D character and not in front or sideways?

I’ve included a rough sketch of what I’m trying to achieve (sorry for the poor drawing). Essentially I would like to return all of the positions of the red circles within the red lines and exclude all other circles outside of these two lines.

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/b/8/b843c912c46ad6879f7d05f6d57b91ff3c4db1e0.png)

Is this possible? If so, is there any suggestion on how I can achieve this? I’m sorry but I don’t actually know which functions to use from Three JS for something like this or if it is possible.

Thank you!

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [March 1, 2022, 5:15pm UTC](https://discourse.threejs.org/t/check-if-positions-are-behind-object/35451/2 "2022-03-01T17:15:48Z")

</div>

Hi!  
Just an option. Let’s have the object (O) and the target (T)

1. Get direction vector of the object in global space, `dirO`.
2. Get the normalized vector of `(T.position - O.position)` in global space, `dirT`.
3. Find the [dot-product](https://en.wikipedia.org/wiki/Dot_product) of these vectors `let d = dirO.dot(dirT);`, if `d` less than 0 or some negative value (`val`), then the target locates in the object’s back hemisphere. And the lesser `val`, the more narrow sector at back you define.

---

<div class="post-metadata">

**Author:** ![jcy](https://avatars.discourse-cdn.com/v4/letter/j/91b2a8/32.png) [@jcy](https://discourse.threejs.org/u/jcy)\
**Post date:** [March 1, 2022, 5:41pm UTC](https://discourse.threejs.org/t/check-if-positions-are-behind-object/35451/3 "2022-03-01T17:41:39Z")

</div>

Hi,

Thank you very much for the detailed steps! By “getting direction vector of object”, do you mean something like this?

```javascript
var matrix = new THREE.Matrix4();
matrix.extractRotation( mesh.matrix );

var direction = new THREE.Vector3( 0, 0, 1 );
matrix.multiplyVector3( direction );

```

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [March 1, 2022, 6:38pm UTC](https://discourse.threejs.org/t/check-if-positions-are-behind-object/35451/4 "2022-03-01T18:38:29Z")

</div>

There is that method: [three.js docs](https://threejs.org/docs/index.html?q=object#api/en/core/Object3D.getWorldDirection)

---

<div class="post-metadata">

**Author:** ![abstract](https://avatars.discourse-cdn.com/v4/letter/a/ee59a6/32.png) [@abstract](https://discourse.threejs.org/u/abstract)\
**Post date:** [March 2, 2022, 12:07am UTC](https://discourse.threejs.org/t/check-if-positions-are-behind-object/35451/5 "2022-03-02T00:07:22Z")

</div>

Hello,

I haven’t tested it myself but maybe you can use [frustums](https://threejs.org/docs/index.html#api/en/math/Frustum)

[Frustums](http://en.wikipedia.org/wiki/Frustum) are used to determine what is inside the camera’s field of view. They help speed up the rendering process - objects which lie outside a camera’s frustum can safely be excluded from rendering.

There is a method [containsPoint](https://threejs.org/docs/index.html#api/en/mat/Frustum.containsPoint)

---

<div class="post-metadata">

**Author:** ![jcy](https://avatars.discourse-cdn.com/v4/letter/j/91b2a8/32.png) [@jcy](https://discourse.threejs.org/u/jcy)\
**Post date:** [March 2, 2022, 12:58am UTC](https://discourse.threejs.org/t/check-if-positions-are-behind-object/35451/6 "2022-03-02T00:58:37Z")

</div>

What I need is to detect whether the target positions are behind an object and not the camera. Does frustums also work with objects? If so, how would I read the frustum of an object?

---

<div class="post-metadata">

**Author:** ![jcy](https://avatars.discourse-cdn.com/v4/letter/j/91b2a8/32.png) [@jcy](https://discourse.threejs.org/u/jcy)\
**Post date:** [March 2, 2022, 1:37am UTC](https://discourse.threejs.org/t/check-if-positions-are-behind-object/35451/7 "2022-03-02T01:37:11Z")

</div>

@prisoner849 I tried something like this:

```javascript
var o_position = mesh.position;	
var t_position = new THREE.Vector3(-13.37393856048584, 1.4, -15.271000862121582);															
var dirO = mesh.getWorldDirection(t_position);
var dirT = t_position.sub(o_position).normalize();
var d = dirO.dot(dirT);

```

And I get 0.99999999 but when I change the values of t\_position to position values of a location in front of the 3D object, I also get 0.999999. Shouldn’t positions in front of the 3D object be greater than 1?

---

<div class="post-metadata">

**Author:** ![abstract](https://avatars.discourse-cdn.com/v4/letter/a/ee59a6/32.png) [@abstract](https://discourse.threejs.org/u/abstract)\
**Post date:** [March 2, 2022, 2:28am UTC](https://discourse.threejs.org/t/check-if-positions-are-behind-object/35451/8 "2022-03-02T02:28:04Z")

</div>

It is used with the camera but you can use it too. It is just some form. Instead of being a box it is defined by planes.

let f = new THREE.Frustum(p0,p1,p2,p3,p4,p5);

p0 to p5 are planes that limit the frustum. Your character is a plane, the floor is a plane, there is a plane at the 2 lines perpendicular to the floor, another plane parallel to the floor that defines the height of the frustum and another plane far behind the character which defines how far your floor goes back.

If you understand how you define these planes, you will be able to set the Frustum and then use the containsPoint Method.

---

<div class="post-metadata">

**Author:** ![jcy](https://avatars.discourse-cdn.com/v4/letter/j/91b2a8/32.png) [@jcy](https://discourse.threejs.org/u/jcy)\
**Post date:** [March 2, 2022, 2:58am UTC](https://discourse.threejs.org/t/check-if-positions-are-behind-object/35451/9 "2022-03-02T02:58:46Z")

</div>

@abstract Thank you for the detailed explanation. I tried the containsPoint() method with the camera’s frustum like this and it seemed to detect what’s in front:

```javascript
frustum.setFromMatrix(new THREE().multiplyMatrices(camera.projectionMatrix, camera.matrixWorldInverse));							
console.log(frustum.containsPoint(target))

```

But how can I add a backwards looking `projectionMatrix` and `matrixWorldInverse` to a 3D object, so that the frustum looks backwards and checks for `containsPoint` ?

---

<div class="post-metadata">

**Author:** ![abstract](https://avatars.discourse-cdn.com/v4/letter/a/ee59a6/32.png) [@abstract](https://discourse.threejs.org/u/abstract)\
**Post date:** [March 2, 2022, 3:18am UTC](https://discourse.threejs.org/t/check-if-positions-are-behind-object/35451/10 "2022-03-02T03:18:03Z")

</div>

maybe you can apply a rotation

---

<div class="post-metadata">

**Author:** ![jcy](https://avatars.discourse-cdn.com/v4/letter/j/91b2a8/32.png) [@jcy](https://discourse.threejs.org/u/jcy)\
**Post date:** [March 2, 2022, 11:09am UTC](https://discourse.threejs.org/t/check-if-positions-are-behind-object/35451/11 "2022-03-02T11:09:23Z")

</div>

Thanks! Can you please tell me how do I rotate frustum in the opposite direction of where the mesh is facing?

---

<div class="post-metadata">

**Author:** ![abstract](https://avatars.discourse-cdn.com/v4/letter/a/ee59a6/32.png) [@abstract](https://discourse.threejs.org/u/abstract)\
**Post date:** [March 2, 2022, 12:49pm UTC](https://discourse.threejs.org/t/check-if-positions-are-behind-object/35451/12 "2022-03-02T12:49:50Z")

</div>

If you don’t understand Frustum, maybe you can use [Box3](https://threejs.org/docs/index.html#api/en/math/Box3).

You just have to provide 2 points. Based on the position of your character and the floor it shouldn’t be difficult to calculate these two points.

“Behind” and “in front” are relative notions, you have to define what they mean for you. You need a reference. If it is, for instance, relative to the z position of your mesh then everything with a greater z is behind but you can also say everything with a greater z is in front. It’s up to you. If behind is between your character and the position of the camera then do the calculations accordingly: all z positions between z character and z camera are behind. Same for your two lines, if they are parallel, and just have a different x, you may just compare the x of your objects with the x of your lines. If the disposition is like the drawing, just using the coordinates shouldn’t be too difficult.

I’m just giving you ideas, you have to adapt them to your case and your scene.

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [March 2, 2022, 1:03pm UTC](https://discourse.threejs.org/t/check-if-positions-are-behind-object/35451/13 "2022-03-02T13:03:31Z")

</div>

Here is an attempt with dot-product:  
https://codepen.io/prisoner849/embed/preview/MWOZgrv?default-tabs=js%2Cresult&height=300&host=https%3A%2F%2Fcodepen.io&slug-hash=MWOZgrv

---

<div class="post-metadata">

**Author:** ![abstract](https://avatars.discourse-cdn.com/v4/letter/a/ee59a6/32.png) [@abstract](https://discourse.threejs.org/u/abstract)\
**Post date:** [March 2, 2022, 1:10pm UTC](https://discourse.threejs.org/t/check-if-positions-are-behind-object/35451/14 "2022-03-02T13:10:38Z")

</div>

@ [prisoner849](https://discourse.threejs.org/u/prisoner849) very nice

Since it is an angle objects close to the subject are not detected so it depends on what OP is looking for

---

<div class="post-metadata">

**Author:** ![jcy](https://avatars.discourse-cdn.com/v4/letter/j/91b2a8/32.png) [@jcy](https://discourse.threejs.org/u/jcy)\
**Post date:** [March 2, 2022, 1:19pm UTC](https://discourse.threejs.org/t/check-if-positions-are-behind-object/35451/15 "2022-03-02T13:19:35Z")

</div>

@abstract I did understand Frustum and managed to get your method to work by:

1. Creating an invisible camera
2. Adding it to the same position as the 3D character
3. Check if positions are within the invisible camera’s frustum

But what I don’t know is how do I set the invisible camera to always face the opposite direction of where the 3D character is facing.

I tried this method, which works like a reverse lookAt but it only works if I have a previous set of lookAt coordinates.

```javascript
var vector = new THREE.Vector3();
var origin_vector	= new THREE.Vector3(origin.x, origin.y, origin.z);
var target_vector	= new THREE.Vector3(target.x, target.y, target.z);

vector.subVectors(origin_vector, target_vector).add(origin_vector);
hidden_camera.lookAt(vector);

```

Can you please tell me how can I have the invisible camera to always look in the opposite direction of where the 3D character is facing?

---

<div class="post-metadata">

**Author:** ![abstract](https://avatars.discourse-cdn.com/v4/letter/a/ee59a6/32.png) [@abstract](https://discourse.threejs.org/u/abstract)\
**Post date:** [March 2, 2022, 1:24pm UTC](https://discourse.threejs.org/t/check-if-positions-are-behind-object/35451/16 "2022-03-02T13:24:14Z")

</div>

you can place the camera at the character and then rotate it the opposite rotation you apply to your character. When your character turns right or left you to apply a rotation? apply the opposite one to the invisible camera. Normally you can set the target direction of your camera so set the camera at the character position and the target behind. It should work

---

<div class="post-metadata">

**Author:** ![abstract](https://avatars.discourse-cdn.com/v4/letter/a/ee59a6/32.png) [@abstract](https://discourse.threejs.org/u/abstract)\
**Post date:** [March 2, 2022, 1:44pm UTC](https://discourse.threejs.org/t/check-if-positions-are-behind-object/35451/17 "2022-03-02T13:44:55Z")

</div>

Ok sorry, I was busy, I didn’t read your message well. Since you did everything, the only thing you have now is to define the normal to your character and take the opposite vector.

> **[Introduction of WebGL 3.js Learning Notes Normal Vector Mesh Material and...](https://programmer.help/blogs/5cc1db0ab0a75.html)**
>
> WebGL Learning - Three.js Learning Notes (5) Click to view demo demonstration Demo address: https://nsytsqdtn.github.io/d... Simple Mesh Normal Material Mesh Normal Material is a material that is not affected by the color used in rendering. It is...

this example manages to get a normal to each face of the sphere and draw an arrow. You may use the same idea. if you get the surronding box of your character, just use one of the sides

---

<div class="post-metadata">

**Author:** ![Kamyar\_Taher](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/kamyar_taher/32/31864_2.png) [@Kamyar\_Taher](https://discourse.threejs.org/u/Kamyar_Taher)\
**Post date:** [March 2, 2022, 1:46pm UTC](https://discourse.threejs.org/t/check-if-positions-are-behind-object/35451/18 "2022-03-02T13:46:32Z")

</div>

Hello, I’m also interested in this function and I was wondering, does the camera not contain the frustum property directly? Is it not possible to get the current state from the camera object instead of computing it with "frustum.setFromMatrix(new THREE().multiplyMatrices(camera.projectionMatrix, camera.matrixWorldInverse)) " ?

---

<div class="post-metadata">

**Author:** ![abstract](https://avatars.discourse-cdn.com/v4/letter/a/ee59a6/32.png) [@abstract](https://discourse.threejs.org/u/abstract)\
**Post date:** [March 2, 2022, 2:32pm UTC](https://discourse.threejs.org/t/check-if-positions-are-behind-object/35451/19 "2022-03-02T14:32:06Z")

</div>

It seems the boundingBox doesn’t care about the orientation of your mesh. So all in all, I would set everything and apply the opposite rotations to the invisible camera I apply to the character. Otherwise, you need to look for a vertex in your character and use it as a reference.

You may also have a look at this example: [three.js examples](https://threejs.org/examples/#webgl_camera)

---

<div class="post-metadata">

**Author:** ![jcy](https://avatars.discourse-cdn.com/v4/letter/j/91b2a8/32.png) [@jcy](https://discourse.threejs.org/u/jcy)\
**Post date:** [March 2, 2022, 5:25pm UTC](https://discourse.threejs.org/t/check-if-positions-are-behind-object/35451/20 "2022-03-02T17:25:42Z")

</div>

@abstract Thank you very much for the detailed explanation and steps. I was able to get your solution working and it’s great! 🙂

[Next page](https://discourse.threejs.org/t/check-if-positions-are-behind-object/35451.md?page=2)