All articles

Three.js: the camera and its target

A week stuck on an obvious concept: rather than moving the camera, you move its target. A lightbulb moment for any 3D beginner.

Three.js: the camera and its target

I spent a week stuck on a concept so obvious it took me a while to grasp: the camera and its target.

Whether in real life or in a virtual reality, a camera always has a target; over time, it moves and rotates around it. An abrupt, un-transitioned change of that target gives an unpleasant experience unless it's scripted.

The obvious solution: why move the camera if it follows a target? It's more interesting to move the target. But in a scene, not every object can change position. So I asked myself: what is my camera's initial target? The center of the world? A sunbeam? 🌚

Digging into my camera's properties, I discovered the target was actually an invisible vector positioned at the center of the scene t(0, 0, 0) by default. A target I can move at will, with smooth transitions. I mention it because any 3D or js beginner can hit this kind of wall.

[object Object] — 2[object Object] — 3
Share