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/Candleout/pen/poxMLPB If the scene looks empty you load the CodePen, simply run the code again.


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?

  • $\begingroup$ 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 $\endgroup$ Jun 23, 2023 at 7:41

1 Answer 1


This can be because of multiple reasons:

first as @gallickgunner 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.

  • $\begingroup$ 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? $\endgroup$
    – Candleout
    Jun 24, 2023 at 10:06
  • $\begingroup$ @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. $\endgroup$
    – Thomas
    Jun 26, 2023 at 6:22
  • $\begingroup$ Okay! Thanks for the clarification. @Thomas $\endgroup$
    – Candleout
    Jul 3, 2023 at 21:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.