Camera Setup

In a 3D game world, the camera is basically our viewpoint. It’s like the eyes of the player in the game, or a film camera in a movie set, through which we look at the 3D scene. Without a camera, even if we have a beautiful scene full of objects, we wouldn’t see anything – the camera defines what is rendered on the screen. So how does the camera work? Think of our 3D scene as a little virtual universe (we have our objects floating around in there). The camera is like a telescope pointed at this tiny universe, converting the 3D scene into the 2D image we see on our screen. We place the camera at a certain position in the world and aim it in a direction. Everything the camera “sees” in front of it gets projected and drawn on the canvas. In most games, we use a perspective camera, which mimics how our eyes work: objects farther away appear smaller, close objects appear bigger – giving a sense of depth. We typically set parameters like the field of view (how wide the camera’s lens is, e.g. a wide-angle vs. a narrow zoom), the aspect ratio (usually the aspect of the browser window so things don’t look stretched), and clipping planes (how close or far things can be and still be visible). These settings configure what the camera can see. In Three.js, a common camera is PerspectiveCamera(fov, aspect, near, far). For certain types of games (like 2D strategy games or some puzzle games), an orthographic camera might be used – that one doesn’t do the perspective foreshortening (so objects stay the same size regardless of distance). But for our purposes, we’ll likely stick to perspective because it feels more natural. The camera can also be moved or even attached to objects. For example, in a first-person game, the camera might be at the player’s eye position and moves with the player. In a third-person game, the camera might follow behind the player’s character. We control the camera to direct the player’s view. It’s an important design element – a slight change in camera angle can dramatically affect how the game feels. As we develop, we’ll experiment with camera placement and movement. Now, having a camera is one thing, but we need to allow the player to control the view or their character. That brings us to controls.