Your first scene: scene, camera and renderer
Quick answer
This tutorial builds the smallest runnable three.js page with a Scene, a PerspectiveCamera and a WebGLRenderer inside an importmap module script. It explains each object's role, then covers pixel ratio limits, canvas resizing, camera near and far planes and the setAnimationLoop render cycle. It also maps GIS east, north and up coordinates onto the default Y-up right-handed axes. Readers can boot a correctly scaled cube scene and diagnose a black canvas.
Key points
- Cap setPixelRatio at 2, and update camera.aspect plus updateProjectionMatrix on resize.
- Keep near and far tight around the scene to preserve depth-buffer precision.
- Drive frames with renderer.setAnimationLoop instead of setInterval or setTimeout.
Example
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
html, body { height: 100%; margin: 0; }
#stage { height: 100%; }
</style>
</head>
<body>
<div id="stage"></div>
<script type="importmap">
{
"imports": {
"three": "https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.module.js"
}
}
</script>
<script type="module">
import * as THREE from 'three';
const stage = document.getElementById('stage');
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
renderer.setSize(stage.clientWidth, stage.clientHeight);
renderer.outputColorSpace = THREE.SRGBColorSpace;
stage.appendChild(renderer.domElement);
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x0d1117);
const camera = new THREE.PerspectiveCamera(
45, stage.clientWidth / stage.clientHeight, 0.1, 100
);
camera.position.set(3, 2, 4);
camera.lookAt(0, 0, 0);
scene.add(new THREE.HemisphereLight(0xffffff, 0x223344, 1.2));
const key = new THREE.DirectionalLight(0xffffff, 2.2);
key.position.set(4, 6, 3);
scene.add(key);
const cube = new THREE.Mesh(
new THREE.BoxGeometry(1.4, 1.4, 1.4),
new THREE.MeshStandardMaterial({ color: 0x4f9ef8, roughness: 0.35 })
);
scene.add(cube);
renderer.setAnimationLoop(function () {
cube.rotation.y += 0.01;
cube.rotation.x += 0.004;
renderer.render(scene, camera);
});
</script>
</body>
</html>
Notes
- A zero-height container or a missing light leaves the canvas black with no console error.
- Calling setSize alone stretches the view until the camera aspect is also updated.
English edition written for Atlaslog. Code is taken from the original Chinese page and runs unchanged.
Atlaslog (2026). Your first scene: scene, camera and renderer. https://www.jingweizhi.com/en/three/tutorials/basics.html (accessed 2026-11-03).