CORE FOUNDATION

 Every Three.js app is built on three core components:

• Scene → where everything exists
• Camera → how you view the scene
• Renderer → how it gets displayed on screen

import * as THREE from 'three';

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

1️⃣ Import Three.js

import * as THREE from 'three';

👉 You are importing the Three.js library so you can use it.

2️⃣ Create Scene

const scene = new THREE.Scene();

👉 Think of scene = empty stage

• This is where you will add:
• objects (cube, sphere)
• lights
• models

3️⃣ Create Camera

const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);

👉 Think of camera = your eyes

This camera decides what part of the scene you see

Parameters:

• 75 → Field of View (how wide you see)
• window.innerWidth / window.innerHeight → screen ratio
• 0.1 → near (closest visible distance)
• 1000 → far (farthest visible distance)

💡 Simple meaning:

"Show everything between 0.1 and 1000 units from camera"

4️⃣ Create Renderer

const renderer = new THREE.WebGLRenderer();

👉 Think of renderer = painter

• It takes your scene + camera
• Draws it using WebGL (GPU)

5️⃣ Set Size

renderer.setSize(window.innerWidth, window.innerHeight);

👉 This makes the canvas fill the screen

6️⃣ Add to HTML

document.body.appendChild(renderer.domElement);

👉 This adds the 3D canvas into your webpage

• renderer.domElement = actual <canvas> element

Add this at the end:

renderer.render(scene, camera);