Learn What Is Three.js? | Introduction to Three.js and React

At the heart of Three.js are several core concepts that form the foundation of every 3D scene you create. The first is the scene, which acts as a container for all objects, lights, and cameras in your 3D world. You can think of the scene as the stage where everything takes place.

Next is the camera, which represents the viewer’s perspective. The camera defines what part of the scene is visible, just like a camera in the real world determines what is captured in a photograph or video. By moving and adjusting the camera, you control how users experience your 3D environment.

The renderer is responsible for drawing the scene from the camera’s perspective onto the screen. In most cases, Three.js uses a WebGL renderer, which takes advantage of the user’s graphics hardware for fast, efficient rendering.

Finally, objects are the building blocks of your 3D world. These can include geometric shapes like cubes and spheres, imported 3D models, lights that illuminate the scene, and even helper objects for debugging. Each object can have its own position, rotation, and appearance, and you can add, remove, or modify objects in the scene as needed.

Together, these core concepts—scene, camera, renderer, and objects—allow you to construct, view, and interact with rich 3D environments directly in the browser.