Intro

import * as THREE from 'three';

// ===== The model =====
// Scene -> Camera -> Renderer
// Add Meshes (geometry + material) to the scene.
// Each frame: renderer.render(scene, camera).

// ===== Hello, cube =====
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x202428);

const camera = new THREE.PerspectiveCamera(
  60, window.innerWidth / window.innerHeight, 0.1, 1000
);
camera.position.set(3, 3, 5);
camera.lookAt(0, 0, 0);

const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

const cube = new THREE.Mesh(
  new THREE.BoxGeometry(1, 1, 1),
  new THREE.MeshStandardMaterial({ color: 0x4488ff })
);
scene.add(cube);

scene.add(new THREE.AmbientLight(0xffffff, 0.4));
const dir = new THREE.DirectionalLight(0xffffff, 1);
dir.position.set(5, 5, 5);
scene.add(dir);

renderer.setAnimationLoop(() => {
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;
  renderer.render(scene, camera);
});

// ===== Key building blocks =====
// Cameras:     PerspectiveCamera (most), OrthographicCamera (UI/2D-ish)
// Geometries:  Box, Sphere, Plane, Cylinder, ConeGeometry, BufferGeometry (custom)
// Materials:   MeshBasic (no light), MeshStandard (PBR), MeshPhysical (advanced), Line/PointsMaterial
// Lights:      Ambient, Directional, Point, Spot, Hemisphere
// Loaders:     GLTFLoader, OBJLoader, TextureLoader

// ===== Controls =====
// OrbitControls for camera drag/zoom:
//   import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
//   const controls = new OrbitControls(camera, renderer.domElement);

// ===== When three.js wins =====
// - Product configurators, data viz, marketing experiences
// - Game prototypes
// - Anywhere WebGL fits and writing raw GLSL is overkill

// ===== When three.js hurts =====
// - Mobile devices with strict perf budgets (watch poly count + texture sizes)
// - Complex game logic (consider Babylon.js or a real engine)
// - Apps that need 100% SSR (three needs canvas / WebGL)

// ===== Patterns to internalise =====
// - One renderer, attached to the canvas once
// - Reuse geometries/materials across instances
// - Dispose() geometries, materials, textures on unmount
// - Use setAnimationLoop, not setInterval / setTimeout

// ===== Pitfalls =====
// - Memory leaks from not disposing GL resources on route change
// - Adding lots of unique geometries (poor draw call batching)
// - Antialiasing on integrated GPUs at high DPR -> heavy
// - Mixing units (mm/cm/m) in a single scene -> physics + camera get weird

// Three.js wraps WebGL with a Scene -> Camera -> Renderer pipeline.
// Add Meshes (Geometry + Material) to the Scene.