<p>This can be because of multiple reasons:</p>
<p>first as @gallickgunner said, the up vector which is passed to the <code>lookAt</code> function should not be alligned to the view direction! Here you need to pass in the up direction of the camera (not the world). So when having a top down view, up shoud be a vector within the plane x/y.</p>
<p>The next thing why you maybe don't see anything can be, that your object don't lie within the projection matrix near and far clipping planes.</p>
<p>Take a look at <a href="http://www.opengl-tutorial.org/beginners-tutorials/tutorial-3-matrices/" rel="nofollow noreferrer">OpenGL tutorial matrices</a>.</p>

CC BY-SA 4.0
2023-06-24T10:06:17.923Z
Thank you @Thomas ! I didn't know the upward direction is related to the camera and not the world. Does this mean you need to define a new upward direction every time the perspective changes? Let's say you gradually rotate the camera by adding a transformation to the view matrix. The camera goes from looking straight down, as in the example, to looking straight ahead. At what point do you update the upward direction?
Candleout
CC BY-SA 4.0
2023-06-26T06:22:33.370Z
@Candleout I only update the upward direction when using the `lookAt` function. When applying transformations by multiplying matrices, you don't need the upward direction.
Thomas
CC BY-SA 4.0
2023-07-03T21:58:07.693Z
Okay! Thanks for the clarification. @Thomas
Candleout
CC BY-SA 4.0
2023-06-23T08:50:14.633Z
2023-06-23T08:50:14.633Z
Thomas
<p>I'm trying to setup a 3D camera in WebGL. The camera is setup with the help of a lookAt function. The lookAt function takes <code>cameraTarget</code>, <code>cameraPosition</code> and <code>up</code> as as inputs.</p>
<p>The code can be found here: <a href="https://codepen.io/Candleout/pen/poxMLPB" rel="nofollow noreferrer">https://codepen.io/Candleout/pen/poxMLPB</a> If the scene looks empty you load the CodePen, simply run the code again.</p>
<p><a href="https://i.sstatic.net/XMCAq.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/XMCAq.png" alt="axes" /></a></p>
<p>How can I position the camera straightly above or below the target?</p>
<p>In the scene, Z (blue) is the vertical axis, while X (red) and Y (green) represents the horizontal plane. I have tried putting the object at <code>[0, 0, 0]</code> and giving the camera a position of <code>[0, 0, distance]</code>. With a <code>cameraTarget</code> of <code>[0, 0, 0]</code> (same as the object) I was expecting this would give me a top-down view of the object. However, if I set the camera position to <code>[0, 0, distance]</code> the object disappears. Any idea why this happens?</p>

CC BY-SA 4.0
2023-06-23T07:41:38.263Z
Use a delta like `0.001` in either the X or the Y component of the `cameraposition`. It disappears because you set `up` vector to the Z axis. When the `lookat` function tries to compute the X axis it'll turn out to be 0. Look how lookAt computes the axes
gallickgunner
<webgl><camera><javascript>
Position a 3D camera directly above or below the target
Candleout
# Position a 3D camera directly above or below the target

(Asked by: username_0 on 2023-06-22)

I'm trying to setup a 3D camera in WebGL. The camera is setup with the help of a lookAt function. The lookAt function takes `cameraTarget`, `cameraPosition` and `up` as as inputs.

The code can be found here: <https://codepen.io/username_0/pen/poxMLPB> If the scene looks empty you load the CodePen, simply run the code again.

[![axes](https://i.sstatic.net/XMCAq.png)](https://i.sstatic.net/XMCAq.png)

How can I position the camera straightly above or below the target?

In the scene, Z (blue) is the vertical axis, while X (red) and Y (green) represents the horizontal plane. I have tried putting the object at `[0, 0, 0]` and giving the camera a position of `[0, 0, distance]`. With a `cameraTarget` of `[0, 0, 0]` (same as the object) I was expecting this would give me a top-down view of the object. However, if I set the camera position to `[0, 0, distance]` the object disappears. Any idea why this happens?

**Tags:** webgl, camera, javascript

> **Comments:**
> **username_1**: Use a delta like `0.001` in either the X or the Y component of the `cameraposition`. It disappears because you set `up` vector to the Z axis. When the `lookat` function tries to compute the X axis it'll turn out to be 0. Look how lookAt computes the axes  

---

## 1 answers

### Answer by username_2 on 2023-06-23. Score: 1 | Accepted answer

This can be because of multiple reasons:

first as @username_1 said, the up vector which is passed to the `lookAt` function should not be alligned to the view direction! Here you need to pass in the up direction of the camera (not the world). So when having a top down view, up shoud be a vector within the plane x/y.

The next thing why you maybe don't see anything can be, that your object don't lie within the projection matrix near and far clipping planes.

Take a look at [OpenGL tutorial matrices](http://www.opengl-tutorial.org/beginners-tutorials/tutorial-3-matrices/).

> **Comments:**
> **username_0**: Thank you @username_2 ! I didn't know the upward direction is related to the camera and not the world. Does this mean you need to define a new upward direction every time the perspective changes? Let's say you gradually rotate the camera by adding a transformation to the view matrix. The camera goes from looking straight down, as in the example, to looking straight ahead. At what point do you update the upward direction?  
> **username_2**: @username_0 I only update the upward direction when using the `lookAt` function. When applying transformations by multiplying matrices, you don't need the upward direction.  
> **username_0**: Okay! Thanks for the clarification. @username_2  

---

