Three.js3D GraphicsWebGLTutorial
Introduction to Three.js: Creating 3D Web Experiences
November 09, 2025
# Introduction to Three.js: Creating 3D Web Experiences
Three.js is a powerful JavaScript library for creating 3D graphics in the browser. In this tutorial, we'll cover the basics and create your first 3D scene.
## What is Three.js?
Three.js is a cross-browser JavaScript library and API used to create and display animated 3D computer graphics in a web browser using WebGL.
## Core Concepts
### Scene
The scene is the container for all 3D objects, lights, and cameras.
### Camera
The camera defines the viewpoint from which the scene is rendered.
### Renderer
The renderer draws the scene from the camera's perspective.
## Basic Example
```javascript
import * as THREE from 'three';
// Create scene
const scene = new THREE.Scene();
// Create camera
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
// Create renderer
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// Create cube
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
camera.position.z = 5;
// Animation loop
function animate() {
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
}
animate();
```
## Getting Started
1. Install Three.js: `npm install three`
2. Import the library
3. Create a scene, camera, and renderer
4. Add objects to your scene
5. Animate your scene
## Conclusion
Three.js opens up a world of possibilities for creating immersive web experiences. Start experimenting and see what you can create!