Atlaslog
Atlaslog / three.js / Tutorial / Your first scene: scene, camera and renderer
three.js · Tutorial

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.

Last verified 2026-11-03 · three.js 0.160.0 · Cite this page
Key points
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
Runnable examplesChinese originalAll Tutorials
English edition written for Atlaslog. Code is taken from the original Chinese page and runs unchanged.
Cite this page

Atlaslog (2026). Your first scene: scene, camera and renderer. https://www.jingweizhi.com/en/three/tutorials/basics.html (accessed 2026-11-03).