Windows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstallCrashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minuteiTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
In Three.js, a Scene organizes the objects in your 3D world, a Mesh combines an object’s shape and surface, and a Camera determines what part of that world is viewed. A Renderer then draws that view to a canvas. You need all four pieces working together to get visible pixels in a browser.
How the Three.js rendering pipeline fits together
Think of the scene as a stage, a mesh as a shaped and surfaced object, the camera as the viewpoint, and the renderer as the process that draws the view. The analogy is useful only up to a point: in code, these are distinct objects with specific jobs.
- Create a
Sceneto organize objects. - Create a mesh by combining geometry and material, then add it to the scene.
- Configure a camera to choose the view.
- Pass the scene and camera to a renderer to draw the image on its canvas.
Three.js’s fundamentals guide describes the renderer as drawing the part of the scene inside the camera’s view, or frustum, as a 2D image on a canvas. The scene is not itself the image, and adding objects to it does not draw anything.
What a Scene does
A Scene is the container and organizer for objects prepared for rendering. You can add meshes, lights, lines, and other objects to it. It can also hold scene-level settings such as a background. The scene does not decide where the viewer looks or produce pixels; those jobs belong to the camera and renderer.
#1 Best Overall
How geometry and material become a Mesh
A mesh brings together two ingredients: geometry, which defines shape, and material, which defines the surface appearance. In the introductory cube example in the Three.js manual, BoxGeometry supplies the cube’s points and faces, while MeshBasicMaterial supplies its color. Creating a Mesh from them gives the scene an object with both a shape and a surface.
A geometry by itself is not the complete visible object in this example, and a material by itself has no shape to cover. Once the mesh is added to the scene, its position, rotation, and scale can be changed as object transforms.
Rank #2
What the Camera controls
The camera determines the view of the scene: what can be seen and how it is projected into the image. In the manual’s introductory example, a PerspectiveCamera uses a field of view, aspect ratio, and near and far clipping planes.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
- Field of view: Sets how wide the perspective view is.
- Aspect ratio: Generally set to viewport width divided by viewport height. A mismatch can distort the image.
- Near and far planes: Define the depth range the camera renders. Objects closer than the near plane or farther than the far plane are excluded.
These are not the only camera settings, and the manual’s example values are not universal defaults for every project. Three.js cameras look along their local negative z-axis by default; changing the camera’s position or orientation changes its viewpoint.
What the Renderer does—and why a scene can be blank
The renderer turns the camera’s view of the scene into pixels on its output canvas. The core call is renderer.render(scene, camera). Without a render call, creating a scene, mesh, and camera does not display the result.
The official manual’s minimal example creates a scene, perspective camera, and WebGLRenderer, sets the renderer size, creates and adds a cube mesh, moves the camera along the z-axis, and renders the scene from that camera. Each step contributes something different; omitting the mesh, placing it outside the camera’s view, or never calling the renderer can leave the canvas empty.
Rank #4
For a blank result, check that the mesh was added to the same scene passed to render, that the camera can see it within its clipping range, and that the render call runs after setup. The manual example is a useful reference for the order of those steps.
Recommended Free Tools
How animation adds repeated updates
A single render produces a still image. To animate, update an object—such as changing its rotation—and render again in a loop. The manual uses renderer.setAnimationLoop(animate), with the transform update and render call inside the animation callback.
Best Value
The loop generally follows the screen’s refresh cycle, but that is not a guaranteed frame rate; browsers pause animation work when a tab is inactive. Continuous animation is optional: if a scene is static, render when its contents or view change rather than treating a loop as a requirement.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Three.js and WebGL are not the same thing
Three.js is a JavaScript library that provides a higher-level scene graph and rendering workflow over browser graphics APIs. WebGL is a browser graphics API that Three.js can use to draw. You work with concepts such as scenes, meshes, cameras, and renderers rather than building every low-level graphics operation yourself.
As stated in the Three.js WebGLRenderer documentation current on October 11, 2026, WebGLRenderer uses WebGL 2; WebGL 1 has not been supported since Three.js r163. The library provides WebGL.isWebGL2Available() to check WebGL 2 availability. Browser and release compatibility can change, so check the documentation for the Three.js version used by your project.
Getting started without adding unnecessary pieces
The conceptual example requires a local project setup and a way to serve the page; Three.js’s installation guide covers that context. Addons such as OrbitControls or GLTFLoader are available for particular tasks, but neither is required to understand or render the basic scene-camera-mesh example.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
