the screen (the only real thing)
center of projection + frustum
view / line of sight
teapot (drag me)
amphora (drag me)
world axes (three.js units)

Interactive 3D diagram of how three.js projects a scene onto the screen. It is a visual aid; every value it shows can be read and changed with the labelled sliders and number fields in the scene setup panel below.

// the canvas — the only real output const width = 1920, height = 1080; renderer.setSize(width, height); // the lens (projection) const camera = new THREE.PerspectiveCamera( 75, width / height, 5.2, 14); // the view (where the world sits) camera.position.set(0, 0, 5); camera.lookAt(0, 0, 0); // two independent objects teapot.position.set(-1.4, 0, -4); teapot.scale.setScalar(1); amphora.position.set(1.6, 0, -5); amphora.scale.setScalar(1); teapot.rotation.set(0, -0.35, 0); // radians amphora.rotation.set(0, 0, 0);