# Three.JS: The JavaScript Library for 3D Graphics
### **Introduction**
**Three.js** is a powerful **JavaScript library** used to create **3D graphics, animations, and interactive experiences** in the browser using **WebGL**. It simplifies **3D rendering** without requiring developers to write raw WebGL code, making it easier to build stunning **3D websites, games, and visualizations**.
### **Why Use Three.js?**
* **Easy to Use** – Simplifies complex WebGL programming.
* **High Performance** – Uses GPU acceleration for rendering.
* **Cross-Platform** – Runs on desktops, mobile devices, and VR/AR.
* **Interactive & Animated** – Supports physics, shaders, and particle systems.
* **Massive Community** – Well-supported with many examples and plugins.
### **Installation**
You can install **Three.js** via **npm** or use a CDN.
### **Using npm (Recommended)**
```bash
npm install three
```
### Using CDN (Quick Start)
```html
```
### **Basic Three.js Scene**
A **Three.js scene** typically consists of:\
1️⃣ **Scene** – The 3D world that holds objects.\
2️⃣ **Camera** – The viewpoint for rendering the scene.\
3️⃣ **Renderer** – The engine that draws 3D objects on the screen.\
4️⃣ **Objects** – Geometries (cubes, spheres) added to the scene.
### **Example: Creating a Simple 3D Scene with a Rotating Cube**
```html
Three.js Example
```
### **Core Concepts in Three.js**
#### **1. Scene, Camera, and Renderer**
* **Scene** – The 3D world where objects exist.
* **Camera** – The "eye" that views the scene (Perspective or Orthographic).
* **Renderer** – Converts 3D objects into pixels.
#### **2. Lights**
Lighting is essential for **realistic 3D rendering**.
**Types of Lights:**
* `THREE.AmbientLight()` – General light for the entire scene.
* `THREE.PointLight()` – Light from a point source, like a bulb.
* `THREE.DirectionalLight()` – Sunlight-like lighting.
Example:
```javascript
const light = new THREE.PointLight(0xffffff, 1, 100);
light.position.set(5, 5, 5);
scene.add(light);
```
#### **3. Materials & Textures**
Materials define **how objects look** (color, reflectivity, transparency).
**Common Materials:**
* `MeshBasicMaterial` – No lighting, just color.
* `MeshStandardMaterial` – Physically based material with lighting.
* `MeshPhongMaterial` – Reflective surfaces.
Example:
```javascript
const material = new THREE.MeshStandardMaterial({ color: 0xff0000, metalness: 0.7, roughness: 0.5 });
```
Adding a Texture
```javascript
const textureLoader = new THREE.TextureLoader();
const texture = textureLoader.load("path/to/texture.jpg");
const material = new THREE.MeshBasicMaterial({ map: texture });
```
#### **4. Loading 3D Models (GLTF, OBJ, FBX)**
Three.js supports **3D models** like **GLTF, OBJ, FBX**.
**Example: Loading a GLTF Model**
```javascript
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
const loader = new GLTFLoader();
loader.load("model.gltf", (gltf) => {
scene.add(gltf.scene);
});
```
#### **5. Animations in Three.js** 🔄
Three.js supports **animations** using the **Clock & Mixer** system.
**Example: Animating a Cube**
```javascript
function animate() {
requestAnimationFrame(animate);
cube.rotation.x += 0.01; // Rotate cube
cube.rotation.y += 0.01;
renderer.render(scene, camera);
}
animate();
```
### **Advanced Features of Three.js**
* **Particle Systems** – Create **fire, smoke, rain effects**.
* **Shadows & Reflections** – Use **ray tracing & realistic lighting**.
* **Physics** – Integrate **Cannon.js** or **Ammo.js** for realistic physics.
* **Virtual Reality (VR) & Augmented Reality (AR)** – Compatible with **WebXR**.
* **Post-processing Effects** – Use **Bloom, Depth of Field, Motion Blur**.
### **Conclusion**
**Three.js** is the **best choice for web-based 3D graphics**. It allows developers to build **interactive 3D experiences, games, data visualizations, and AR/VR applications**.
### **Use Three.js if you are building:**
* 3D websites & interactive experiences
* NFT marketplaces with 3D previews
* Web-based games & simulations
* Augmented Reality (AR) & Virtual Reality (VR)