PREREQUISITES
PREREQUISITES
Before you jump into Three.js, you need a strong base.
👉 Three.js is just a tool without JavaScript and web basics, you won’t be able to control it.
1. HTML (Structure of your 3D app)
HTML is the skeleton of your webpage.
In Three.js, HTML is mainly used to:
- Create a container (like
<div>or<canvas>) - Load your JavaScript file
- Add UI elements (buttons, text, etc.)
Example:
<body> <canvas id="webgl"></canvas> </body>
👉 Three.js renders everything inside this <canvas>.
2. CSS (Styling your 3D scene container)
CSS controls how your page looks and behaves.
In Three.js projects, CSS helps you:
- Make canvas fullscreen
- Position UI elements over 3D (like buttons, menus)
- Handle responsiveness
Example:
body {
margin: 0;
overflow: hidden;
}
canvas {
display: block;
}
👉 Without CSS, your 3D scene may look broken or misaligned.
3. JavaScript (CORE — Most Important)
👉 This is the heart of Three.js.
Since Three.js is a JavaScript library, you MUST understand JS basics.
Key Concepts You Need:
✅ Variables
Store data
let speed = 5;
const
Cannot reassign.
const age = 20;
✅ Arrays
Store multiple values
let colors = ["red", "blue", "green"];
✅ Objects
Store structured data (VERY important for 3D)
let cube = {
width: 1,
height: 1,
depth: 1
};
✅ Functions
Reusable logic
function rotate() {
console.log("rotating...");
}
✅ Events
React to user actions
window.addEventListener("click", () => {
console.log("Clicked!");
});
✅ DOM (Document Object Model)
Interact with HTML
const canvas = document.getElementById("webgl");
👉 Three.js uses ALL of these heavily.
4. Basic Math
Coordinates (Positioning in 3D)
- X → left/right
- Y → up/down
- Z → forward/back
👉 Example:
mesh.position.set(1, 2, 3);
📏 Vectors
Used to represent:
- Position
- Direction
- Movement
👉 Example:
let direction = { x: 1, y: 0, z: 0 };
🔄 Angles & Rotation
Used to rotate objects
👉 Example:
mesh.rotation.y = Math.PI; // 180°