A scene becomes an image through a camera

First, build a mental model

A scene describes a world. A camera selects a view of it. A renderer turns that selected view into pixels. A mesh joins geometry, which describes shape, to a material, which describes how the surface is drawn. An object can exist correctly in the world and still be outside the camera's view.

1. Three.js supplies a scene graph and rendering abstractions over browser graphics. It does not automatically supply collision, player rules, input ownership or save systems. Raw WebGL exposes a lower-level drawing API; it is another implementation boundary, not a different law of geometry.
2. A perspective camera projects depth: farther objects generally occupy fewer pixels. Its field of view, aspect ratio, near plane and far plane define a viewing volume. Being between the depth planes is necessary but does not prove an object is inside the side planes.
3. Scene coordinates and drawing-buffer pixels are different spaces. Moving a mesh by one world unit is not the same as moving it by one screen pixel. A camera change alters the projection without changing the world's authoritative positions.
4. Choose a material appropriate to the investigation. MeshBasicMaterial can expose geometry and camera problems without requiring lights. A physically based material needs an appropriate lighting or environment setup to show its surface well.
5. On resize, update both the renderer's drawing size and the camera's aspect ratio, then update the projection matrix. Device pixel ratio controls drawing-buffer resolution separately from CSS size. Cap it deliberately if the visual gain exceeds the device's budget.

import * as THREE from "three";
const mount = document.getElementById("viewport");
if (!mount) throw new Error("Provide a visible #viewport element");
const width = Math.max(1, mount.clientWidth);
const height = Math.max(1, mount.clientHeight);
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(50, width / height, 0.1, 100);
camera.position.set(3, 2, 5);
camera.lookAt(0, 0, 0);
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0x44aaff });
scene.add(new THREE.Mesh(geometry, material));
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
renderer.setSize(width, height, false);
mount.appendChild(renderer.domElement);
renderer.render(scene, camera); // one drawing, not an animation loop
// The mounting owner must implement resize and eventual disposal.

1. Describe

   A unit cube is centered at the scene origin. Its material supplies a visible color without a lighting dependency.

2. Project

   The camera sits away from the origin and looks toward it. Its projection determines which part of the cube fits the rectangular view.

3. Draw

   The renderer writes a single frame to its canvas. No additional simulation or animation occurs merely because the mesh exists.