# 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)
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://www.anandisheladiya.com/skills-and-experience/frontend/three.js-the-javascript-library-for-3d-graphics.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.