A 3D scene combines objects, a camera and a renderer. Materials and lights determine how surfaces appear. You can learn the relationships by changing one cube's rotation, camera position and illumination while keeping everything else fixed.
Open the first-scene explorer to try those changes, or download the complete source. The example bundles Three.js 0.186.0 locally with its license. It needs a browser with JavaScript modules and WebGL 2; it has no account, remote model download or automatic animation.
Change one thing and watch the result
The explorer starts with a teal cube above a grid. Rotate the cube to reveal different faces. Increase camera distance and the cube occupies less of the view. Reduce the key light and notice that softer ambient illumination still makes the cube visible. Reset restores rotation 25 degrees, distance 6 units and key-light intensity 3.
Keyboard users can Tab to the sliders and adjust them with arrow keys. A text status describes the selected values. The scene redraws on a control change or resize, making it useful for inspecting a stationary result.
Understand the scene's coordinate system
The cube is 1.5 units wide, high and deep. A box geometry is centered on its own origin, so moving its center to y = 0.75 places its bottom on the grid at y = 0. These are arbitrary world units. They become meters, centimeters or another measure only when your application consistently assigns that meaning.
| Scene part | Value in this example | What to observe |
|---|---|---|
| Cube geometry | 1.5 × 1.5 × 1.5 units | Equal edge lengths before perspective projection |
| Cube position | (0, 0.75, 0) |
Bottom rests on the ground plane |
| Rotation | Around the vertical Y axis | Visible faces change while position stays fixed |
| Perspective camera | 45-degree vertical field of view | Distant objects appear smaller |
| Clipping distances | 0.1 to 100 units | Geometry outside the camera's view volume is clipped |
The camera moves along a fixed direction from the scene origin. The distance slider sets its distance from that origin, and the camera aims at (0, 0.6, 0), near the cube's center. Camera position and camera aim are separate decisions. Changing one without checking the other is a common reason an object leaves the view.
Build the object in code
The central object setup in scene.js is:
const cube = new THREE.Mesh(
new THREE.BoxGeometry(1.5, 1.5, 1.5),
new THREE.MeshStandardMaterial({
color: 0x006b77,
roughness: 0.65
})
);
cube.position.y = 0.75;
scene.add(cube);
Geometry describes shape; material describes surface response; a mesh combines them. The example adds a directional key light and a hemisphere light. Its grid is a helper for orientation. The illustration at the top of this guide is conceptual; the explorer provides the actual rendered exercise.
Three.js's creating a scene guide explains the scene, camera and renderer setup. The supplied exercise keeps its library version pinned, so a later library update should be tested with the example before replacing the bundled files.
Run the downloaded version
Extract the source kit into a new private folder. With Python 3 installed, open a terminal inside its scene folder and run:
python -m http.server 8765 --bind 127.0.0.1
Then open http://127.0.0.1:8765/ in your browser. On Windows, py -m http.server 8765 --bind 127.0.0.1 may be the available launcher. Stop the server with Ctrl+C when finished. The local-only binding serves this exercise to your own computer.
Use the local server because opening an HTML file directly can block JavaScript module loading. Keep scene.js beside index.html and preserve the vendor directory and its license. No package installation is needed for this downloaded kit.
Keep the view responsive
The browser displays a canvas at a CSS size and draws into an internal pixel buffer. This example updates the renderer size, camera aspect ratio and projection matrix when the available area changes. It caps its device-pixel-ratio multiplier at 2 to limit rendering work on very dense displays. See the Three.js responsive design guide for the relationship between display size and drawing-buffer size.
If the cube looks stretched after a resize, check camera aspect and canvas proportions together. If the page is blank, inspect the browser console: a failed module request points to paths or server setup, while a WebGL startup failure points to browser or graphics support. The example displays a message when renderer creation fails.
Once the baseline works, add a second cube at a different X coordinate and predict which object will overlap from the existing camera position. Next, vary material roughness while holding lighting fixed. Change animation separately; the game-loop guide explains elapsed time and simulation steps before you introduce motion.