“This is the 13th day of my participation in the First Challenge 2022. For details: First Challenge 2022”

Before we explained the camera parameters, but also the actual application of the camera, this time we through a more vivid model show, to illustrate the relationship between the camera up, position, lookAt.

We will use the online editor threejs.org/editor/, or we can download the source code and start the Editor service locally to use it.

  • Common camera parameters:
    • Postion: camera position, default is (0,0,0)
    • Up: camera orientation, default (0,1,0), can be understood as which axis is up, shutter direction
    • LookAt: The direction of the camera’s focus. Default is the negative half of the Z axis

Import the OBJ model into the editor

  • We use thethreejs.org/editor/Import a camera model to illustrate their relationship
    • Camera model 1701200748_12359.obj.zip
  • Unzip our model package and go to File -> Import to import the resource

Select all resources to importAfter we import, the model is black and too big, we need to add lighting and scale the model 0.1 times

  • Select our model file and scale it 0.1 times

  • Add two SpotLight spotlights and reposition them to shine on the model

  • So our camera model is basically displayed

Camera position

We can adjust the position of the camera by dragging the center axis of the camera. This is equivalent to the position of the camera we created, which is currently placed at (0,0,0)However, at this time, we do not have to decide whether the camera is up or down, we need to decide by the direction of the shutter

  • Figure 1

  • Figure 2

Let’s first set the up direction to the direction shown in figure 1, i.e. (0,1,0).

  • LookAt is the direction of the focus and the direction in which we are looking at a point, assuming we are looking at (2,0,0), the up direction remains the same
  • LookAt can also be understood as the rotation of the camera to that position

In general, position, up and lookAt are used to determine the unique position and specific orientation of the camera in our 3D scene. Note:

  • The relationship between up and lookAt must be vertical. If it is not vertical, WebGL cannot handle the work of the camera
  • The up property is valid only when set before camera.lookAt

conclusion

In this section, we mainly talk about the following contents:

  • Import the OBJ model using threejs online Editor
  • Explain camera position, up and lookAt