What a Camera Really Is

Before we get into movement, let's establish something important: camera isn't just a passive observer, it’s just another object in your 3D scene.

It has position, rotation, and direction - just like any mesh. The camera simply defines:

• Where the viewer is (position)

• What the viewer looks at (rotation/direction)

• How motion is perceived (field of view, near/far planes)

The Movie Analogy

Think of your Three.js scene like a movie set. The camera is literally the camera - it can be:

• Static (fixed on a tripod, filming one angle)

• Orbiting (on a circular track around the actors)

• Following (mounted on a dolly, tracking a character)

• First-person (handheld, the viewer IS the character)

Good camera movement makes even simple scenes feel alive and cinematic. Bad camera movement? It breaks the immersion instantly.

Static Camera: The Foundation

Let's start with the simplest approach - a camera that doesn't move at all.

When to Use It

• Demos and tutorials

• Debugging your scene

• UI-like interfaces

• Scenes where the objects move, not the viewer

Setting Up a Static Camera

import * as THREE from "three";

const canvas = document.querySelector("#canvas");

// Scene and renderer
const scene = new THREE.Scene();
const renderer = new THREE.WebGLRenderer({ canvas });
renderer.setSize(window.innerWidth, window.innerHeight);

// Create camera
const camera = new THREE.PerspectiveCamera(
    75,                                  // Field of view (degrees)
    window.innerWidth / window.innerHeight,  // Aspect ratio
    0.1,                                 // Near clipping plane
    1000                                  // Far clipping plane
);

// Position the camera
camera.position.set(0, 2, 6);  // x=0, y=2 (slightly up), z=6 (towards you)

// Make camera look at a point
camera.lookAt(0, 0, 0);  // Look at world origin

// Create a simple object to view
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshStandardMaterial({ color: 0x44aa88 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

// Add light
const light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(5, 5, 5);
scene.add(light);

// Render
function animate() {
    requestAnimationFrame(animate);

    // Rotate cube for visual interest
    cube.rotation.y += 0.01;

    renderer.render(scene, camera);
}

animate();

The Magic of lookAt()

The lookAt() method is powerful - it automatically rotates the camera so it points at a specific position. Without it, the camera might be facing the wrong direction even if positioned correctly.

camera.lookAt(0, 0, 0);  // Look at origin
camera.lookAt(cube.position);  // Look at the cube
camera.lookAt(new THREE.Vector3(5, 2, -3));  // Look at specific point

OrbitControls: User-Controlled Camera

OrbitControls is probably the most common camera system you'll use. It lets users rotate around a target point, zoom in/out, and pan - just like in 3D modeling software.

When to Use It

• Product viewers (360° product inspection)

• 3D editors and tools

• Architectural visualizations

• Any scene where users need to explore

Setting Up OrbitControls

import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";

const canvas = document.querySelector("#canvas");
const scene = new THREE.Scene();
const renderer = new THREE.WebGLRenderer({ canvas });
renderer.setSize(window.innerWidth, window.innerHeight);

// Camera
const camera = new THREE.PerspectiveCamera(
    75,
    window.innerWidth / window.innerHeight,
    0.1,
    1000
);
camera.position.set(0, 2, 6);

// Create OrbitControls
const controls = new OrbitControls(camera, renderer.domElement);

// Set what point to orbit around
controls.target.set(0, 0, 0);

// Enable smooth damping (inertia)
controls.enableDamping = true;
controls.dampingFactor = 0.05;  // Lower = more inertia

// Create scene objects
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshStandardMaterial({ color: 0x44aa88 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

const light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(5, 5, 5);
scene.add(light);

// Animation loop
function animate() {
    requestAnimationFrame(animate);

    // IMPORTANT: Update controls when damping is enabled
    controls.update();

    renderer.render(scene, camera);
}

animate();

Key Concepts

Camera Orbits Around Target, Not Itself

This is crucial to understand. The camera doesn't rotate around its own position - it rotates around the target point. Imagine the camera is on a sphere, and it moves along that sphere's surface while always looking at the center.

Damping Simulates Inertia

Without damping, the camera stops instantly when you release the mouse - feels robotic. With damping, it gradually slows down - feels natural and smooth. Don't forget to call controls.update() in your animation loop when damping is enabled!

Manual Camera Orbit: Taking Control

OrbitControls is great, but what if you want a camera that orbits automatically, or follows a specific path? Time to use some math!

When to Use It

• Automated camera animations

• Cinematic sequences

• Scripted tours

• Custom camera behaviors

Creating a Circular Orbit

let time = 0;
const radius = 6;  // How far from center

function animate() {
    requestAnimationFrame(animate);

    time += 0.01;  // Speed of rotation

    // Calculate position on a circle using sin/cos
    camera.position.x = Math.cos(time) * radius;
    camera.position.z = Math.sin(time) * radius;
    camera.position.y = 2;  // Height above ground

    // Always look at center
    camera.lookAt(0, 0, 0);

    renderer.render(scene, camera);
}

animate();

Understanding the Math

• Math.cos(time) and Math.sin(time) create circular motion

• Multiply by radius to control distance from center

• Increment time to move around the circle

• lookAt() keeps the camera pointed at the center

This is the foundation of all cinematic camera movements! You can modify this to create ellipses, figure-8 patterns, or complex paths.

Camera Follow System: Tracking Objects

Ever played a racing game where the camera follows your car? That's a follow system.

When to Use It

• Games (following the player)

• Simulations (tracking moving objects)

• Animated scenes

• Product showcases with moving elements

Basic Follow Camera

// Create a target object to follow
const targetGeometry = new THREE.SphereGeometry(0.5);
const targetMaterial = new THREE.MeshStandardMaterial({ color: 0xff0000 });
const target = new THREE.Mesh(targetGeometry, targetMaterial);
scene.add(target);

// Camera offset from target
const offset = new THREE.Vector3(0, 2, 5);  // Behind and above

function animate() {
    requestAnimationFrame(animate);

    // Move the target (simulate player movement)
    target.position.x += 0.02;

    // Camera follows target with offset
    camera.position.copy(target.position).add(offset);

    // Look at the target
    camera.lookAt(target.position);

    renderer.render(scene, camera);
}

animate();

How It Works

1. The target object moves around the scene

2. Every frame, we copy the target's position

3. Add an offset to position the camera behind/above

4. Use lookAt() to point the camera at the target

The camera is now "attached" to the target with a fixed offset.

Smooth Camera Follow: Adding Polish

The basic follow camera works, but it feels robotic - the camera snaps to follow the target instantly. Let's make it smooth!

Linear Interpolation (Lerp)

Lerp smoothly blends between two values. Instead of instantly moving to the target position, we move partway there each frame.

const offset = new THREE.Vector3(0, 2, 5);
const desiredPosition = new THREE.Vector3();

function animate() {
    requestAnimationFrame(animate);

    // Move target
    target.position.x += 0.02;

    // Calculate where camera WANTS to be
    desiredPosition.copy(target.position).add(offset);

    // Smoothly move camera toward desired position
    camera.position.lerp(desiredPosition, 0.1);

    // Look at target
    camera.lookAt(target.position);

    renderer.render(scene, camera);
}

animate();

Understanding Lerp

camera.position.lerp(desiredPosition, 0.1);

The second parameter (0.1) controls the blend:

• 0.1 = Move 10% of the way each frame (slow, heavy feel)

• 0.5 = Move 50% of the way each frame (medium)

• 0.9 = Move 90% of the way each frame (fast, snappy)

Lower values create a "camera on a spring" effect - it lags behind and smoothly catches up. This feels natural and cinematic!

First-Person Camera: Becoming the Player

In first-person games, the camera IS the player. Movement happens relative to where the camera is looking.

When to Use It

• First-person games

• Walkthroughs

• Immersive experiences

• VR applications

Basic First-Person Movement

const speed = 0.05;
const keys = {};

// Track key presses
window.addEventListener('keydown', (e) => keys[e.key] = true);
window.addEventListener('keyup', (e) => keys[e.key] = false);

function animate() {
    requestAnimationFrame(animate);

    // Move forward (in camera's local forward direction)
    if (keys['w']) {
        camera.translateZ(-speed);  // Negative Z is forward
    }

    // Move backward
    if (keys['s']) {
        camera.translateZ(speed);
    }

    // Strafe left
    if (keys['a']) {
        camera.translateX(-speed);
    }

    // Strafe right
    if (keys['d']) {
        camera.translateX(speed);
    }

    renderer.render(scene, camera);
}

animate();

Important: Local vs World Space

translateZ() and translateX() move in local space - relative to the camera's current rotation. This is perfect for first-person movement because:

• Forward is always "where the camera is looking"

• Left/right moves perpendicular to that direction

• It feels natural and intuitive

If you used world space (position.z += speed), the camera would always move in the same global direction regardless of where it's facing - very disorienting!

Common Mistakes (I Made These!)

1. Forgetting lookAt()

When manually moving the camera, you need to call lookAt() to point it at something. Otherwise, it might face the wrong direction.

// Wrong - camera might face the wrong way
camera.position.set(5, 5, 5);

// Right - camera points at target
camera.position.set(5, 5, 5);
camera.lookAt(0, 0, 0);

2. Mixing Controls and Manual Movement

Don't use OrbitControls AND manually move the camera. Pick one approach! They'll fight each other.

// Don't do this!
const controls = new OrbitControls(camera, canvas);
camera.position.x += 0.1;  // Conflicts with controls

3. Moving Camera Without Updating Target

If you manually move the camera while using OrbitControls, update the target too:

camera.position.set(10, 5, 10);
controls.target.set(0, 0, 0);
controls.update();  // Important!

4. Large Lerp Values Causing Motion Sickness

Using lerp values above 0.3 can make the camera move too quickly and feel jittery. Keep it smooth:

// Too fast - feels jarring
camera.position.lerp(target, 0.8);

// Better - smooth and natural
camera.position.lerp(target, 0.1);

When to Use Each Approach

Static Camera

• Simple demos

• Debugging

• Fixed viewpoint scenes

OrbitControls

• Product viewers

• User exploration

• 3D editors

• Most interactive scenes

Manual Orbit

• Automated rotations

• Cinematic sequences

• Custom animations

• Scripted camera paths

Follow Camera

• Games

• Tracking simulations

• Following moving objects

Smooth Follow (Lerp)

• Polished game cameras

• Professional animations

• Any time you want smooth, natural motion

First-Person

• FPS games

• Walkthroughs

• Immersive experiences

What I Learned

1. The Camera Is Just an Object

This was a lightbulb moment for me. The camera has position and rotation like everything else - there's nothing magical about it. Understanding this makes camera control much less intimidating.

2. Movement Defines Emotion

A slow, smooth camera feels calm and professional. A fast, jerky camera feels chaotic or amateurish. The way you move the camera dramatically affects how your scene is perceived.

3. Math Gives You Control

OrbitControls is convenient, but using sin/cos to calculate camera positions gives you complete creative control. Every cinematic camera movement is just math!

4. Lerp Is Your Friend

Linear interpolation smooths out almost any motion. Whether following objects or moving between positions, lerp makes everything feel more polished and professional.

5. Local Space vs World Space Matters

Understanding the difference between translateZ() (local) and position.z += (world) is crucial, especially for first-person cameras.

6. Don't Mix Control Methods

Pick one camera control approach and stick with it. Mixing OrbitControls with manual movement creates conflicts and weird behavior.

7. lookAt() Is Essential

Whenever you manually position the camera, remember to call lookAt() to point it at your subject. I can't tell you how many times I forgot this and wondered why my camera was facing the wrong direction!

Wrapping Up

Camera movement is one of those things that seems simple until you really dive into it. But once you understand that the camera is just another object, and you learn a few key techniques (static, orbit, follow, lerp), you can create any camera behavior you can imagine.

Start with static cameras to understand positioning and lookAt(). Then experiment with OrbitControls to see how interactive cameras work. Once you're comfortable, try creating a manual orbit with sin/cos. Finally, build a smooth follow camera with lerp.

The key is understanding that how you move the camera is just as important as what you're showing. Great camera work makes simple scenes feel cinematic!

Try building:

• A product viewer with OrbitControls

• An automatic turntable with manual orbit

• A simple game with a follow camera

• A first-person walkthrough

Once you master camera control, you'll see how it connects with everything else!

Happy filming! 🎥

In this post, we'll explore the three core transformations in Three.js and how they work together to bring your 3D scenes to life.

The Three Core Transformations

Every object in Three.js has three fundamental properties that define its transformation:

• Position: Where the object is located in 3D space

• Rotation: How the object is oriented or tilted

• Scale: How large or small the object appears

Think of a toy car on a table:

• Position is where you place it on the table (left, right, forward, back, up, down)

• Rotation is which direction it's facing and whether it's tilted

• Scale is like using a magnifying glass making it appear bigger or smaller

Transform Order

Three.js applies these transformations in a specific order internally:

Scale → Rotation → Position

You cannot change this order. Understanding this sequence is important because it affects how your objects behave. For example, if you scale an object after rotating it, the rotation axis itself gets scaled, which can produce unexpected results.

Position: Moving Objects in 3D Space

Position determines where an object exists in 3D space using three coordinates: X, Y, and Z.

• X axis: Left (negative) to Right (positive)

• Y axis: Down (negative) to Up (positive)

• Z axis: Into screen (negative) to Out toward you (positive)

Positioning a Mesh

import * as THREE from "three";

const canvas = document.querySelector("#canvas");

// Scene setup
const scene = new THREE.Scene();

// Camera
const camera = new THREE.PerspectiveCamera(
    75,
    window.innerWidth / window.innerHeight,
    0.1,
    1000
);
camera.position.set(0, 0, 5);

// Renderer
const renderer = new THREE.WebGLRenderer({ canvas });
renderer.setSize(window.innerWidth, window.innerHeight);

// Create a cube
const boxGeometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshStandardMaterial({
    color: 0x44aa88,
    emissive: 0x112244,
});
const cube = new THREE.Mesh(boxGeometry, material);
scene.add(cube);

// Position the cube
cube.position.set(2, 1, 0);  // x=2 (right), y=1 (up), z=0 (center)

// Or set individually
// cube.position.x = 2;
// cube.position.y = 1;
// cube.position.z = 0;

// Add lighting
const light = new THREE.DirectionalLight(0xffffff, 5);
light.position.set(5, 5, 5);
scene.add(light);

// Render
renderer.render(scene, camera);

The position property is a Vector3 object with x, y, and z components. You can set all three at once with position.set() or individually.

Rotation: Orienting Objects

Rotation determines which direction an object faces and how it's tilted. In Three.js, rotations are measured in radians, not degrees.

Quick conversion:

• 360° = 2π radians (full circle)

• 180° = π radians

• 90° = π/2 radians

Rotating a Mesh

// Rotate around each axis (in radians)
cube.rotation.x = Math.PI / 4;  // 45 degrees around X axis
cube.rotation.y = Math.PI / 2;  // 90 degrees around Y axis
cube.rotation.z = 0;            // No rotation around Z axis

// Or convert from degrees
function degreesToRadians(degrees) {
    return degrees * (Math.PI / 180);
}

cube.rotation.y = degreesToRadians(90);  // 90 degrees

Animated Rotation

function animate() {
    requestAnimationFrame(animate);

    // Increment rotation each frame for smooth animation
    cube.rotation.x += 0.01;  // Slow rotation around X
    cube.rotation.y += 0.005; // Even slower around Y

    renderer.render(scene, camera);
}

animate();

Important: When you increment rotation values in an animation loop (+=), the values accumulate every frame. This creates continuous spinning motion.

Scale: Resizing Objects

Scale controls the size of an object along each axis. A scale of 1 is the original size, 2 doubles the size, and 0.5 halves it.

Scaling a Mesh

// Scale uniformly (all axes the same)
cube.scale.set(2, 2, 2);  // Double the size

// Or scale non-uniformly (different on each axis)
cube.scale.set(1.5, 1, 0.5);  // Wider, same height, thinner

// Individual axis scaling
cube.scale.x = 1.5;  // 150% width
cube.scale.y = 1.0;  // Original height
cube.scale.z = 0.5;  // 50% depth

Non-uniform scaling (different values on different axes) is useful for creating stretched or squashed effects, like making a sphere into an egg shape.

Complete Basic Example

Here's a complete example demonstrating all three transformations:

import * as THREE from "three";

const canvas = document.querySelector("#canvas");

// Scene
const scene = new THREE.Scene();

// Camera
const camera = new THREE.PerspectiveCamera(
    75,
    window.innerWidth / window.innerHeight,
    0.1,
    1000
);
camera.position.set(0, 0, 5);

// Renderer
const renderer = new THREE.WebGLRenderer({ canvas });
renderer.setSize(window.innerWidth, window.innerHeight);

// Lighting
const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(ambientLight);

const light = new THREE.DirectionalLight(0xffffff, 5);
light.position.set(5, 5, 5);
scene.add(light);

// Geometry and material
const boxGeometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshStandardMaterial({
    color: 0x44aa88,
    emissive: 0x112244,
});

// Create mesh
const cube = new THREE.Mesh(boxGeometry, material);
scene.add(cube);

// Apply transformations
cube.position.set(2, 1, 0);      // Position: right and up
cube.scale.set(1.5, 1, 0.5);     // Scale: wider and thinner
cube.rotation.x = Math.PI / 4;   // Initial rotation

// Animation loop
function animate() {
    requestAnimationFrame(animate);

    // Animate rotation
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.005;

    renderer.render(scene, camera);
}

animate();

// Handle resize
window.addEventListener("resize", () => {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
});

Local Space vs World Space

One of the most important concepts in 3D graphics is understanding the difference between local and world space.

• Local Space: Coordinates relative to the object itself

• World Space: Coordinates relative to the entire scene

The Concept

Imagine you're sitting in a moving car. If you move your hand 1 foot to the right (in the car), that movement is in local space - relative to the car. But the car itself is moving down the road in world space. Your hand's actual position in the world is the combination of both movements.

Parent-Child Relationships

When you add an object as a child of another object, the child's transformations become relative to its parent.

// Parent cube (red)
const parent = new THREE.Mesh(
    new THREE.BoxGeometry(1, 1, 1),
    new THREE.MeshStandardMaterial({ color: 0xff0000 })
);
scene.add(parent);

// Child cube (blue)
const child = new THREE.Mesh(
    new THREE.BoxGeometry(0.5, 0.5, 0.5),
    new THREE.MeshStandardMaterial({ color: 0x0000ff })
);

// Add child to parent (not to scene!)
parent.add(child);

// Child position is relative to parent
child.position.x = 2;  // 2 units to the right of parent

// Move parent in world space
parent.position.x = -2;  // 2 units to the left in world

// Animate
function animate() {
    requestAnimationFrame(animate);

    // Rotate parent - child rotates with it!
    parent.rotation.y += 0.01;

    renderer.render(scene, camera);
}

animate();

What's Happening

• The blue cube is 2 units to the right of the red cube (local space)

• The red cube is at position (-2, 0, 0) in world space

• The blue cube's world position is automatically calculated as (0, 0, 0)

• When the parent rotates, the child rotates around the parent's center

Getting World Position

Sometimes you need to know an object's actual position in world space:

const worldPosition = new THREE.Vector3();
child.getWorldPosition(worldPosition);
console.log(worldPosition);  // Actual position in world space

This is useful for collision detection, distance calculations, or positioning effects relative to world coordinates.

Groups: Organizing Multiple Objects

Groups allow you to treat multiple objects as a single unit. This is essential for building complex scenes with logical hierarchies.

Why Use Groups?

• Organize related objects (like parts of a character or vehicle)

• Transform multiple objects together

• Create hierarchical structures (solar systems, robots, etc.)

• Simplify scene management

Creating and Using Groups

// Create a group
const group = new THREE.Group();
scene.add(group);

// Create first cube (green)
const cube1 = new THREE.Mesh(
    new THREE.BoxGeometry(1, 1, 1),
    new THREE.MeshStandardMaterial({ color: 0x00ff00 })
);
cube1.position.x = -2;  // Position relative to group
group.add(cube1);

// Create second cube (blue)
const cube2 = new THREE.Mesh(
    new THREE.BoxGeometry(1, 1, 1),
    new THREE.MeshStandardMaterial({ color: 0x0000ff })
);
cube2.position.x = 2;  // Position relative to group
group.add(cube2);

// Transform the entire group
group.position.z = -3;  // Move both cubes back
group.rotation.y = Math.PI / 4;  // Rotate both cubes

// Animate
function animate() {
    requestAnimationFrame(animate);

    // Rotating the group rotates both cubes around the group's center
    group.rotation.y += 0.01;

    renderer.render(scene, camera);
}

animate();

Hierarchical Transformation

The power of groups comes from hierarchical transformations:

1. Child transforms happen first - Each cube maintains its local position

2. Parent transforms apply afterward - The group's rotation affects both cubes

3. The result is combined - Both cubes rotate around the group's center while maintaining their spacing

This is how complex objects like characters, vehicles, and mechanical systems are built. For example, a car might have:

• Car body (group)

  • Wheels (children of body)

    • Hubcaps (children of wheels)

When the car moves, everything moves. When a wheel rotates, only that wheel and its hubcap rotate.

When to Use Each Technique

Direct Transformations (position, rotation, scale):

• Simple animations

• Independent objects

• Single mesh manipulation

Parent-Child Relationships:

• Objects that move together

• One object attached to another

• Hierarchical structures

Groups:

• Multiple related objects

• Complex scenes with many parts

• Logical organization of scene elements

What I Learned

1. Transformations Are Always Relative

Position, rotation, and scale are relative to an object's parent (or the scene if it has no parent). This makes hierarchical structures powerful but requires understanding the coordinate system.

2. Transform Order Matters

Three.js applies transforms in a fixed order: scale → rotation → position. You can't change this, so plan your transformations accordingly.

3. Radians, Not Degrees

Rotation uses radians. Remember: Math.PI is 180°, Math.PI * 2 is 360°. Converting from degrees: degrees * (Math.PI / 180).

4. Local vs World Space Is Fundamental

Understanding the difference between local and world space is crucial for complex scenes. Use getWorldPosition() when you need absolute coordinates.

5. Groups Simplify Complex Scenes

Instead of manually calculating relative positions for multiple objects, use groups to create logical hierarchies. This makes your code cleaner and more maintainable.

6. Accumulating Transforms Creates Animation

Using += on rotation or position values in an animation loop creates continuous movement. Using = sets absolute values.

7. Non-Uniform Scaling Is Powerful

Scaling different amounts on different axes creates interesting effects. A sphere scaled as (1, 2, 1) becomes an egg shape.

Wrapping Up

Transformations are the building blocks of all 3D movement and animation. Mastering position, rotation, and scale - along with understanding local vs world space and hierarchical transformations - gives you complete control over your 3D scenes.

Start with simple transformations on individual objects, then experiment with parent-child relationships and groups. Try building a simple solar system (sun with orbiting planets) or a simple character (body with rotating arms) to practice these concepts.

The key is understanding how transforms combine and propagate through hierarchies. Once this clicks, you can build complex, animated 3D structures with ease.

Keep experimenting!

Good lighting can make or break your 3D scene. It's the difference between a flat, lifeless render and a vibrant, realistic world. Let's explore how to light our scenes like a professional photographer!

What is Lighting in Three.js?

Lighting in Three.js simulates how light behaves in the real world. Different light types mimic different real-world light sources:

• Sun (DirectionalLight)

• Light bulbs (PointLight)

• Flashlights (SpotLight)

• Sky lighting (HemisphereLight)

• Overall brightness (AmbientLight)

Understanding when and how to use each light type is key to creating the mood and atmosphere you want.

The Photography Analogy

Think of Three.js lighting is like setting up a photography or film studio:

• Key Light (main light source) - DirectionalLight or SpotLight

• Fill Light (softens shadows) - AmbientLight or HemisphereLight

• Rim/Back Light (separates subject from background) - PointLight or SpotLight

• Practical Lights (visible light sources) - PointLight with visible geometry

Just like in photography, you rarely use just one light. The magic happens when you combine multiple lights!

Project Setup

Here's our HTML structure with controls:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Three.js Lighting Guide</title>
    <style>
        body { 
            margin: 0; 
            overflow: hidden;
            font-family: Arial, sans-serif;
        }
        canvas { 
            display: block; 
        }
        #controls {
            position: absolute;
            top: 20px;
            right: 20px;
            color: white;
            background: rgba(0, 0, 0, 0.85);
            padding: 20px;
            border-radius: 8px;
            font-size: 13px;
            max-width: 280px;
            max-height: 90vh;
            overflow-y: auto;
        }
        #controls h3 {
            margin-top: 0;
            color: #4ecdc4;
            font-size: 16px;
        }
        .light-section {
            margin: 15px 0;
            padding: 10px;
            background: rgba(255, 255, 255, 0.05);
            border-radius: 4px;
        }
        .light-section h4 {
            margin: 0 0 10px 0;
            color: #ffe66d;
            font-size: 14px;
        }
        .control-group {
            margin: 8px 0;
        }
        .control-group label {
            display: block;
            margin-bottom: 3px;
            color: #aaa;
            font-size: 11px;
        }
        input[type="range"] {
            width: 100%;
        }
        input[type="checkbox"] {
            margin-right: 5px;
        }
        .toggle-label {
            display: flex;
            align-items: center;
            cursor: pointer;
        }
        #info {
            position: absolute;
            top: 20px;
            left: 20px;
            color: white;
            background: rgba(0, 0, 0, 0.85);
            padding: 15px;
            border-radius: 8px;
            font-size: 13px;
            max-width: 250px;
        }
        #info h3 {
            margin-top: 0;
            color: #4ecdc4;
        }
    </style>
</head>
<body>
    <canvas id="canvas"></canvas>

    <div id="info">
        <h3>Lighting Demo</h3>
        <p>Toggle different lights to see how they affect the scene. Light helpers show light positions.</p>
    </div>

    <div id="controls">
        <h3>Light Controls</h3>

        <div class="light-section">
            <h4>Ambient Light</h4>
            <div class="control-group">
                <label class="toggle-label">
                    <input type="checkbox" id="ambientToggle" checked>
                    Enable
                </label>
            </div>
            <div class="control-group">
                <label>Intensity: <span id="ambientIntensity">0.3</span></label>
                <input type="range" id="ambientSlider" min="0" max="1" step="0.1" value="0.3">
            </div>
        </div>

        <div class="light-section">
            <h4>Directional Light</h4>
            <div class="control-group">
                <label class="toggle-label">
                    <input type="checkbox" id="directionalToggle" checked>
                    Enable
                </label>
            </div>
            <div class="control-group">
                <label>Intensity: <span id="directionalIntensity">1.0</span></label>
                <input type="range" id="directionalSlider" min="0" max="2" step="0.1" value="1">
            </div>
        </div>

        <div class="light-section">
            <h4>Point Light</h4>
            <div class="control-group">
                <label class="toggle-label">
                    <input type="checkbox" id="pointToggle" checked>
                    Enable
                </label>
            </div>
            <div class="control-group">
                <label>Intensity: <span id="pointIntensity">1.0</span></label>
                <input type="range" id="pointSlider" min="0" max="2" step="0.1" value="1">
            </div>
        </div>

        <div class="light-section">
            <h4>Spot Light</h4>
            <div class="control-group">
                <label class="toggle-label">
                    <input type="checkbox" id="spotToggle" checked>
                    Enable
                </label>
            </div>
            <div class="control-group">
                <label>Intensity: <span id="spotIntensity">1.0</span></label>
                <input type="range" id="spotSlider" min="0" max="2" step="0.1" value="1">
            </div>
            <div class="control-group">
                <label>Angle: <span id="spotAngle">0.5</span></label>
                <input type="range" id="spotAngleSlider" min="0" max="1.57" step="0.1" value="0.5">
            </div>
        </div>

        <div class="light-section">
            <h4>Hemisphere Light</h4>
            <div class="control-group">
                <label class="toggle-label">
                    <input type="checkbox" id="hemisphereToggle">
                    Enable
                </label>
            </div>
            <div class="control-group">
                <label>Intensity: <span id="hemisphereIntensity">0.5</span></label>
                <input type="range" id="hemisphereSlider" min="0" max="1" step="0.1" value="0.5">
            </div>
        </div>

        <div class="light-section">
            <h4>Helpers</h4>
            <div class="control-group">
                <label class="toggle-label">
                    <input type="checkbox" id="helpersToggle" checked>
                    Show Light Helpers
                </label>
            </div>
        </div>
    </div>

    <script type="module" src="/src/lighting.js"></script>
</body>
</html>

Building Our Lighting Scene

Let's create a scene that demonstrates most used light types!

Step 1: Scene and Camera Setup

import * as THREE from "three";

const canvas = document.getElementById("canvas");

// Scene setup
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x0a0a0a); // Very dark background

// Camera setup
const camera = new THREE.PerspectiveCamera(
    75,
    window.innerWidth / window.innerHeight,
    0.1,
    1000
);
camera.position.set(0, 8, 20);
camera.lookAt(0, 0, 0);

Step 2: Creating Scene Objects

Let's create a simple scene with objects that will show off the lighting:

// Create a ground plane
const groundGeometry = new THREE.PlaneGeometry(50, 50);
const groundMaterial = new THREE.MeshStandardMaterial({
  color: 0x333333,
  roughness: 0.8,
  metalness: 0.2,
});
const ground = new THREE.Mesh(groundGeometry, groundMaterial);
ground.rotation.x = -Math.PI / 2; // Rotate to be horizontal
ground.position.y = -2;
scene.add(ground);

// Create center sphere
const sphereGeometry = new THREE.SphereGeometry(2, 64, 64);
const sphereMaterial = new THREE.MeshStandardMaterial({
  color: 0xffffff,
  roughness: 0.3,
  metalness: 0.7,
});
const sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
sphere.position.set(0, 0, 0);
scene.add(sphere);

// Create surrounding cubes to show light distribution
const cubeGeometry = new THREE.BoxGeometry(1.5, 1.5, 1.5);
const cubeMaterial = new THREE.MeshStandardMaterial({
  color: 0x4ecdc4,
  roughness: 0.5,
  metalness: 0.3,
});

const cubes = [];
const cubePositions = [
  [-6, -0.5, 0], // Left
  [6, -0.5, 0], // Right
  [0, -0.5, 6], // Front
];

cubePositions.forEach((pos) => {
  const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
  cube.position.set(pos[0], pos[1], pos[2]);
  cubes.push(cube);
  scene.add(cube);
});

// Add a torus for variety
const torusGeometry = new THREE.TorusGeometry(1.5, 0.5, 16, 100);
const torusMaterial = new THREE.MeshStandardMaterial({
  color: 0xff6b6b,
  roughness: 0.4,
  metalness: 0.6,
});
const torus = new THREE.Mesh(torusGeometry, torusMaterial);
torus.position.set(0, 5, 0);
scene.add(torus);

Step 3: Creating All Light Types

Now let's create each of the six light types with their helpers!

// ============================================
// 1. AMBIENT LIGHT
// Provides overall base illumination, no direction
// Does not cast shadows
// Use case: Base lighting so nothing is completely black.
// Never use alone, combine with directional lights.
// Performance: Very cheap, no calculations needed.

// No helper for ambient light (it's everywhere equally)
// ============================================
const ambientLight = new THREE.AmbientLight(
  0xffffff, // White light
  0.3 // Low intensity
);
scene.add(ambientLight);

// ============================================
// 2. DIRECTIONAL LIGHT
// Parallel rays like sunlight, illuminates from a direction
// Use case: Outdoor scenes (sun/moon), main key light.
// All rays are parallel regardless of distance.
// Performance: Cheap, good for primary light source.
// ============================================
const directionalLight = new THREE.DirectionalLight(
  0xffffff, // White light
  1.0 // Full intensity
);
directionalLight.position.set(5, 10, 5);
scene.add(directionalLight);

// Helper to visualize light direction
const directionalHelper = new THREE.DirectionalLightHelper(
  directionalLight,
  2 // Helper size
);
scene.add(directionalHelper);

// ============================================
// 3. POINT LIGHT
// Radiates light in all directions from a point (like a light bulb)
// Use case: Light bulbs, lamps, candles, explosions.
// Light diminishes with distance (uses distance and decay).
// Performance: Medium cost, use sparingly for many lights.
// ============================================
const pointLight = new THREE.PointLight(
  0xff00ff, // Magenta color
  1.0, // Intensity
  50, // Distance (light fades to 0 at this distance)
  2 // Decay (how fast light fades, 2 = realistic)
);
pointLight.position.set(-8, 3, 0);
scene.add(pointLight);

// Helper to visualize light position and range
const pointHelper = new THREE.PointLightHelper(
  pointLight,
  0.5 // Helper sphere size
);
scene.add(pointHelper);

// ============================================
// 4. SPOT LIGHT
// Cone of light from a point (like a flashlight or stage light)
// Use case: Flashlights, stage spotlights, car headlights.
// Creates dramatic focused lighting with soft edges.
// Performance: Most expensive, use carefully.
// ============================================
const spotLight = new THREE.SpotLight(
  0x00ffff, // Cyan color
  1.0, // Intensity
  30, // Distance
  Math.PI / 10, // Angle (cone width in radians)
  0.5, // Penumbra (softness of edge, 0-1)
  2 // Decay
);
spotLight.position.set(-6, 10, 0);
spotLight.target.position.set(0, 0, 0); // Point at center
scene.add(spotLight);
scene.add(spotLight.target); // Target must be in scene

// Helper to visualize cone
const spotHelper = new THREE.SpotLightHelper(spotLight);
scene.add(spotHelper);

// ============================================
// 5. HEMISPHERE LIGHT
// Sky/ground ambient lighting (different colors from top/bottom)
// Use case: Outdoor scenes with sky lighting, subtle ambient variation.
// Creates natural-looking ambient from above (sky) and below (ground bounce).
// Performance: Cheap, great alternative to plain ambient light.
// ============================================
const hemisphereLight = new THREE.HemisphereLight(
  0x0066ff, // Sky color (blue)
  0xff6600, // Ground color (orange)
  0.5 // Intensity
);
hemisphereLight.position.set(0, 10, 0);
scene.add(hemisphereLight);

// Helper shows sky and ground colors
const hemisphereHelper = new THREE.HemisphereLightHelper(
  hemisphereLight,
  2 // Helper size
);
scene.add(hemisphereHelper);

// Store references for toggling
const helpers = {
  directional: directionalHelper,
  point: pointHelper,
  spot: spotHelper,
  hemisphere: hemisphereHelper,
};

// Initially hide some lights to avoid overwhelming the scene
hemisphereLight.visible = false;
hemisphereHelper.visible = false;

Step 4: Interactive Controls

Let's wire up all the controls to adjust lights in real-time:

// Ambient Light Controls
const ambientToggle = document.getElementById("ambientToggle");
const ambientSlider = document.getElementById("ambientSlider");
const ambientIntensityDisplay = document.getElementById("ambientIntensity");

ambientToggle.addEventListener("change", (e) => {
  ambientLight.visible = e.target.checked;
});

ambientSlider.addEventListener("input", (e) => {
  const value = parseFloat(e.target.value);
  ambientLight.intensity = value;
  ambientIntensityDisplay.textContent = value.toFixed(1);
});

// Directional Light Controls
const directionalToggle = document.getElementById("directionalToggle");
const directionalSlider = document.getElementById("directionalSlider");
const directionalIntensityDisplay = document.getElementById(
  "directionalIntensity"
);

directionalToggle.addEventListener("change", (e) => {
  directionalLight.visible = e.target.checked;
  directionalHelper.visible = e.target.checked;
});

directionalSlider.addEventListener("input", (e) => {
  const value = parseFloat(e.target.value);
  directionalLight.intensity = value;
  directionalIntensityDisplay.textContent = value.toFixed(1);
});

// Point Light Controls
const pointToggle = document.getElementById("pointToggle");
const pointSlider = document.getElementById("pointSlider");
const pointIntensityDisplay = document.getElementById("pointIntensity");

pointToggle.addEventListener("change", (e) => {
  pointLight.visible = e.target.checked;
  pointHelper.visible = e.target.checked;
});

pointSlider.addEventListener("input", (e) => {
  const value = parseFloat(e.target.value);
  pointLight.intensity = value;
  pointIntensityDisplay.textContent = value.toFixed(1);
});

// Spot Light Controls
const spotToggle = document.getElementById("spotToggle");
const spotSlider = document.getElementById("spotSlider");
const spotAngleSlider = document.getElementById("spotAngleSlider");
const spotIntensityDisplay = document.getElementById("spotIntensity");
const spotAngleDisplay = document.getElementById("spotAngle");

spotToggle.addEventListener("change", (e) => {
  spotLight.visible = e.target.checked;
  spotHelper.visible = e.target.checked;
});

spotSlider.addEventListener("input", (e) => {
  const value = parseFloat(e.target.value);
  spotLight.intensity = value;
  spotIntensityDisplay.textContent = value.toFixed(1);
});

spotAngleSlider.addEventListener("input", (e) => {
  const value = parseFloat(e.target.value);
  spotLight.angle = value;
  spotAngleDisplay.textContent = value.toFixed(2);
});

// Hemisphere Light Controls
const hemisphereToggle = document.getElementById("hemisphereToggle");
const hemisphereSlider = document.getElementById("hemisphereSlider");
const hemisphereIntensityDisplay = document.getElementById(
  "hemisphereIntensity"
);

hemisphereToggle.addEventListener("change", (e) => {
  hemisphereLight.visible = e.target.checked;
  hemisphereHelper.visible = e.target.checked;
});

hemisphereSlider.addEventListener("input", (e) => {
  const value = parseFloat(e.target.value);
  hemisphereLight.intensity = value;
  hemisphereIntensityDisplay.textContent = value.toFixed(1);
});

// Helpers Toggle
const helpersToggle = document.getElementById("helpersToggle");
helpersToggle.addEventListener("change", (e) => {
  const visible = e.target.checked;
  Object.values(helpers).forEach((helper) => {
    // Only show helper if its light is also visible
    const lightVisible = helper.light ? helper.light.visible : true;
    helper.visible = visible && lightVisible;
  });
});

Step 5: Renderer and Animation

// Renderer setup
const renderer = new THREE.WebGLRenderer({
  canvas: canvas,
  antialias: true,
});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);

// Animation loop
function animate() {
  requestAnimationFrame(animate);

  const time = Date.now() * 0.001;

  // Rotate center sphere
  sphere.rotation.y = time * 0.3;

  // Rotate torus
  torus.rotation.x = time * 0.5;
  torus.rotation.y = time * 0.05;

  // Gently bob cubes up and down
  cubes.forEach((cube, index) => {
    cube.position.y = -0.5 + Math.sin(time + index) * 0.3;
    cube.rotation.y = time * 0.5;
  });

  // Animate point light in a circle
  pointLight.position.x = Math.cos(time * 0.5) * 8;
  pointLight.position.z = Math.sin(time * 0.5) * 8;

  // Update helpers
  if (spotHelper.visible) spotHelper.update();
  if (directionalHelper.visible) directionalHelper.update();

  renderer.render(scene, camera);
}

animate();

// Handle window resize
window.addEventListener("resize", () => {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
});

Understanding Light Properties

Common Properties (Most Lights)

Colour - The colour of the light

light.color = new THREE.Color(0xff0000); // Red light

intensity - How bright the light is

light.intensity = 1.5; // 150% brightness

Distance-Based Properties (Point & Spot Lights)

distance - Maximum range of the light (0 = infinite)

pointLight.distance = 50; // Light fades to 0 at 50 units

decay - How quickly light diminishes with distance

pointLight.decay = 2; // Physically accurate (inverse square law)
// 1 = linear falloff
// 2 = realistic falloff (default)

Spot Light Specific

angle - Width of the light cone (in radians)

spotLight.angle = Math.PI / 6; // 30 degrees

penumbra - Softness of the cone edge (0-1)

spotLight.penumbra = 0.5; // 50% soft edge
// 0 = hard edge
// 1 = very soft edge

target - What the spotlight points at

spotLight.target.position.set(0, 0, 0);
scene.add(spotLight.target); // Must add target to scene!

Hemisphere Light Specific

groundColor - Colour of light from below

hemisphereLight.groundColor = new THREE.Color(0x080820);

When to Use Each Light Type

AmbientLight

Performance: ⚡⚡⚡⚡⚡ (Cheapest)
When to use:

• Base lighting, so objects aren't completely black

• Fill light to soften harsh shadows

• Quick prototyping before adding complex lighting

Best practices:

• Keep intensity low (0.2-0.4)

• Never use as the only light source

• Combine with directional lights

Real-world equivalent: Overcast day, diffused light everywhere

DirectionalLight

Performance: ⚡⚡⚡⚡ (Very Cheap)
When to use:

• Outdoor scenes (sun or moon)

• Main key light in any scene

• When you need parallel light rays

Best practices:

• Position far from scene center

• Use as primary light source

• Great for casting consistent shadows

Real-world equivalent: Sunlight, moonlight

PointLight

Performance: ⚡⚡⚡ (Medium)
When to use:

• Light bulbs, lamps, candles

• Explosions or fire effects

• Small localized light sources

Best practices:

• Set appropriate distance and decay

• Don't use too many (expensive with many)

• Great for accent lighting

Real-world equivalent: Light bulb, candle, torch

SpotLight

Performance: ⚡⚡ (Expensive)
When to use:

• Flashlights, car headlights

• Stage lighting, theatrical effects

• Drawing attention to specific objects

Best practices:

• Use sparingly (most expensive)

• Adjust angle and penumbra for desired effect

• Remember to add target to scene

Real-world equivalent: Flashlight, stage spotlight, car headlight

HemisphereLight

Performance: ⚡⚡⚡⚡ (Cheap)
When to use:

• Outdoor scenes with sky

• Natural-looking ambient lighting

• When you want colour variation (sky vs ground)

Best practices:

• Better than plain Ambient Light for realism

• Use sky and ground colours that make sense

• Great for outdoor environments

Real-world equivalent: Natural sky lighting with ground bounce

RectAreaLight

Performance: ⚡ (Most Expensive)
When to use:

• Windows or doors letting in light

• TV screens, monitors, LED panels

• Soft box photography lighting

• When you need realistic area lighting

Best practices:

• Only works with Standard/Physical materials!

• Use very sparingly (heavy performance cost)

• Great for hero objects or key scenes

Real-world equivalent: Window, LED panel, soft box light

Performance Tips and Light Combinations

Performance Hierarchy (Cheapest to Most Expensive)

1. AmbientLight / HemisphereLight - No calculations

2. DirectionalLight - Simple directional calculations

3. PointLight - Distance-based calculations

4. SpotLight - Cone + distance calculations

5. RectAreaLight - Complex area calculations

Recommended Light Combinations

Basic Scene (Best Performance)

const ambient = new THREE.AmbientLight(0xffffff, 0.4);
const directional = new THREE.DirectionalLight(0xffffff, 1.0);

Outdoor Scene

const hemisphere = new THREE.HemisphereLight(0x87CEEB, 0x8B4513, 0.6);
const directional = new THREE.DirectionalLight(0xffffff, 0.8);

Indoor Scene

const ambient = new THREE.AmbientLight(0xffffff, 0.3);
const pointLight1 = new THREE.PointLight(0xffffee, 1.0, 20);
const pointLight2 = new THREE.PointLight(0xffffee, 0.8, 15);

Dramatic/Cinematic

const ambient = new THREE.AmbientLight(0xffffff, 0.2);
const spot1 = new THREE.SpotLight(0xffffff, 1.5); // Key light
const spot2 = new THREE.SpotLight(0x4444ff, 0.5); // Rim light

High-Quality Product Visualization

const ambient = new THREE.AmbientLight(0xffffff, 0.3);
const rectArea = new THREE.RectAreaLight(0xffffff, 2.0, 10, 10);
const directional = new THREE.DirectionalLight(0xffffff, 0.8);

What I Learned

1. Lighting Makes or Breaks a Scene

The same geometry and materials look entirely different under different lighting. Good lighting is often more important than complex geometry!

2. Combine Multiple Lights

Professional scenes rarely use just one light. The "three-point lighting" technique from photography (key, fill, rim) applies to 3D too!

3. Light Helpers Are Essential

Always use light helpers when setting up your scene. They show exactly where lights are positioned and what they're illuminating. Turn them off for final render.

4. Performance Matters

More lights = worse performance. Start with cheap lights (Ambient, Directional) and add expensive ones (Spot, RectArea) only where needed.

5. Distance and Decay Are Critical

For Point and Spot lights, setting appropriate distance and decay values is crucial. A decay of 2 is physically accurate and usually looks best.

6. RectAreaLight Limitations

RectAreaLight only works with MeshStandardMaterial and MeshPhysicalMaterial. If your objects look unlit, check your material type!

7. Colour Temperature Matters

Real lights have colour! Sunlight is slightly yellow (0xffffee), fluorescent lights are cooler (0xeeeeff), candlelight is warm orange (0xff8844). Adding subtle colour makes scenes more realistic.

8. Light Position Is Key

The same light at different positions creates entirely different moods. Experiment with positioning lights high, low, front, back, and sides.

9. Hemisphere Light Is Underrated

Instead of plain AmbientLight, HemisphereLight adds subtle colour variation from sky and ground that makes outdoor scenes look much more natural.

10. Start Simple, Then Add

Begin with just ambient + directional light. Once that looks good, add accent lights (point, spot) for drama and interest.

Common Lighting Recipes

Here are some lighting setups I found useful:

Sunny Day

const hemisphere = new THREE.HemisphereLight(0x87CEEB, 0x8B7355, 0.6);
const sun = new THREE.DirectionalLight(0xffffee, 1.0);
sun.position.set(10, 20, 10);

Overcast Day

const ambient = new THREE.AmbientLight(0xcccccc, 0.8);
const directional = new THREE.DirectionalLight(0xffffff, 0.3);

Night Scene with Moon

const ambient = new THREE.AmbientLight(0x111144, 0.2);
const moon = new THREE.DirectionalLight(0xaaaaff, 0.5);
moon.position.set(-10, 20, 5);

Indoor Warm Lighting

const ambient = new THREE.AmbientLight(0x332211, 0.3);
const lamp1 = new THREE.PointLight(0xffaa66, 1.0, 15, 2);
const lamp2 = new THREE.PointLight(0xffaa66, 0.8, 12, 2);

Studio/Gallery Lighting

const ambient = new THREE.AmbientLight(0xffffff, 0.4);
const key = new THREE.SpotLight(0xffffff, 1.5, 30, Math.PI/6, 0.3);
const fill = new THREE.SpotLight(0xffffff, 0.5, 25, Math.PI/4, 0.5);
const rim = new THREE.DirectionalLight(0x8888ff, 0.6);

Debugging Lighting Issues

If your scene looks wrong, check these:

Objects Are Completely Black

• Are lights added to the scene?

• Do materials need lights? (Basic doesn't, others do)

• Is ambient light intensity too low?

Lights Don't Seem to Work

• Check light visibility (light.visible = true)

• Verify light helpers are showing correct positions

• For SpotLight, did you add the target to scene?

• For RectAreaLight, are you using Standard/Physical material?

Scene Is Too Dark/Bright

• Adjust ambient light intensity (start around 0.3)

• Change directional light intensity (start around 1.0)

• Check camera exposure (some renderers support this)

Point/Spot Lights Fade Too Fast

• Increase distance property

• Check decay value (2 is realistic but you can adjust)

• Increase intensity

Next Steps

Now that I understand lighting, here's what I'm planning to explore:

• Adding shadows to lights for more realism

• Using textures on materials

• Environment maps for realistic reflections

• Post-processing effects (bloom, ambient occlusion)

• Combining great lighting with textured materials

Try experimenting with:

• Different light colour combinations

• Three-point lighting setups key (directional), fill (ambient) and rim (spot light)

• Animating light positions for dynamic effects

• Adjusting intensity to create different moods

• Combining lights to simulate real environments

Understanding lighting is a game-changer. Happy illuminating! 💡

If geometries are the shape of an object, materials are its appearance - the colour, shininess, transparency and how it reacts to light. Let's dive in!

What Are Materials?

In Three.js, materials define how the surface of a geometry looks and behaves. They control:

• Colour and appearance (matte, shiny, metallic)

• Light interaction (does it need lights to be visible?)

• Transparency (can you see through it?)

• Special effects (glowing, wireframe mode)

Different materials have different performance costs and visual capabilities. Choosing the right material is about balancing looks and performance.

Project Setup

Here's our basic HTML structure:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Three.js Materials Gallery</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
            font-family: Arial, sans-serif;
        }
        canvas {
            display: block;
        }
        #controls {
            position: absolute;
            top: 20px;
            right: 20px;
            color: white;
            background: rgba(0, 0, 0, 0.8);
            padding: 20px;
            border-radius: 8px;
            font-size: 14px;
            max-width: 300px;
        }
        #controls h3 {
            margin-top: 0;
            color: #4ecdc4;
        }
        .control-group {
            margin: 15px 0;
        }
        .control-group label {
            display: block;
            margin-bottom: 5px;
            color: #aaa;
        }
        input[type="range"] {
            width: 100%;
        }
        button {
            background: #4ecdc4;
            color: black;
            border: none;
            padding: 8px 15px;
            border-radius: 4px;
            cursor: pointer;
            margin: 5px 5px 5px 0;
            font-weight: bold;
        }
        button:hover {
            background: #45b8af;
        }
    </style>
</head>
<body>
    <canvas id="canvas"></canvas>
    <div id="controls">
        <h3>Material Properties</h3>
        <div class="control-group">
            <label>Metalness: <span id="metalnessValue">0.5</span></label>
            <input type="range" id="metalness" min="0" max="1" step="0.1" value="0.5">
        </div>
        <div class="control-group">
            <label>Roughness: <span id="roughnessValue">0.5</span></label>
            <input type="range" id="roughness" min="0" max="1" step="0.1" value="0.5">
        </div>
        <div class="control-group">
            <label>Opacity: <span id="opacityValue">1.0</span></label>
            <input type="range" id="opacity" min="0" max="1" step="0.1" value="1">
        </div>
        <div class="control-group">
            <button id="toggleWireframe">Toggle Wireframe</button>
            <button id="toggleEmissive">Toggle Glow</button>
        </div>
    </div>
    <script type="module" src="script.js"></script>
</body>
</html>

Building Our Materials Gallery

Let's create a scene with the same sphere shape using five different materials to see how they compare!

Step 1: Scene and Camera Setup

import * as THREE from "three";

const canvas = document.getElementById("canvas");

// Scene setup
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x1a1a2e); // Dark blue background

// Camera setup
const camera = new THREE.PerspectiveCamera(
    75,
    window.innerWidth / window.innerHeight,
    0.1,
    1000
);
camera.position.set(0, 0, 15); // Pull back to see all spheres
camera.lookAt(0, 0, 0);

Step 2: Lighting Setup

// Ambient light - base illumination for all objects
const ambientLight = new THREE.AmbientLight(0xffffff, 0.3);
scene.add(ambientLight);

// Directional light - main light source (like sunlight)
const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(5, 5, 5);
scene.add(directionalLight);

// Point light - adds dynamic colored lighting
const pointLight = new THREE.PointLight(0xff00ff, 1);
pointLight.position.set(-5, 3, 5);
scene.add(pointLight);

// Another point light on the opposite side
const pointLight2 = new THREE.PointLight(0x00ffff, 0.8);
pointLight2.position.set(5, -3, 5);
scene.add(pointLight2);

Step 3: Creating Materials

Now let's create our five different materials!

// ============================================
// 1. MESH BASIC MATERIAL
// Simplest material - NO lighting calculation
// ============================================
const basicMaterial = new THREE.MeshBasicMaterial({
    color: 0xff6b6b,           // Red color
    wireframe: false           // Show as solid (not wireframe)
});

// Use case: UI elements, backgrounds, objects that should
// always be visible regardless of lighting

// ============================================
// 2. MESH LAMBERT MATERIAL
// Matte (non-shiny) surfaces with lighting
// ============================================
const lambertMaterial = new THREE.MeshLambertMaterial({
    color: 0x4ecdc4,           // Cyan color
    emissive: 0x000000,        // No glow by default
    wireframe: false
});

// Use case: Matte surfaces like paper, unpolished wood,
// fabric, chalk. Good performance for non-reflective objects.

// ============================================
// 3. MESH PHONG MATERIAL
// Shiny surfaces with specular highlights
// ============================================
const phongMaterial = new THREE.MeshPhongMaterial({
    color: 0xffe66d,           // Yellow color
    shininess: 100,            // How shiny (0-100+)
    specular: 0xffffff,        // Color of the shine
    emissive: 0x000000,
    wireframe: false
});

// Use case: Plastic, polished surfaces, glossy paint.
// Creates visible light reflections (specular highlights).

// ============================================
// 4. MESH STANDARD MATERIAL
// Physically Based Rendering (PBR) - realistic materials
// ============================================
const standardMaterial = new THREE.MeshStandardMaterial({
    color: 0xa8e6cf,           // Mint green
    metalness: 0.5,            // How metallic (0 = non-metal, 1 = full metal)
    roughness: 0.5,            // Surface roughness (0 = smooth, 1 = rough)
    emissive: 0x000000,
    wireframe: false
});

// Use case: Most modern 3D applications. Provides realistic
// materials using metalness/roughness workflow. Good for
// metals, plastics, and general realistic rendering.

// ============================================
// 5. MESH PHYSICAL MATERIAL
// Advanced PBR with extra features
// ============================================
const physicalMaterial = new THREE.MeshPhysicalMaterial({
    color: 0xffa8e8,           // Pink
    metalness: 0.8,
    roughness: 0.2,
    clearcoat: 1.0,            // Clear coating layer (like car paint)
    clearcoatRoughness: 0.1,   // Roughness of the clear coat
    reflectivity: 1.0,         // How reflective
    emissive: 0x000000,
    wireframe: false
});

// Use case: Car paint, gems, high-quality materials that need
// extra realism. Most expensive performance-wise but most realistic.

Understanding Material Properties

Let me break down the key properties you'll use most often:

Common Properties (All Materials)

Colour - The base colour of the material

material.color = new THREE.Color(0xff0000); // Red

opacity - Transparency level (0 = invisible, 1 = solid)

material.transparent = true; // Must enable this first
material.opacity = 0.5; // 50% transparent

wireframe - Shows the geometry's triangle structure

material.wireframe = true; // Great for debugging!

visible - Whether the material renders at all

material.visible = false; // Hide the object

Lighting-Based Properties

emissive - Makes material glow (like it has its own light)

material.emissive = new THREE.Color(0x00ff00); // Green glow

emissiveIntensity - How strong the glow is

material.emissiveIntensity = 0.5; // 50% glow strength

PBR Properties (Standard & Physical Materials)

metalness - How metallic the surface is (0-1)

• 0 = Non-metal (plastic, wood, rubber)

• 1 = Full metal (gold, steel, copper)

roughness - How rough/smooth the surface is (0-1)

• 0 = Mirror-smooth (polished metal)

• 1 = Very rough (concrete, rough wood)

Physical Material Extras

clearcoat - Adds a glossy layer on top (like car paint)

material.clearcoat = 1.0; // Full clear coat
material.clearcoatRoughness = 0.1; // Slightly rough coating

transmission - How much light passes through (glass effect)

material.transmission = 1.0; // Fully transparent to light

Step 4: Creating Spheres with Different Materials

// Create base geometry (we'll reuse this for all spheres)
const sphereGeometry = new THREE.SphereGeometry(1.5, 64, 64);
// Using 64 segments for smooth appearance

// Create 5 spheres, each with a different material
const basicSphere = new THREE.Mesh(sphereGeometry, basicMaterial);
basicSphere.position.set(-8, 2, 0);
scene.add(basicSphere);

const lambertSphere = new THREE.Mesh(sphereGeometry, lambertMaterial);
lambertSphere.position.set(-4, 2, 0);
scene.add(lambertSphere);

const phongSphere = new THREE.Mesh(sphereGeometry, phongMaterial);
phongSphere.position.set(0, 2, 0);
scene.add(phongSphere);

const standardSphere = new THREE.Mesh(sphereGeometry, standardMaterial);
standardSphere.position.set(4, 2, 0);
scene.add(standardSphere);

const physicalSphere = new THREE.Mesh(sphereGeometry, physicalMaterial);
physicalSphere.position.set(8, 2, 0);
scene.add(physicalSphere);

// Store references for interactive controls
const spheres = [basicSphere, lambertSphere, phongSphere, standardSphere, physicalSphere];
const materials = [basicMaterial, lambertMaterial, phongMaterial, standardMaterial, physicalMaterial];

Step 5: Adding Labels

Let's add text labels so we know which material is which:

// Create text labels using canvas textures
function createTextLabel(text) {
    const canvas = document.createElement('canvas');
    const context = canvas.getContext('2d');
    canvas.width = 512;
    canvas.height = 128;

    context.fillStyle = '#000000';
    context.fillRect(0, 0, canvas.width, canvas.height);

    context.font = 'Bold 48px Arial';
    context.fillStyle = '#ffffff';
    context.textAlign = 'center';
    context.fillText(text, canvas.width / 2, canvas.height / 2 + 16);

    const texture = new THREE.CanvasTexture(canvas);
    const spriteMaterial = new THREE.SpriteMaterial({ map: texture });
    const sprite = new THREE.Sprite(spriteMaterial);
    sprite.scale.set(4, 1, 1);

    return sprite;
}

// Add labels below each sphere
const labels = [
    { text: 'Basic', position: [-8, 0, 0] },
    { text: 'Lambert', position: [-4, 0, 0] },
    { text: 'Phong', position: [0, 0, 0] },
    { text: 'Standard', position: [4, 0, 0] },
    { text: 'Physical', position: [8, 0, 0] }
];

labels.forEach(label => {
    const sprite = createTextLabel(label.text);
    sprite.position.set(label.position[0], label.position[1], label.position[2]);
    scene.add(sprite);
});

Step 6: Interactive Controls

Now let's add interactivity so we can adjust material properties in real-time!

// Get control elements
const metalnessSlider = document.getElementById('metalness');
const roughnessSlider = document.getElementById('roughness');
const opacitySlider = document.getElementById('opacity');
const wireframeBtn = document.getElementById('toggleWireframe');
const emissiveBtn = document.getElementById('toggleEmissive');

const metalnessValue = document.getElementById('metalnessValue');
const roughnessValue = document.getElementById('roughnessValue');
const opacityValue = document.getElementById('opacityValue');

// Metalness control (only affects Standard and Physical materials)
metalnessSlider.addEventListener('input', (e) => {
    const value = parseFloat(e.target.value);
    metalnessValue.textContent = value.toFixed(1);

    // Only Standard and Physical materials have metalness
    standardMaterial.metalness = value;
    physicalMaterial.metalness = value;
});

// Roughness control (only affects Standard and Physical materials)
roughnessSlider.addEventListener('input', (e) => {
    const value = parseFloat(e.target.value);
    roughnessValue.textContent = value.toFixed(1);

    standardMaterial.roughness = value;
    physicalMaterial.roughness = value;
});

// Opacity control (affects all materials)
opacitySlider.addEventListener('input', (e) => {
    const value = parseFloat(e.target.value);
    opacityValue.textContent = value.toFixed(1);

    // Enable transparency and set opacity for all materials
    materials.forEach(material => {
        material.transparent = value < 1.0;
        material.opacity = value;
    });
});

// Wireframe toggle
let wireframeEnabled = false;
wireframeBtn.addEventListener('click', () => {
    wireframeEnabled = !wireframeEnabled;
    materials.forEach(material => {
        material.wireframe = wireframeEnabled;
    });
});

// Emissive (glow) toggle
let emissiveEnabled = false;
emissiveBtn.addEventListener('click', () => {
    emissiveEnabled = !emissiveEnabled;

    // Basic material doesn't have emissive property
    lambertMaterial.emissive.setHex(emissiveEnabled ? 0x002222 : 0x000000);
    phongMaterial.emissive.setHex(emissiveEnabled ? 0x222200 : 0x000000);
    standardMaterial.emissive.setHex(emissiveEnabled ? 0x002200 : 0x000000);
    physicalMaterial.emissive.setHex(emissiveEnabled ? 0x220022 : 0x000000);
});

Step 7: Renderer Setup

// Create renderer
const renderer = new THREE.WebGLRenderer({
    canvas: canvas,
    antialias: true
});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);

Step 8: Animation Loop

// Animation loop - rotate spheres and animate lights
function animate() {
    requestAnimationFrame(animate);

    const time = Date.now() * 0.001; // Convert to seconds

    // Rotate all spheres on Y axis
    spheres.forEach(sphere => {
        sphere.rotation.y = time * 0.5;
        sphere.rotation.x = Math.sin(time * 0.3) * 0.2;
    });

    // Animate point lights in circles
    pointLight.position.x = Math.sin(time) * 8;
    pointLight.position.z = Math.cos(time) * 8;

    pointLight2.position.x = Math.sin(time + Math.PI) * 8;
    pointLight2.position.z = Math.cos(time + Math.PI) * 8;

    renderer.render(scene, camera);
}

animate();

// Handle window resize
window.addEventListener('resize', () => {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
});

Complete Code

Here's everything together:

import * as THREE from "three";

const canvas = document.getElementById("canvas");

// Scene setup
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x1a1a2e);

// Camera setup
const camera = new THREE.PerspectiveCamera(
    75,
    window.innerWidth / window.innerHeight,
    0.1,
    1000
);
camera.position.set(0, 0, 15);
camera.lookAt(0, 0, 0);

// Lighting
const ambientLight = new THREE.AmbientLight(0xffffff, 0.3);
scene.add(ambientLight);

const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(5, 5, 5);
scene.add(directionalLight);

const pointLight = new THREE.PointLight(0xff00ff, 1);
pointLight.position.set(-5, 3, 5);
scene.add(pointLight);

const pointLight2 = new THREE.PointLight(0x00ffff, 0.8);
pointLight2.position.set(5, -3, 5);
scene.add(pointLight2);

// Materials
const basicMaterial = new THREE.MeshBasicMaterial({
    color: 0xff6b6b,
    wireframe: false
});

const lambertMaterial = new THREE.MeshLambertMaterial({
    color: 0x4ecdc4,
    emissive: 0x000000,
    wireframe: false
});

const phongMaterial = new THREE.MeshPhongMaterial({
    color: 0xffe66d,
    shininess: 100,
    specular: 0xffffff,
    emissive: 0x000000,
    wireframe: false
});

const standardMaterial = new THREE.MeshStandardMaterial({
    color: 0xa8e6cf,
    metalness: 0.5,
    roughness: 0.5,
    emissive: 0x000000,
    wireframe: false
});

const physicalMaterial = new THREE.MeshPhysicalMaterial({
    color: 0xffa8e8,
    metalness: 0.8,
    roughness: 0.2,
    clearcoat: 1.0,
    clearcoatRoughness: 0.1,
    reflectivity: 1.0,
    emissive: 0x000000,
    wireframe: false
});

// Create spheres
const sphereGeometry = new THREE.SphereGeometry(1.5, 64, 64);

const basicSphere = new THREE.Mesh(sphereGeometry, basicMaterial);
basicSphere.position.set(-8, 2, 0);
scene.add(basicSphere);

const lambertSphere = new THREE.Mesh(sphereGeometry, lambertMaterial);
lambertSphere.position.set(-4, 2, 0);
scene.add(lambertSphere);

const phongSphere = new THREE.Mesh(sphereGeometry, phongMaterial);
phongSphere.position.set(0, 2, 0);
scene.add(phongSphere);

const standardSphere = new THREE.Mesh(sphereGeometry, standardMaterial);
standardSphere.position.set(4, 2, 0);
scene.add(standardSphere);

const physicalSphere = new THREE.Mesh(sphereGeometry, physicalMaterial);
physicalSphere.position.set(8, 2, 0);
scene.add(physicalSphere);

const spheres = [basicSphere, lambertSphere, phongSphere, standardSphere, physicalSphere];
const materials = [basicMaterial, lambertMaterial, phongMaterial, standardMaterial, physicalMaterial];

// Create labels
function createTextLabel(text) {
    const canvas = document.createElement('canvas');
    const context = canvas.getContext('2d');
    canvas.width = 512;
    canvas.height = 128;

    context.fillStyle = '#000000';
    context.fillRect(0, 0, canvas.width, canvas.height);

    context.font = 'Bold 48px Arial';
    context.fillStyle = '#ffffff';
    context.textAlign = 'center';
    context.fillText(text, canvas.width / 2, canvas.height / 2 + 16);

    const texture = new THREE.CanvasTexture(canvas);
    const spriteMaterial = new THREE.SpriteMaterial({ map: texture });
    const sprite = new THREE.Sprite(spriteMaterial);
    sprite.scale.set(4, 1, 1);

    return sprite;
}

const labels = [
    { text: 'Basic', position: [-8, 0, 0] },
    { text: 'Lambert', position: [-4, 0, 0] },
    { text: 'Phong', position: [0, 0, 0] },
    { text: 'Standard', position: [4, 0, 0] },
    { text: 'Physical', position: [8, 0, 0] }
];

labels.forEach(label => {
    const sprite = createTextLabel(label.text);
    sprite.position.set(label.position[0], label.position[1], label.position[2]);
    scene.add(sprite);
});

// Interactive controls
const metalnessSlider = document.getElementById('metalness');
const roughnessSlider = document.getElementById('roughness');
const opacitySlider = document.getElementById('opacity');
const wireframeBtn = document.getElementById('toggleWireframe');
const emissiveBtn = document.getElementById('toggleEmissive');

const metalnessValue = document.getElementById('metalnessValue');
const roughnessValue = document.getElementById('roughnessValue');
const opacityValue = document.getElementById('opacityValue');

metalnessSlider.addEventListener('input', (e) => {
    const value = parseFloat(e.target.value);
    metalnessValue.textContent = value.toFixed(1);
    standardMaterial.metalness = value;
    physicalMaterial.metalness = value;
});

roughnessSlider.addEventListener('input', (e) => {
    const value = parseFloat(e.target.value);
    roughnessValue.textContent = value.toFixed(1);
    standardMaterial.roughness = value;
    physicalMaterial.roughness = value;
});

opacitySlider.addEventListener('input', (e) => {
    const value = parseFloat(e.target.value);
    opacityValue.textContent = value.toFixed(1);
    materials.forEach(material => {
        material.transparent = value < 1.0;
        material.opacity = value;
    });
});

let wireframeEnabled = false;
wireframeBtn.addEventListener('click', () => {
    wireframeEnabled = !wireframeEnabled;
    materials.forEach(material => {
        material.wireframe = wireframeEnabled;
    });
});

let emissiveEnabled = false;
emissiveBtn.addEventListener('click', () => {
    emissiveEnabled = !emissiveEnabled;
    lambertMaterial.emissive.setHex(emissiveEnabled ? 0x002222 : 0x000000);
    phongMaterial.emissive.setHex(emissiveEnabled ? 0x222200 : 0x000000);
    standardMaterial.emissive.setHex(emissiveEnabled ? 0x002200 : 0x000000);
    physicalMaterial.emissive.setHex(emissiveEnabled ? 0x220022 : 0x000000);
});

// Renderer
const renderer = new THREE.WebGLRenderer({
    canvas: canvas,
    antialias: true
});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);

// Animation loop
function animate() {
    requestAnimationFrame(animate);

    const time = Date.now() * 0.001;

    spheres.forEach(sphere => {
        sphere.rotation.y = time * 0.5;
        sphere.rotation.x = Math.sin(time * 0.3) * 0.2;
    });

    pointLight.position.x = Math.sin(time) * 8;
    pointLight.position.z = Math.cos(time) * 8;

    pointLight2.position.x = Math.sin(time + Math.PI) * 8;
    pointLight2.position.z = Math.cos(time + Math.PI) * 8;

    renderer.render(scene, camera);
}

animate();

window.addEventListener('resize', () => {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
});

When to Use Each Material

MeshBasicMaterial

Performance: ⚡⚡⚡⚡⚡ (Fastest)

When to use:

• UI elements that should always be visible

• Backgrounds or sky boxes

• Debug visualizations

• Objects that shouldn't react to lights

• Performance-critical applications with many objects

Pros: No lighting calculations, always renders fast

Cons: Looks flat, no depth or realism

MeshLambertMaterial

Performance: ⚡⚡⚡⚡ (Fast)

When to use:

• Matte, non-shiny surfaces

• Paper, cardboard, unfinished wood

• Fabric, cloth materials

• Chalk, matte paint

• Mobile applications (good performance)

Pros: Good performance, realistic for matte surfaces

Cons: No specular highlights (can't make shiny things)

MeshPhongMaterial

Performance: ⚡⚡⚡ (Medium)

When to use:

• Shiny plastics

• Glossy paint

• Polished wood

• Ceramic surfaces

• When you need visible light reflections

Pros: Good specular highlights, proven technique

Cons: Not physically accurate, being replaced by Standard material

MeshStandardMaterial

Performance: ⚡⚡ (Slower)

When to use:

• Modern, realistic rendering

• Metals (using metalness)

• Most general-purpose 3D objects

• When you want physically accurate materials

• Production-quality projects

Pros: Physically accurate (PBR), versatile, industry standard

Cons: More expensive than Basic/Lambert/Phong

MeshPhysicalMaterial

Performance: ⚡ (Slowest)

When to use:

• Car paint with clear coat

• Gems and jewellery

• Glass and transparent materials

• High-end product visualization

• When you need the absolute best quality

Pros: Most realistic, has advanced features (clear coat, transmission)

Cons: Most expensive performance-wise, overkill for many use cases

Performance Comparison

From fastest to slowest:

1. MeshBasicMaterial - No lighting calculations

2. MeshLambertMaterial - Simple lighting (diffuse only)

3. MeshPhongMaterial - Lighting + specular highlights

4. MeshStandardMaterial - Full PBR calculations

5. MeshPhysicalMaterial - PBR + advanced effects

Pro tip: Use the cheapest material that gives you the look you need! Don't use Physical material if Standard looks good enough.

What I Learned

1. Materials Define Appearance

While geometry defines shape, materials define how that shape looks - the colour, shininess, transparency, and how it reacts to light. They're equally important!

2. Lighting Dependencies Matter

• Basic material = No lights needed (always visible)

• Lambert, Phong, Standard, Physical = Need lights to be visible This is crucial when debugging - if your objects are black, check your lights!

3. PBR is the Modern Standard

The metalness/roughness workflow (Standard and Physical materials) is what modern games and applications use. It's more intuitive than the old specular workflow.

4. Metalness vs Roughness

Understanding these two properties unlocks realistic materials:

• Metalness: Is it metal or not? (Usually 0 or 1, rarely in between)

• Roughness: How polished is the surface? (0 = mirror, 1 = matte)

5. Performance vs Quality Trade-off

You can have 1000 objects with Basic material or 100 with Physical material. Choose based on your needs:

• Mobile/many objects = Basic or Lambert

• Desktop/quality matters = Standard or Physical

6. Emissive Adds Depth

Adding a subtle emissive glow (same colour as the object, very low intensity) can make materials look more alive without affecting performance much.

7. Transparency Requires Planning

When using opacity, you must set transparent: true first. Also, transparent objects can have sorting issues when overlapping - Three.js renders them back-to-front.

8. Wireframe Mode is Essential for Learning

Toggle wireframe mode to see the actual geometry structure. It's incredibly useful for understanding how shapes are built and debugging performance issues.

Common Material Patterns

Here are some material configurations I've found useful:

Polished Metal

new THREE.MeshStandardMaterial({
    color: 0xaaaaaa,
    metalness: 1.0,
    roughness: 0.2
});

Matte Plastic

new THREE.MeshStandardMaterial({
    color: 0x2194ce,
    metalness: 0.0,
    roughness: 0.8
});

Glass

new THREE.MeshPhysicalMaterial({
    color: 0xffffff,
    metalness: 0.0,
    roughness: 0.0,
    transmission: 1.0,
    transparent: true
});

Glowing Object

new THREE.MeshStandardMaterial({
    color: 0x00ff00,
    emissive: 0x00ff00,
    emissiveIntensity: 0.5
});

Key takeaways:

• Basic = fast but flat

• Lambert = matte surfaces

• Phong = shiny surfaces

• Standard = modern PBR (use this most)

• Physical = premium quality when you need it

The interactive controls in this demo really helped me understand how metalness, roughness, and other properties affect the final look. I recommend building this yourself and playing with the sliders!

Try experimenting with:

• Different metalness/roughness combinations

• Adding emissive glows in different colors

• Creating transparent materials

• Mixing materials on different objects

• Adjusting lighting to see how materials react

Understanding materials is essential for creating visually appealing 3D experiences. Now I can make things look like metal, plastic, glass, or anything in between!

Happy rendering. 🎨

Think of geometries like LEGO pieces. Each piece has a different shape, but they all work the same way - you attach them to materials, position them in your scene and you've got 3D objects.

What Are Geometries?

In Three.js, a geometry defines the shape of a 3D object. It's essentially a collection of:

• Vertices (points in 3D space)

• Faces (triangles connecting those points)

Three.js provides many built-in geometries that cover most use cases. Today, we'll explore four essential shapes and understand when to use each one.

Project Setup

Before we jump into different geometries, here's our basic HTML structure:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Three.js Geometries Gallery</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
            font-family: Arial, sans-serif;
        }
        canvas {
            display: block;
        }
        #info {
            position: absolute;
            top: 20px;
            left: 20px;
            color: white;
            background: rgba(0, 0, 0, 0.7);
            padding: 15px;
            border-radius: 8px;
            font-size: 14px;
        }
    </style>
</head>
<body>
    <canvas id="canvas"></canvas>
    <div id="info">
        <strong>Geometries Gallery</strong><br>
    </div>
    <script type="module" src="script.js"></script>
</body>
</html>

Building Our Geometry Gallery

Now let's create a gallery showcasing different Three.js geometries. I'll arrange them in a nice grid pattern so we can see them all at once!

Step 1: Scene Setup

import * as THREE from "three";

const canvas = document.getElementById("canvas");

// Scene setup
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x1a1a1a); // Dark background

// Camera setup
const camera = new THREE.PerspectiveCamera(
    75, // Field of view
    window.innerWidth / window.innerHeight, // Aspect ratio
    0.1, // Near clipping plane
    1000 // Far clipping plane
);
camera.position.set(0, 3, 12); // Position camera to see all objects
camera.lookAt(0, 0, 0); // Look at center of scene

Step 2: Lighting Setup

// Ambient light - provides base illumination for all objects
const ambientLight = new THREE.AmbientLight(0xffffff, 0.4);
scene.add(ambientLight);

// Directional light - acts like sunlight from a specific direction
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
directionalLight.position.set(5, 10, 5);
scene.add(directionalLight);

// Point light - adds a colored accent light
const pointLight = new THREE.PointLight(0x00ffff, 0.5);
pointLight.position.set(-5, 5, 5);
scene.add(pointLight);

Step 3: Creating Different Geometries

Now for the fun part - let's create four essential geometry types!

// ============================================
// SPHERE GEOMETRY - Perfect for balls, planets, bubbles
// ============================================
const sphereGeometry = new THREE.SphereGeometry(
    1,      // radius
    32,     // widthSegments (more = smoother)
    32      // heightSegments (more = smoother)
);
const sphereMaterial = new THREE.MeshStandardMaterial({
    color: 0xff6b6b,
    metalness: 0.3,
    roughness: 0.4
});
const sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
sphere.position.set(-4.5, 0, 0); // Position on the left
scene.add(sphere);

// ============================================
// CYLINDER GEOMETRY - Great for pillars, cans, tubes
// ============================================
const cylinderGeometry = new THREE.CylinderGeometry(
    1,      // radiusTop
    1,      // radiusBottom
    2,      // height
    32      // radialSegments (more = smoother circular edge)
);
const cylinderMaterial = new THREE.MeshStandardMaterial({
    color: 0x4ecdc4,
    metalness: 0.5,
    roughness: 0.3
});
const cylinder = new THREE.Mesh(cylinderGeometry, cylinderMaterial);
cylinder.position.set(-1.5, 0, 0); // Position center-left
scene.add(cylinder);

// ============================================
// CONE GEOMETRY - Perfect for traffic cones, mountains, party hats
// ============================================
const coneGeometry = new THREE.ConeGeometry(
    1,      // radius of base
    2,      // height
    32      // radialSegments
);
const coneMaterial = new THREE.MeshStandardMaterial({
    color: 0xffe66d,
    metalness: 0.2,
    roughness: 0.6
});
const cone = new THREE.Mesh(coneGeometry, coneMaterial);
cone.position.set(1.5, 0, 0); // Position center-right
scene.add(cone);

// ============================================
// TORUS GEOMETRY - Donut shape, great for rings, hoops
// ============================================
const torusGeometry = new THREE.TorusGeometry(
    1,      // radius of torus (donut size)
    0.4,    // tube radius (thickness of donut)
    16,     // radialSegments
    100     // tubularSegments (smoothness around the tube)
);
const torusMaterial = new THREE.MeshStandardMaterial({
    color: 0xa8e6cf,
    metalness: 0.6,
    roughness: 0.2
});
const torus = new THREE.Mesh(torusGeometry, torusMaterial);
torus.position.set(4.5, 0, 0); // Position on the right
scene.add(torus);

Understanding Geometry Parameters

Let me break down what those numbers in each geometry mean and when you'd adjust them:

SphereGeometry(radius, widthSegments, heightSegments)

• radius: Size of the sphere

• widthSegments/heightSegments: Higher numbers = smoother sphere, but more performance cost

• Use for: Planets, balls, bubbles, orbs

CylinderGeometry(radiusTop, radiusBottom, height, radialSegments)

• radiusTop/radiusBottom: Make them different to create tapered shapes!

• height: How tall the cylinder is

• radialSegments: Higher = smoother circular edges

• Use for: Pillars, cans, tubes, tree trunks

ConeGeometry(radius, height, radialSegments)

• radius: Base size

• height: How tall the cone is

• radialSegments: Smoothness of the base circle

• Use for: Party hats, mountains, traffic cones, arrowheads

TorusGeometry(radius, tube, radialSegments, tubularSegments)

• radius: Overall donut size

• tube: Thickness of the donut ring

• radialSegments/tubularSegments: Smoothness

• Use for: Rings, hoops, tire shapes

Step 4: Adding a Reference Grid

Let's add a grid to help visualize the 3D space:

// Grid helper - shows the ground plane
const gridHelper = new THREE.GridHelper(20, 20, 0x444444, 0x222222);
gridHelper.position.y = -3;
scene.add(gridHelper);

Step 5: Renderer Setup

// Create renderer
const renderer = new THREE.WebGLRenderer({
    canvas: canvas,
    antialias: true // Smooth edges
});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);

Step 6: Animation Loop

// Animation loop - rotate all objects for better viewing
function animate() {
    requestAnimationFrame(animate);

    // Rotate all geometries on multiple axes
    const time = Date.now() * 0.001; // Convert to seconds

    sphere.rotation.x = time * 0.5;
    sphere.rotation.y = time * 0.7;

    cylinder.rotation.x = time * 0.3;
    cylinder.rotation.y = time * 0.5;

    cone.rotation.x = time * 0.4;
    cone.rotation.y = time * 0.6;

    torus.rotation.x = time * 0.6;
    torus.rotation.y = time * 0.4;

    renderer.render(scene, camera);
}

animate();

// Handle window resize
window.addEventListener('resize', () => {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
});

Complete Code

Here's the full code altogether:

import * as THREE from "three";

const canvas = document.getElementById("canvas");

// Scene setup
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x1a1a1a);

// Camera setup
const camera = new THREE.PerspectiveCamera(
    75,
    window.innerWidth / window.innerHeight,
    0.1,
    1000
);
camera.position.set(0, 3, 12);
camera.lookAt(0, 0, 0);

// Lighting
const ambientLight = new THREE.AmbientLight(0xffffff, 0.4);
scene.add(ambientLight);

const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
directionalLight.position.set(5, 10, 5);
scene.add(directionalLight);

const pointLight = new THREE.PointLight(0x00ffff, 0.5);
pointLight.position.set(-5, 5, 5);
scene.add(pointLight);

// SPHERE
const sphereGeometry = new THREE.SphereGeometry(1, 32, 32);
const sphereMaterial = new THREE.MeshStandardMaterial({
    color: 0xff6b6b,
    metalness: 0.3,
    roughness: 0.4
});
const sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
sphere.position.set(-4.5, 0, 0);
scene.add(sphere);

// CYLINDER
const cylinderGeometry = new THREE.CylinderGeometry(1, 1, 2, 32);
const cylinderMaterial = new THREE.MeshStandardMaterial({
    color: 0x4ecdc4,
    metalness: 0.5,
    roughness: 0.3
});
const cylinder = new THREE.Mesh(cylinderGeometry, cylinderMaterial);
cylinder.position.set(-1.5, 0, 0);
scene.add(cylinder);

// CONE
const coneGeometry = new THREE.ConeGeometry(1, 2, 32);
const coneMaterial = new THREE.MeshStandardMaterial({
    color: 0xffe66d,
    metalness: 0.2,
    roughness: 0.6
});
const cone = new THREE.Mesh(coneGeometry, coneMaterial);
cone.position.set(1.5, 0, 0);
scene.add(cone);

// TORUS
const torusGeometry = new THREE.TorusGeometry(1, 0.4, 16, 100);
const torusMaterial = new THREE.MeshStandardMaterial({
    color: 0xa8e6cf,
    metalness: 0.6,
    roughness: 0.2
});
const torus = new THREE.Mesh(torusGeometry, torusMaterial);
torus.position.set(4.5, 0, 0);
scene.add(torus);

// Grid helper
const gridHelper = new THREE.GridHelper(20, 20, 0x444444, 0x222222);
gridHelper.position.y = -3;
scene.add(gridHelper);

// Renderer
const renderer = new THREE.WebGLRenderer({
    canvas: canvas,
    antialias: true
});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);

// Animation loop
function animate() {
    requestAnimationFrame(animate);

    const time = Date.now() * 0.001;

    sphere.rotation.x = time * 0.5;
    sphere.rotation.y = time * 0.7;

    cylinder.rotation.x = time * 0.3;
    cylinder.rotation.y = time * 0.5;

    cone.rotation.x = time * 0.4;
    cone.rotation.y = time * 0.6;

    torus.rotation.x = time * 0.6;
    torus.rotation.y = time * 0.4;

    renderer.render(scene, camera);
}

animate();

// Resize handler
window.addEventListener('resize', () => {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
});

When to Use Custom Geometries

You'd create custom geometries when:

1. You need a specific shape not available in Three.js built-ins

2. You're loading geometry data from external sources

3. You want precise control over every vertex and face

4. Performance matters and you need optimized shapes

Custom geometries are more work, but they give you complete control!

The Core Concept: It's All Meshes

Here's the beautiful thing I realized - every 3D object follows the same pattern:

const geometry = new THREE.SomeGeometry(parameters);
const material = new THREE.SomeMaterial({ properties });
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

Whether it's a built-in sphere or a custom diamond shape, the workflow is identical.

What I Learned

1. Geometry is Just Data

A geometry is really just a bunch of numbers - coordinates for vertices (points) and how they connect to form triangles. Three.js provides built-in geometries so we don't have to calculate these by hand!

2. Segments Control Smoothness

All those "segments" parameters? They control how many triangles make up the shape. More triangles = smoother curves, but worse performance. It's always a trade-off!

3. Every Shape Has Its Use Case

• Spheres: Organic, round objects (planets, balls, bubbles)

• Cylinders: Structural elements (pillars, cans, tubes)

• Cones: Directional indicators (arrows, mountains, party hats)

• Torus: Circular objects with holes (rings, hoops, tires)

4. Material Properties Make It Real

The same geometry looks entirely different with different materials. The metalness and roughness properties in MeshStandardMaterial are especially powerful for creating realistic surfaces.

5. The Mesh Pattern is Universal

Whether it's a sphere or torus, the workflow is always the same. This consistency makes Three.js easy to learn!

6. Positioning is Key

Using position.set(x, y, z) to arrange objects in your scene is crucial. I arranged mine in a row, but you can create any layout you want - stacks, circles, grids, whatever!

The key takeaway?

All geometries are just different shapes, but they work the same way. Once you understand that pattern, you can create anything!

Try building this gallery yourself and experiment with:

• Changing segment counts to see the smoothness difference

• Mixing different materials on the same geometries

• Positioning shapes in interesting arrangements (maybe a pyramid or circle pattern?)

• Animating them in different ways

Happy experimenting. 🎨

What is Three.js Anyway?

Three.js is a JavaScript library that makes it easier to create and display 3D graphics in the browser using WebGL. Without Three.js, you'd have to write complex WebGL code. With Three.js, you can create 3D scenes with just a few lines of JavaScript!

The Movie Set Analogy

Before diving into code, let me share an analogy that helped me understand Three.js concepts:

Think of Three.js like creating a movie:

• Scene - The movie set where everything happens

• Camera - What the audience sees (their perspective)

• Objects - Actors and props on the set

• Lights - Studio lighting to make things visible

• Renderer - The camera crew that captures and displays everything

Now let's build our first scene!

Setting Up: The HTML Canvas

First, we need a canvas element in our HTML where Three.js will draw our 3D scene:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Three.js Scene</title>
    <style>
        body { margin: 0; overflow: hidden; }
        canvas { display: block; }
    </style>
</head>
<body>
    <canvas id="canvas"></canvas>
    <script type="module" src="script.js"></script>
</body>
</html>

Step 1: Creating the Scene

import * as THREE from "three";

const canvas = document.getElementById("canvas");

// 1. Create the Scene - This is our movie set
const scene = new THREE.Scene();
scene.background = new THREE.Color(0xbbbbbb); // Light gray background

The scene is like an empty room or stage. Right now it's empty, but we'll add objects, lights, and a camera to it. The background color is like painting the walls of your room.

Step 2: Setting Up the Camera

// 2. Create the Camera - This is the audience's viewpoint
const w = window.innerWidth;
const h = window.innerHeight;

// PerspectiveCamera mimics how human eyes see the world
// Parameters: field of view, aspect ratio, near clipping, far clipping
const camera = new THREE.PerspectiveCamera(75, w / h, 0.1, 1000);
camera.position.z = 5; // Move camera back so we can see objects

Imagine you're holding a camera. The field of view (75) is how wide your lens is - a wider angle sees more. The aspect ratio (w/h) ensures things don't look stretched. The near (0.1) and far (1000) values are like how close and how far you can see clearly.

The position.z = 5 moves our camera backward. In Three.js, the default coordinate system has:

• X-axis: left (-) to right (+)

• Y-axis: down (-) to up (+)

• Z-axis: into screen (-) to out toward you (+)

Step 3: Creating Geometries (Shapes)

// 3. Create Geometries - The basic shapes of our objects
const icosahedronGeometry = new THREE.IcosahedronGeometry(1, 0);
// Parameters: radius (1), detail level (0 = low poly)

const boxGeometry = new THREE.BoxGeometry(2, 0.1, 2);
// Parameters: width (2), height (0.1), depth (2)

Geometry is like the skeleton or frame of an object. Think of it as a wireframe structure before you add color or texture. An icosahedron is a 20-sided dice shape, and a box is... well, a box!

Step 4: Creating Materials (Appearance)

// 4. Create Materials - How our objects look (color, shininess, etc.)
const icosahedronMaterial = new THREE.MeshLambertMaterial({ 
    color: 0x00ff00,      // Green color
    emissive: 0x00aa00    // Slight green glow
});

const boxMaterial = new THREE.MeshStandardMaterial({ 
    color: 0xff0000,      // Red color
    emissive: 0xaa0000    // Slight red glow
});

If geometry is the skeleton, material is the skin, paint, and texture. It defines whether something is shiny, matte, colorful, or transparent. The emissive property makes objects glow slightly, like they have their own light.

Note: MeshLambertMaterial and MeshStandardMaterial require lights to be visible. Without lights, they'd appear black!

Step 5: Creating Meshes (Combining Shape + Appearance)

// 5. Create Meshes - Combine geometry + material
const icosahedron = new THREE.Mesh(icosahedronGeometry, icosahedronMaterial);
const box = new THREE.Mesh(boxGeometry, boxMaterial);

// Position the box below the icosahedron
box.position.y = -1.5;

// Add both objects to our scene
scene.add(icosahedron);
scene.add(box);

A mesh is the final "actor" on our set. It's the geometry (skeleton) wearing the material (skin/clothes). Now our objects exist in the scene and are ready to be seen!

Step 6: Let There Be Light!

// 6. Add Lighting - Without this, we'd see nothing!
const spotLight = new THREE.SpotLight(0xffffff, 100);
// Parameters: color (white), intensity (100)

spotLight.position.set(10, 10, 10);
// Position it above and to the side

scene.add(spotLight);

Just like a movie set needs studio lights, our 3D scene needs lights to illuminate objects. Without lights, materials like MeshLambertMaterial would appear completely black because they depend on light to show their colors.

Step 7: The Renderer - Bringing It All Together

// 7. Create the Renderer - This displays everything on screen
const renderer = new THREE.WebGLRenderer({ canvas: canvas });

// Use device pixel ratio for sharper rendering on high-DPI screens
renderer.setPixelRatio(window.devicePixelRatio);

// Set renderer size to fill the window
renderer.setSize(w, h);

The renderer is like the film crew that captures everything and projects it onto the screen. It takes the scene, camera view, and all objects, then draws them on the canvas element.

Step 8: The Animation Loop - Making Things Move!

Here's where the magic happens. We need to continuously render our scene to create animation:

// 8. Animation Loop - Re-render the scene every frame
function animateScene() {
    // Request the browser to call this function before the next repaint
    window.requestAnimationFrame(animateScene);

    // Rotate the icosahedron on X and Y axes
    icosahedron.rotation.x += 0.01;
    icosahedron.rotation.y += 0.01;

    // Rotate the box slower on Y axis only
    box.rotation.y += 0.005;

    // Render the scene from the camera's perspective
    renderer.render(scene, camera);
}

// Start the animation loop
animateScene();

Why do we need an animation loop?

Think about how movies work - they're just a series of still images shown rapidly (typically 24–60 frames per second). Our animation loop does the same thing:

1. Update - Change object positions, rotations, or properties

2. Render - Draw the updated scene

3. Repeat - Do it again for the next frame

requestAnimationFrame is the browser's built-in way to say "call this function right before you redraw the screen" - typically 60 times per second. This creates smooth animations!

Without this loop, we'd just see a single static frame. With it, our objects rotate smoothly.

Step 9: Responsive Design - Handle Window Resizing

// 9. Handle window resize events
window.addEventListener("resize", () => {
    const w = window.innerWidth;
    const h = window.innerHeight;

    // Update camera aspect ratio
    camera.aspect = w / h;
    camera.updateProjectionMatrix(); // Must call this after changing aspect

    // Update renderer size
    renderer.setSize(w, h);
});

Why is this important?

When the window resizes, our canvas and camera need to adjust. Without this, your 3D scene would look stretched or squished. The updateProjectionMatrix() call is crucial - it recalculates how the camera projects 3D space onto 2D screen space.

The Complete Code

Here's everything together:

import * as THREE from "three";

const canvas = document.getElementById("canvas");

// 1. Scene - The movie set
const scene = new THREE.Scene();
scene.background = new THREE.Color(0xbbbbbb);

// 2. Camera - The audience's viewpoint
const w = window.innerWidth;
const h = window.innerHeight;
const camera = new THREE.PerspectiveCamera(75, w / h, 0.1, 1000);
camera.position.z = 5;

// 3. Geometries - Basic shapes
const icosahedronGeometry = new THREE.IcosahedronGeometry(1, 0);
const boxGeometry = new THREE.BoxGeometry(2, 0.1, 2);

// 4. Materials - How objects look
const icosahedronMaterial = new THREE.MeshLambertMaterial({ 
    color: 0x00ff00, 
    emissive: 0x00aa00 
});
const boxMaterial = new THREE.MeshStandardMaterial({ 
    color: 0xff0000, 
    emissive: 0xaa0000 
});

// 5. Meshes - Combine geometry + material
const icosahedron = new THREE.Mesh(icosahedronGeometry, icosahedronMaterial);
const box = new THREE.Mesh(boxGeometry, boxMaterial);
box.position.y = -1.5;

scene.add(icosahedron);
scene.add(box);

// 6. Lighting - Make objects visible
const spotLight = new THREE.SpotLight(0xffffff, 100);
spotLight.position.set(10, 10, 10);
scene.add(spotLight);

// 7. Renderer - Display everything
const renderer = new THREE.WebGLRenderer({ canvas: canvas });
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(w, h);

// 8. Animation Loop - Create movement
function animateScene() {
    window.requestAnimationFrame(animateScene);

    icosahedron.rotation.x += 0.01;
    icosahedron.rotation.y += 0.01;
    box.rotation.y += 0.005;

    renderer.render(scene, camera);
}

animateScene();

// 9. Handle window resize
window.addEventListener("resize", () => {
    const w = window.innerWidth;
    const h = window.innerHeight;

    camera.aspect = w / h;
    camera.updateProjectionMatrix();
    renderer.setSize(w, h);
});

What I Learned

1. The Three.js Pattern is Consistent

Every Three.js project follows this pattern:

• Create a scene

• Set up a camera

• Create objects (geometry + material = mesh)

• Add lights

• Create a renderer

• Animate with a render loop

Once you understand this flow, you can build any 3D scene!

2. The Animation Loop is the Heart

The requestAnimationFrame loop is what brings everything to life. Without it, you just have a static image. This is where you:

• Update object properties (position, rotation, scale)

• Handle user interactions

• Render the updated scene

3. Coordinates Take Practice

The 3D coordinate system (X, Y, Z) takes time to internalize. Remember:

• Positive Z comes toward you (out of screen)

• Positive Y goes up

• Positive X goes right

4. Materials Need Lights

This caught me initially! Materials like MeshLambertMaterial and MeshStandardMaterial won't show up without lights. If you want objects visible without lights, use MeshBasicMaterial.

5. Small Values Create Smooth Animation

Notice the rotation values are tiny (0.01, 0.005). That's because the animation loop runs ~60 times per second. Small increments add up to smooth, visible movement!

6. Window Resizing Matters

Always handle resize events to keep your scene looking good on all screen sizes. Don't forget updateProjectionMatrix() after changing the camera's aspect ratio!

If you're starting your Three.js journey too, I'd recommend:

1. Build this basic scene yourself

2. Experiment by changing values (colors, positions, rotation speeds)

3. Add new shapes and lights

4. Break things and fix them - that's how you learn!

The Three.js documentation is really helpful, so don't hesitate to explore it as you build.

Happy coding! 🚀

This is part of my learning journey, documenting my exploration of Three.js and 3D web graphics. Follow along as I build toward creating my own 3D portfolio website!

Why I Chose Hashnode for My Developer Blog

As a developer, I was looking for a fast blogging platform, focused on tech content, SEO-friendly, and developer-centric. After trying out a few options, Hashnode stood out for several reasons:

• Developer-Focused Community: Hashnode is built specifically for developers. You write for people who understand your content and value your insights.

• Fast and Minimal: Clean writing experience, blazing-fast performance.

• Free Custom Domain Support: Unlike many platforms, Hashnode lets you use your own domain or subdomain for free.

• SEO and Analytics Ready: Out-of-the-box SEO optimization and traffic analytics without the need for third-party plugins.

If you’re a developer or a tech enthusiast, Hashnode is a solid choice for hosting your blog.

Why Connect a Custom Subdomain?

By default, Hashnode gives you a yourblog.hashnode.dev address. But using your own domain or subdomain has many advantages:

• Branding: Your domain reflects your identity (like blog.iamdipankarpaul.com), helping build a professional image.

• Trust and Credibility: A custom domain looks more polished and trustworthy.

• SEO Benefits: Linking your subdomain helps drive traffic to your primary domain and keeps your digital presence consistent.

• Future-Proofing: If you ever move platforms, you can keep the same URL structure without affecting SEO or reader access.

Now that you know why, let me show you how to do it.

How to Connect a Custom Subdomain to Your Hashnode Blog

Here’s a step-by-step guide I followed to point my subdomain blog.iamdipankarpaul.com to my Hashnode blog.

1. Configure Your Subdomain in Hashnode

1. Log in to your Hashnode account.

2. Click your profile picture (top right) and choose "Manage your blogs".

3. Select the blog you want to set up, and go to its Dashboard.

4. Click the Domain tab on the left sidebar.

5. Under the Custom Domain section, enter your subdomain (e.g., blog.iamdipankarpaul.com).
   Note: Don’t include www or https://.

6. Click Update to save.

2. Update DNS Records in Your Domain Provider

Now, you’ll need to configure your domain’s DNS settings.

1. Log in to your domain registrar (e.g., Namecheap, GoDaddy, Cloudflare, Hostinger).

2. Navigate to the DNS Management or DNS Editor section.

3. Add a new CNAME record with these details:

    Name/Host:  blog
    Type:       CNAME
    Value:      hashnode.network
    TTL:        Default or 1 hour
   

   Don’t worry Hashnode will provide all these details.

4. Save the DNS record.

Be cautious with the record type, ensure it’s CNAME and not A or TXT.

3. Wait for DNS Propagation

DNS updates typically take a few minutes to 24 hours to fully propagate.

Hashnode will automatically detect the changes and provision an SSL certificate once the setup is successful. You’ll have a secure https://blog.yourdomain.com connection without extra steps.

4. Verify the Connection on Hashnode

1. Go back to your blog’s Domain tab in the Hashnode dashboard.

2. You’ll see a green checkmark or success message once the domain is correctly mapped.

If you see an error or it’s taking too long, double-check your DNS settings or wait a bit longer (at least 24 hours).

Final Notes and Tips

• Want a different subdomain like journal.yourdomain.com or notes.yourdomain.com? Just update the DNS and Hashnode settings with your chosen subdomain.

• Facing issues? Reach out to Hashnode’s support or double-check your DNS provider’s settings.

• This process works with most domain registrars, including Namecheap, GoDaddy, Google Domains, Hostinger, and Cloudflare.

Conclusion

Setting up a custom subdomain for your Hashnode blog is simple, free, and incredibly beneficial for branding and long-term consistency. If you’re serious about blogging as a developer, take a few minutes to connect your domain; it’s worth it.

If you’ve followed this guide and found it helpful, feel free to share it!

Memory management is a fundamental part of programming, and different languages handle it in different ways. Many modern languages, such as Java, Python, and JavaScript, use a Garbage Collector (GC) to automatically free up memory that is no longer needed. While this approach simplifies development, it can lead to performance issues due to unpredictable pauses when the GC runs.

Rust takes a completely different approach. It manages memory without using a garbage collector, ensuring both memory safety and high performance. It does this through an innovative system of ownership, borrowing, and lifetimes. If you’ve ever wondered how Rust achieves this, this article will explain everything in a simple and beginner-friendly way.

How Rust Handles Memory Management

Instead of relying on a background garbage collector, Rust enforces strict memory rules at compile time. This eliminates common memory issues like null pointer dereferencing, memory leaks, and data races.

Rust achieves this using three key concepts:

1. Ownership - Determines who is responsible for a value and when it should be deallocated.

2. Borrowing & References - Allows multiple parts of a program to use data without unnecessary copying.

3. Lifetimes - Ensures references are always valid, preventing dangling pointers.

Let’s break down each concept with examples.

1. Ownership: The Foundation of Rust’s Memory Management

In Rust, every value has a single owner, meaning only one variable can own a piece of data at any time. When the owner goes out of scope, Rust automatically frees the memory.

Example: Ownership in Action

fn main() {
    let s = String::from("Hello, Rust!"); // 's' owns the memory
    println!("{}", s); // Valid use of s
} // 's' goes out of scope, memory is freed automatically

In this example, once s goes out of scope at the end of main(), Rust automatically deallocates the memory used by the string. There’s no need for a free() function like in C or C++.

Ownership Rules

1. Each value has a single owner.

2. When the owner goes out of scope, the value is dropped.

3. Values can be transferred (moved), but not copied unless explicitly allowed.

Move Semantics: Preventing Double Free Errors

fn main() {
    let s1 = String::from("Rust");
    let s2 = s1; // Ownership moves from s1 to s2

    println!("{}", s1); // ❌ ERROR: s1 is no longer valid
}

When s1 is assigned to s2, the ownership of the string moves to s2, and s1 is no longer valid. This prevents double free errors, where two variables try to free the same memory.

If you want to clone the data instead of transferring ownership, you must explicitly call .clone(), which creates a new copy of the data:

fn main() {
    let s1 = String::from("Rust");
    let s2 = s1.clone(); // Creates a separate copy
    println!("{}", s1); // ✅ No error, s1 is still valid
}

2. Borrowing & References: Using Data Without Taking Ownership

Sometimes, you want to use a value without taking ownership. Rust allows this through borrowing using references (&T for immutable references, &mut T for mutable references).

Immutable Borrowing (&T - Read Only, Multiple Allowed)

fn print_length(s: &String) {
    println!("Length: {}", s.len());
}

fn main() {
    let s = String::from("Rust");
    print_length(&s); // Borrowing s, ownership not transferred
    print_length(&s); // ✅ Can borrow multiple times
}

Since print_length only reads the string, it can safely borrow it multiple times.

Mutable Borrowing (&mut T - Read & Write, Only One Allowed at a Time)

fn make_uppercase(s: &mut String) {
    s.push_str(" Rocks!");
}

fn main() {
    let mut s = String::from("Rust");
    make_uppercase(&mut s); // Borrowing mutably
    println!("{}", s); // ✅ Modified string
}

Rust prevents multiple mutable borrows at the same time, avoiding data races that occur in multi-threaded programs.

Borrowing Rules

1. Multiple immutable references (&T) are allowed at the same time.

2. Only one mutable reference (&mut T) is allowed at a time.

3. A variable cannot have both immutable and mutable references simultaneously.

fn main() {
    let mut s = String::from("Rust");

    let r1 = &s;
    let r2 = &s;
    let r3 = &mut s; // ❌ ERROR: Cannot have a mutable reference while immutable ones exist

    println!("{}, {}", r1, r2);
}

3. Lifetimes: Ensuring References Are Always Valid

Borrowing helps avoid unnecessary copies, but it introduces another problem: Dangling References - when a reference outlives the data it points to. Rust prevents this using lifetimes.

Example of a Dangling Reference (Invalid Code)

fn dangling_reference() -> &String {
    let s = String::from("Hello"); // 's' is created
    &s // ❌ ERROR: Reference to 's' is returned, but 's' will be dropped
} // 's' is dropped here!

Since s goes out of scope at the end of the function, returning a reference to it is unsafe.

Lifetime Annotations ('a)

Rust uses lifetime annotations to ensure references are valid:

fn longest<'a>(s1: &'a str, s2: &'a str) -> &'a str {
    if s1.len() > s2.len() { s1 } else { s2 }
}

fn main() {
    let string1 = String::from("Rust");
    let string2 = String::from("Programming");

    let result = longest(&string1, &string2);
    println!("Longest string: {}", result);
}

Here, 'a ensures that both input references (s1 and s2) and the returned reference live at least as long as each other.

Why Rust’s Approach is Better Than Garbage Collection?

✅ No Runtime Overhead – No background GC scanning, leading to faster performance.
✅ Predictable Performance – Memory is freed exactly when it’s no longer needed.
✅ No Memory Leaks – Rust enforces strict ownership rules, ensuring safe memory usage.
✅ No Null References – Rust eliminates null pointer errors, unlike languages with GC.

This makes Rust ideal for system programming, game development, and performance-critical applications.

Conclusion

Rust’s ownership, borrowing, and lifetimes system provides memory safety without needing a garbage collector. Unlike languages with automatic GC, Rust deallocates memory as soon as it’s no longer needed, preventing performance slowdowns. Compared to manual memory management in C/C++, Rust eliminates memory leaks and undefined behavior while ensuring high performance.

If you’re new to Rust, mastering ownership, borrowing, and lifetimes will help you unlock its full potential. This unique approach makes Rust an excellent choice for low-level programming, embedded systems, and high-performance applications.

TypeScript is a powerful tool for writing scalable and maintainable JavaScript applications. One of its best features is Utility Types, which help developers modify, filter, or transform types without rewriting them from scratch. These built-in types make code more reusable, readable, and error-proof.

If you’ve ever found yourself manually tweaking a type definition, TypeScript Utility Types can save you a lot of time! In this article, we’ll explore the most useful utility types and how they make coding in TypeScript easier and more efficient.

What Are TypeScript Utility Types?

Utility Types in TypeScript are predefined generic types that let you modify existing types. Instead of manually creating a new type, you can use these utilities to quickly create a variation of an existing type.

Think of them like shortcuts that help you avoid unnecessary duplication and make your code more flexible.

Essential TypeScript Utility Types

Here are some of the most commonly used Utility Types with examples:

1. Partial<T> - Makes All Properties Optional

This utility makes all properties of an object optional, allowing you to define only some values while keeping the original structure.

type User = {
  name: string;
  age: number;
};

const user: Partial<User> = { name: "John" }; // ✅ No error, 'age' is optional

2. Required<T> - Makes All Properties Required

Opposite to Partial, this utility makes all properties mandatory, even if they were originally optional.

type User = {
  name?: string;
  age?: number;
};

const user: Required<User> = { name: "John" }; // ❌ Error if 'age' is missing

3. Readonly<T> - Prevents Modifications

This utility ensures that once an object is created, its properties cannot be changed.

type User = {
  name: string;
  age: number;
};

const user: Readonly<User> = { name: "John", age: 25 };
user.name = "Doe"; // ❌ Error: Cannot modify readonly property

4. Pick<T, K> - Selects Specific Properties

This utility allows you to create a new type by selecting only certain properties from an existing type.

type User = {
  name: string;
  age: number;
  email: string;
};

type NameOnly = Pick<User, "name">; // { name: string }

5. Omit<T, K> - Removes Specific Properties

Similar to Pick, but instead of selecting, it removes specific properties from a type.

type User = {
  name: string;
  age: number;
  email: string;
};

type NoEmail = Omit<User, "email">; // { name: string; age: number }

Advanced TypeScript Utility Types

6. Record<K, T> - Creates an Object Type with Fixed Keys

This utility helps define an object with specific keys and a common value type.

type Roles = Record<"admin" | "user" | "guest", string>;

const roleNames: Roles = {
  admin: "Administrator",
  user: "Registered User",
  guest: "Visitor",
};

7. Exclude<T, U> - Removes Specific Types from a Union

Used to remove one or more types from a union type.

type Status = "success" | "error" | "pending";
type ActiveStatus = Exclude<Status, "pending">; // "success" | "error"

8. Extract<T, U> - Keeps Only Specific Types from a Union

The opposite of Exclude, it picks only the matching types.

type Status = "success" | "error" | "pending";
type ErrorStatus = Extract<Status, "error">; // "error"

9. NonNullable<T> - Removes null and undefined

Ensures a type does not include null or undefined.

type Data = string | null | undefined;
type CleanData = NonNullable<Data>; // string

10. ReturnType<T> - Gets the Return Type of a Function

Extracts the return type from a function.

function getAge(): number { return 25; }
type Age = ReturnType<typeof getAge>; // number

11. Parameters<T> - Gets Function Parameter Types

Extracts the parameters of a function as a tuple.

function greet(name: string, age: number) {}
type GreetParams = Parameters<typeof greet>; // [string, number]

12. ConstructorParameters<T> - Gets Constructor Parameters

Extracts parameters from a class constructor.

class Person {
  constructor(public name: string, public age: number) {}
}
type PersonParams = ConstructorParameters<typeof Person>; // [string, number]

13. InstanceType<T> - Gets the Instance Type of a Class

Extracts the type of an instance of a class.

class Car { name: string = "Tesla"; }
type CarInstance = InstanceType<typeof Car>; // Car

Conclusion

TypeScript Utility Types are incredibly useful for improving code reusability, reducing redundancy, and making type definitions more flexible. Whether you're simplifying object structures, extracting properties, or enforcing immutability, these utilities help you write better, safer, and more maintainable TypeScript code.

By mastering these utility types, you'll be able to write cleaner, more efficient code while minimizing errors. Next time you find yourself modifying types manually, check if there's a utility type that can do the work for you!

JavaScript is known for being a single-threaded language, which means it can only do one thing at a time. But if that’s the case, how does it handle things like fetching data, responding to user interactions, or running animations without freezing the entire page? The answer lies in the Event Loop - a clever mechanism that makes JavaScript feel fast and responsive.

If you’ve ever wondered why setTimeout() doesn’t always run immediately, or why Promises resolve before setTimeout(), you’re about to get all the answers! In this guide, we’ll break down the JavaScript Event Loop and Microtasks in the simplest way possible.

What is the JavaScript Event Loop?

The Event Loop is like a manager that ensures JavaScript runs efficiently by deciding what to execute next. Since JavaScript can’t perform multiple operations at the same time, it needs a structured way to handle tasks.

Imagine a queue at a coffee shop:

1. You place an order (a task gets added to the queue).

2. The barista prepares your coffee (the JavaScript engine processes your task).

3. When your coffee is ready, your name is called (your task is completed).

Similarly, JavaScript organizes tasks and processes them in an order that ensures smooth performance.

How JavaScript Handles Tasks

In JavaScript, tasks are divided into synchronous and asynchronous operations:

1. Synchronous Tasks (Main Thread)

These are regular JavaScript statements that execute one after another, blocking the execution of further code until they finish.

console.log("Task 1");
console.log("Task 2");
console.log("Task 3");

Output:

Task 1
Task 2
Task 3

There’s nothing special here. JavaScript reads and executes these lines from top to bottom.

2. Asynchronous Tasks (Handled via Event Loop)

These include operations that take time to complete, such as fetching data, waiting for a timer, or responding to user actions.

console.log("Start");

setTimeout(() => console.log("Async Task"), 1000);

console.log("End");

Output:

Start
End
Async Task  (after 1 second)

Even though setTimeout was called first, JavaScript doesn’t wait for it - it moves on to the next statement while the timer runs in the background.

Microtasks vs. Macrotasks: Understanding the Priority System

Not all asynchronous tasks are treated the same. JavaScript has two types of task queues:

1. Microtasks (Higher Priority)

Microtasks include:

• Promises (.then, .catch, .finally)

• queueMicrotask()

• MutationObserver

They are executed right after the main script finishes and before any macrotasks.

2. Macrotasks (Lower Priority)

Macrotasks include:

• setTimeout, setInterval

• setImmediate (Node.js only)

• requestAnimationFrame

These are scheduled after microtasks are completed.

Execution Order Example

Let’s test this in code:

console.log("Start");
setTimeout(() => console.log("Macrotask - setTimeout"), 0);
Promise.resolve().then(() => console.log("Microtask - Promise"));
queueMicrotask(() => console.log("Microtask - queueMicrotask"));
console.log("End");

Output:

Start
End
Microtask - Promise
Microtask - queueMicrotask
Macrotask - setTimeout

👉 Even though setTimeout has 0 delay, it still runs after microtasks!

The Event Loop in Action (Step-by-Step Breakdown)

Let’s understand how the Event Loop works by breaking it into simple steps:

1. JavaScript runs the main script (top-to-bottom execution).

2. Microtasks are executed next (Promises, queueMicrotask).

3. Macrotasks run last (setTimeout, setInterval, etc.).

4. The Event Loop repeats the process, constantly checking for new tasks.

Here's a visual representation:

  ┌───────────────────────────────────────────┐
  │ JavaScript Code Execution (Main Thread)   │
  └───────────────────────────────────────────┘
             │
             ▼
  ┌───────────────────────────────────────────┐
  │ **Microtask Queue** (Higher Priority)     │
  │ Promises, queueMicrotask                  │
  └───────────────────────────────────────────┘
             │
             ▼
  ┌───────────────────────────────────────────┐
  │ **Macrotask Queue** (Lower Priority)      │
  │ setTimeout, setInterval, setImmediate     │
  └───────────────────────────────────────────┘

Common Misconceptions about the Event Loop

1. "setTimeout(0) runs immediately" ❌

   • No, it waits until the main script and all microtasks are done first.

2. "JavaScript runs everything at the same time" ❌

   • No, it runs one task at a time, handling async tasks using the event loop.

3. "Microtasks and macrotasks are the same" ❌

   • No, microtasks run first, making Promises faster than setTimeout.

Conclusion

The JavaScript Event Loop is what makes JavaScript non-blocking and efficient. It ensures that tasks are handled in the right order - synchronous tasks first, microtasks next, and macrotasks last. This allows JavaScript to handle user interactions, API requests, and timers without freezing the page.

Understanding this concept will help you debug performance issues, optimize asynchronous operations, and write better JavaScript code. So next time you see a setTimeout, Promise, or async/await, you'll know exactly how JavaScript is handling them! 🚀

1. Single Responsibility Principle (SRP)

In React, this means each component should focus on doing one thing well. Components should have a single reason to change.

Example: Breaking Down a Complex Form

Violating SRP:

function UserProfilePage() {
  const [user, setUser] = useState({});
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState(null);

  // Fetch user data
  useEffect(() => {
    fetchUserData()
      .then(data => {
        setUser(data);
        setIsLoading(false);
      })
      .catch(err => {
        setError(err);
        setIsLoading(false);
      });
  }, []);

  // Form handling logic
  const handleSubmit = (event) => {
    event.preventDefault();
    // Validation logic
    // API submission logic
    // Success/error handling
  };

  if (isLoading) return <LoadingSpinner />;
  if (error) return <ErrorMessage error={error} />;

  return (
    <div>
      <h1>{user.name}'s Profile</h1>
      <form onSubmit={handleSubmit}>
        {/* Many form fields */}
        <input type="text" value={user.name} onChange={/* ... */} />
        <input type="email" value={user.email} onChange={/* ... */} />
        <textarea value={user.bio} onChange={/* ... */} />
        {/* More fields, validation display, etc. */}
        <button type="submit">Save Profile</button>
      </form>
    </div>
  );
}

Following SRP:

// Data fetching component
function UserProfileContainer() {
  const [user, setUser] = useState({});
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetchUserData()
      .then(data => {
        setUser(data);
        setIsLoading(false);
      })
      .catch(err => {
        setError(err);
        setIsLoading(false);
      });
  }, []);

  if (isLoading) return <LoadingSpinner />;
  if (error) return <ErrorMessage error={error} />;

  return <UserProfileForm user={user} />;
}

// Presentation and form handling component
function UserProfileForm({ user }) {
  const [formData, setFormData] = useState(user);

  const handleChange = (e) => {
    setFormData({...formData, [e.target.name]: e.target.value});
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    updateUserProfile(formData);
  };

  return (
    <div>
      <h1>{formData.name}'s Profile</h1>
      <form onSubmit={handleSubmit}>
        <ProfileField 
          label="Name" 
          name="name" 
          value={formData.name} 
          onChange={handleChange} 
        />
        <ProfileField 
          label="Email" 
          name="email" 
          type="email" 
          value={formData.email} 
          onChange={handleChange} 
        />
        <BioField 
          value={formData.bio} 
          onChange={handleChange} 
        />
        <button type="submit">Save Profile</button>
      </form>
    </div>
  );
}

// Reusable form field component
function ProfileField({ label, name, type = "text", value, onChange }) {
  return (
    <div className="form-field">
      <label htmlFor={name}>{label}</label>
      <input 
        id={name}
        name={name}
        type={type}
        value={value}
        onChange={onChange}
      />
    </div>
  );
}

This breakdown creates:

• Container component handling data fetching

• Form component handling form state and submission

• Field component for reusable input rendering

Each has a single responsibility and reason to change.

2. Open/Closed Principle (OCP)

React components should be open for extension but closed for modification. This means you should be able to add new functionality without changing existing components.

Example: Extensible Button Component

Following OCP:

// Base Button component that's closed for modification
function Button({ children, onClick, ...props }) {
  return (
    <button 
      onClick={onClick} 
      className="btn" 
      {...props}
    >
      {children}
    </button>
  );
}

// Extended components without modifying the base Button
function PrimaryButton(props) {
  return <Button className="btn btn-primary" {...props} />;
}

function DangerButton(props) {
  return <Button className="btn btn-danger" {...props} />;
}

function IconButton({ icon, ...props }) {
  return (
    <Button {...props}>
      <span className="icon">{icon}</span>
      {props.children}
    </Button>
  );
}

// Further extension via composition
function SubmitButton(props) {
  return (
    <PrimaryButton type="submit" {...props}>
      Submit
    </PrimaryButton>
  );
}

The base Button component is closed for modification but open for extension through composition, props spreading, and specialization.

Example: Render Props Pattern for OCP

// A component that's closed for modification but extendable
function DataFetcher({ url, render }) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    setLoading(true);
    fetch(url)
      .then(response => response.json())
      .then(data => {
        setData(data);
        setLoading(false);
      })
      .catch(error => {
        setError(error);
        setLoading(false);
      });
  }, [url]);

  return render({ data, loading, error });
}

// Different ways to extend without modifying DataFetcher
function UserList() {
  return (
    <DataFetcher 
      url="/api/users" 
      render={({ data, loading, error }) => {
        if (loading) return <LoadingSpinner />;
        if (error) return <ErrorMessage error={error} />;
        return <UserTable users={data} />;
      }} 
    />
  );
}

function ProductDetails({ productId }) {
  return (
    <DataFetcher 
      url={`/api/products/${productId}`} 
      render={({ data, loading, error }) => {
        if (loading) return <ProductSkeleton />;
        if (error) return <ProductError />;
        return <ProductView product={data} />;
      }} 
    />
  );
}

The DataFetcher component is closed for modification but can be extended for many different use cases through the render prop pattern.

3. Liskov Substitution Principle (LSP)

In React, this means child components should be substitutable for their parent components without affecting the correctness of the application.

Example: Component Inheritance/Composition

// Base Card component with a consistent interface
function Card({ title, children, footer }) {
  return (
    <div className="card">
      {title && <div className="card-header">{title}</div>}
      <div className="card-body">{children}</div>
      {footer && <div className="card-footer">{footer}</div>}
    </div>
  );
}

// UserCard extends Card functionality while remaining substitutable
function UserCard({ user, ...props }) {
  return (
    <Card 
      title={<UserHeader user={user} />}
      footer={<UserFooter user={user} />}
      {...props}
    >
      <UserDetails user={user} />
    </Card>
  );
}

// ProductCard also extends Card and remains substitutable
function ProductCard({ product, ...props }) {
  return (
    <Card 
      title={<ProductHeader product={product} />}
      footer={<PriceFooter price={product.price} />}
      {...props}
    >
      <ProductDetails product={product} />
    </Card>
  );
}

// This function can work with ANY type of Card component
function CardGrid({ items, CardComponent }) {
  return (
    <div className="card-grid">
      {items.map(item => (
        <CardComponent key={item.id} {...item} />
      ))}
    </div>
  );
}

// Usage
<CardGrid items={users} CardComponent={UserCard} />
<CardGrid items={products} CardComponent={ProductCard} />

Any type of Card component can be substituted in the CardGrid without breaking its functionality, adhering to LSP.

4. Interface Segregation Principle (ISP)

Components should not be forced to depend on props they don't use. It's better to have multiple smaller, focused components than one large component with many props.

Example: Breaking Down a Complex Component

Violating ISP:

function DataTable({ 
  data, 
  columns, 
  sortable, 
  sortColumn, 
  sortDirection, 
  onSort,
  filterable,
  filters,
  onFilter,
  pageable,
  page,
  pageSize,
  totalPages,
  onPageChange,
  selectable,
  selectedItems,
  onSelect,
  editable,
  onEdit,
  deletable,
  onDelete,
  // Many more props...
}) {
  // Complex implementation handling all these features
  return (
    <div>
      {/* Table implementation */}
    </div>
  );
}

Following ISP:

// Core table component with minimal interface
function DataTable({ data, columns, children }) {
  return (
    <table>
      <thead>
        <tr>
          {columns.map(column => (
            <th key={column.key}>{column.title}</th>
          ))}
        </tr>
      </thead>
      <tbody>
        {data.map(row => (
          <tr key={row.id}>
            {columns.map(column => (
              <td key={column.key}>{row[column.key]}</td>
            ))}
          </tr>
        ))}
      </tbody>
      {children}
    </table>
  );
}

// Specialized components with focused interfaces
function SortableHeader({ column, sortDirection, onSort }) {
  return (
    <th onClick={() => onSort(column.key)}>
      {column.title} {sortDirection === 'asc' ? '↑' : '↓'}
    </th>
  );
}

function TablePagination({ page, totalPages, onPageChange }) {
  return (
    <tfoot>
      <tr>
        <td colSpan="100%">
          <div className="pagination">
            <button onClick={() => onPageChange(page - 1)} disabled={page === 1}>
              Previous
            </button>
            <span>Page {page} of {totalPages}</span>
            <button onClick={() => onPageChange(page + 1)} disabled={page === totalPages}>
              Next
            </button>
          </div>
        </td>
      </tr>
    </tfoot>
  );
}

// Compose them as needed without forcing unused props
function ProductTable({ products }) {
  // Only implement pagination, no sorting or filtering
  const [page, setPage] = useState(1);
  const pageSize = 10;
  const totalPages = Math.ceil(products.length / pageSize);
  const displayProducts = products.slice((page - 1) * pageSize, page * pageSize);

  return (
    <DataTable 
      data={displayProducts} 
      columns={productColumns}
    >
      <TablePagination 
        page={page} 
        totalPages={totalPages} 
        onPageChange={setPage} 
      />
    </DataTable>
  );
}

Each component has a focused interface with only the props it needs, following ISP.

5. Dependency Inversion Principle (DIP)

High-level components should not depend on low-level components. Both should depend on abstractions.

Example: Isolating API Dependencies

Violating DIP:

function UserList() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    // Direct dependency on API implementation
    fetch('/api/users')
      .then(response => response.json())
      .then(data => setUsers(data));
  }, []);

  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

Following DIP:

// Abstract API service
const userService = {
  getUsers: () => fetch('/api/users').then(res => res.json()),
  getUser: (id) => fetch(`/api/users/${id}`).then(res => res.json()),
  updateUser: (user) => fetch(`/api/users/${user.id}`, {
    method: 'PUT',
    body: JSON.stringify(user),
    headers: { 'Content-Type': 'application/json' }
  }).then(res => res.json())
};

// Custom hook that depends on abstractions
function useUserData() {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    setLoading(true);
    userService.getUsers()
      .then(data => {
        setUsers(data);
        setLoading(false);
      })
      .catch(err => {
        setError(err);
        setLoading(false);
      });
  }, []);

  return { users, loading, error };
}

// Component depends on the abstraction, not the implementation
function UserList() {
  const { users, loading, error } = useUserData();

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;

  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

Example: Dependency Injection in React with Context

// Create an abstract API context
const ApiContext = React.createContext(null);

// Provider component that injects the dependency
function ApiProvider({ apiClient, children }) {
  return (
    <ApiContext.Provider value={apiClient}>
      {children}
    </ApiContext.Provider>
  );
}

// Hook to consume the abstraction
function useApi() {
  const api = useContext(ApiContext);
  if (!api) {
    throw new Error('useApi must be used within an ApiProvider');
  }
  return api;
}

// Component that depends on the abstraction
function UserList() {
  const api = useApi();
  const [users, setUsers] = useState([]);

  useEffect(() => {
    api.getUsers().then(setUsers);
  }, [api]);

  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

// App setup with dependency injection
function App() {
  // We can inject different implementations
  const productionApi = {
    getUsers: () => fetch('/api/users').then(res => res.json())
  };

  const mockApi = {
    getUsers: () => Promise.resolve([
      { id: 1, name: 'Test User' }
    ])
  };

  // Choose which implementation to inject
  const api = process.env.NODE_ENV === 'test' ? mockApi : productionApi;

  return (
    <ApiProvider apiClient={api}>
      <UserList />
    </ApiProvider>
  );
}

This approach follows DIP by:

1. Creating an abstraction (the API context)

2. High-level components (UserList) depend on the abstraction, not concrete implementations

3. We can easily inject different implementations without changing the components

Practical Applications of SOLID in React

Custom Hooks for SRP and DIP

// Separate concerns with custom hooks
function useUserApi() {
  const api = useApi();
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);

  const fetchUsers = useCallback(() => {
    setLoading(true);
    api.getUsers()
      .then(data => {
        setUsers(data);
        setLoading(false);
      })
      .catch(err => {
        setError(err);
        setLoading(false);
      });
  }, [api]);

  useEffect(() => {
    fetchUsers();
  }, [fetchUsers]);

  return { users, loading, error, refetch: fetchUsers };
}

// Component just handles presentation
function UserList() {
  const { users, loading, error, refetch } = useUserApi();

  if (loading) return <LoadingSpinner />;
  if (error) return <ErrorMessage error={error} onRetry={refetch} />;

  return (
    <div>
      <h2>Users</h2>
      <ul>
        {users.map(user => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </div>
  );
}

Higher-Order Components for OCP

// HOC that adds loading state to any component
function withLoading(WrappedComponent) {
  return function WithLoadingComponent({ isLoading, ...props }) {
    if (isLoading) return <LoadingSpinner />;
    return <WrappedComponent {...props} />;
  };
}

// Usage
const UserListWithLoading = withLoading(UserList);

Compound Components for ISP

function Tabs({ children, defaultTab }) {
  const [activeTab, setActiveTab] = useState(defaultTab);

  return (
    <TabsContext.Provider value={{ activeTab, setActiveTab }}>
      <div className="tabs-container">
        {children}
      </div>
    </TabsContext.Provider>
  );
}

function TabList({ children }) {
  return <div className="tab-list">{children}</div>;
}

function Tab({ id, children }) {
  const { activeTab, setActiveTab } = useContext(TabsContext);

  return (
    <button 
      className={activeTab === id ? 'active' : ''} 
      onClick={() => setActiveTab(id)}
    >
      {children}
    </button>
  );
}

function TabPanels({ children }) {
  return <div className="tab-panels">{children}</div>;
}

function TabPanel({ id, children }) {
  const { activeTab } = useContext(TabsContext);

  if (activeTab !== id) return null;
  return <div className="tab-panel">{children}</div>;
}

// Assign as compound components
Tabs.TabList = TabList;
Tabs.Tab = Tab;
Tabs.TabPanels = TabPanels;
Tabs.TabPanel = TabPanel;

// Usage
function App() {
  return (
    <Tabs defaultTab="users">
      <Tabs.TabList>
        <Tabs.Tab id="users">Users</Tabs.Tab>
        <Tabs.Tab id="products">Products</Tabs.Tab>
      </Tabs.TabList>

      <Tabs.TabPanels>
        <Tabs.TabPanel id="users">
          <UserList />
        </Tabs.TabPanel>
        <Tabs.TabPanel id="products">
          <ProductList />
        </Tabs.TabPanel>
      </Tabs.TabPanels>
    </Tabs>
  );
}

Benefits of SOLID in React

Applying SOLID principles to React applications yields several benefits:

1. Maintainability: Components with single responsibilities are easier to understand and modify.

2. Reusability: Well-designed components with clear interfaces can be reused across projects.

3. Testability: Components that follow SOLID are generally easier to test in isolation.

4. Scalability: Applications built with SOLID principles can grow without becoming unwieldy.

5. Adaptability: When requirements change, SOLID components are easier to adapt.

Challenges and Considerations

1. Over-engineering: Be careful not to break down components too much, which can lead to "prop drilling" or unnecessary complexity.

2. Performance: Too many small components might impact performance due to the overhead of component mounting/unmounting.

3. Learning curve: SOLID principles require discipline and understanding, which might slow down initial development.

4. Team alignment: The whole team needs to understand and follow these principles for consistency.

Conclusion

The SOLID principles provide a robust framework for designing React applications. By following these principles, you can create more maintainable, scalable, and testable React code. Each principle addresses different aspects of component design:

• Single Responsibility: Each component should do one thing well

• Open/Closed: Extend components through composition without modifying them

• Liskov Substitution: Component variants should be interchangeable

• Interface Segregation: Components should have focused, minimal props

• Dependency Inversion: Components should depend on abstractions

When these principles are applied thoughtfully, they can significantly improve the quality and longevity of your React applications.

1. Single Responsibility Principle (SRP)

A function should do one thing and do it well.

JavaScript Example:

// Violating SRP - this function does too many things
function processUser(userData) {
  // Validate user data
  if (!userData.name || !userData.email) {
    throw new Error('Invalid user data');
  }

  // Save to database
  console.log(`Saving user ${userData.name} to database`);

  // Send welcome email
  console.log(`Sending welcome email to ${userData.email}`);

  return { success: true };
}

// Following SRP - each function has one responsibility
function validateUser(userData) {
  if (!userData.name || !userData.email) {
    throw new Error('Invalid user data');
  }
  return userData;
}

function saveUser(userData) {
  console.log(`Saving user ${userData.name} to database`);
  return userData;
}

function notifyUser(userData) {
  console.log(`Sending welcome email to ${userData.email}`);
  return userData;
}

// We can compose these functions when needed
function processUser(userData) {
  return notifyUser(saveUser(validateUser(userData)));
}

TypeScript Example:

interface UserData {
  name: string;
  email: string;
}

// Each function has a clear, single purpose
function validateUser(userData: UserData): UserData {
  if (!userData.name || !userData.email) {
    throw new Error('Invalid user data');
  }
  return userData;
}

function saveUser(userData: UserData): UserData {
  console.log(`Saving user ${userData.name} to database`);
  return userData;
}

function notifyUser(userData: UserData): UserData {
  console.log(`Sending welcome email to ${userData.email}`);
  return userData;
}

// These can be combined using function composition
const processUser = (userData: UserData): UserData => 
  notifyUser(saveUser(validateUser(userData)));

The SRP for functions means each function should have exactly one reason to change. In the improved example, if we need to modify how validation works, we only need to change the validateUser function without touching the other functions.

2. Open/Closed Principle (OCP)

Functions should be open for extension but closed for modification.

JavaScript Example:

// Violating OCP - we'd need to modify this function to add new shapes
function calculateArea(shape) {
  if (shape.type === 'rectangle') {
    return shape.width * shape.height;
  } else if (shape.type === 'circle') {
    return Math.PI * shape.radius * shape.radius;
  }
  // Need to modify this function for each new shape
}

// Following OCP - using a strategy pattern with functions
const areaStrategies = {
  rectangle: (shape) => shape.width * shape.height,
  circle: (shape) => Math.PI * shape.radius * shape.radius,
  // We can add new shapes by adding new functions here
  triangle: (shape) => (shape.base * shape.height) / 2
};

function calculateArea(shape) {
  if (!areaStrategies[shape.type]) {
    throw new Error(`Shape type ${shape.type} not supported`);
  }
  return areaStrategies[shape.type](shape);
}

// We can extend by adding new strategies without modifying calculateArea
areaStrategies['trapezoid'] = (shape) => 
  (shape.base1 + shape.base2) * shape.height / 2;

The OCP for functions means we can add new functionality without modifying existing functions. In the examples above, we can add support for new shapes without changing the calculateArea function.

3. Liskov Substitution Principle (LSP)

For functions, this means that if a function accepts a certain type of argument, any subtype of that argument should work correctly as well.

JavaScript Example:

// Parent type function
function printDetails(animal) {
  return `This animal makes a sound: ${animal.makeSound()}`;
}

// These adhere to the LSP
const dog = {
  makeSound: () => "Woof"
};

const cat = {
  makeSound: () => "Meow"
};

// LSP violation - this breaks the contract
const fish = {
  swim: () => "Swimming..."
  // Missing makeSound method
};

// Following LSP - ensuring consistent behavior
function makeSound(animal) {
  // Check if the method exists
  if (typeof animal.makeSound !== 'function') {
    throw new TypeError('Animal must have makeSound method');
  }
  return animal.makeSound();
}

TypeScript Example:

// Using interfaces to enforce the contract
interface Soundable {
  makeSound(): string;
}

// Function expecting a Soundable
function getAnimalSound(animal: Soundable): string {
  return animal.makeSound();
}

// These implementations satisfy the interface
const dog: Soundable = {
  makeSound: () => "Woof"
};

const cat: Soundable = {
  makeSound: () => "Meow"
};

// Using function types as substitutes
type SoundFunction = () => string;

function makeSound(soundFn: SoundFunction): string {
  return soundFn();
}

// These functions are substitutable
const barkSound: SoundFunction = () => "Woof";
const meowSound: SoundFunction = () => "Meow";

console.log(makeSound(barkSound)); // "Woof"
console.log(makeSound(meowSound)); // "Meow"

The LSP for functions means any function that fulfills the expected contract should be able to replace another function with the same contract without breaking the program.

4. Interface Segregation Principle (ISP)

Function parameters should be minimal, and callers should not be forced to provide parameters they don't care about.

JavaScript Example:

// Violating ISP - too many parameters that might not be used
function createUser(name, email, address, phoneNumber, birthDate, subscription) {
  // Logic to create user
  console.log(`Creating user ${name} with email ${email}`);
  if (address) console.log(`Address: ${address}`);
  if (phoneNumber) console.log(`Phone: ${phoneNumber}`);
  // and so on...
}

// Following ISP - using object parameters with defaults
function createUser({ name, email, ...options } = {}) {
  if (!name || !email) throw new Error('Name and email are required');

  console.log(`Creating user ${name} with email ${email}`);

  if (options.address) console.log(`Address: ${options.address}`);
  if (options.phoneNumber) console.log(`Phone: ${options.phoneNumber}`);
  // Optional parameters don't clutter the interface
}

// Or breaking into more focused functions
function createBasicUser(name, email) {
  console.log(`Creating user ${name} with email ${email}`);
  return { name, email };
}

function addUserAddress(user, address) {
  console.log(`Adding address to user ${user.name}`);
  return { ...user, address };
}

function addUserPhone(user, phoneNumber) {
  console.log(`Adding phone number to user ${user.name}`);
  return { ...user, phoneNumber };
}

TypeScript Example:

// Using optional parameters and interfaces
interface UserRequired {
  name: string;
  email: string;
}

interface UserOptional {
  address?: string;
  phone?: string;
  birthDate?: Date;
  preferences?: Record<string, any>;
}

type User = UserRequired & UserOptional;

// Function only requires what it needs
function createUser(required: UserRequired, optional: Partial<UserOptional> = {}): User {
  return { ...required, ...optional };
}

// Functions focused on specific operations
function validateEmail(email: string): boolean {
  return email.includes('@');
}

function formatUserAddress(address: string): string {
  return address.toUpperCase();
}

// Usage examples
const user = createUser({ 
  name: 'John', 
  email: 'john@example.com' 
});

const userWithDetails = createUser(
  { name: 'Alice', email: 'alice@example.com' },
  { address: '123 Main St', phone: '555-1234' }
);

The ISP for functions means we should create smaller, more focused functions that only require the parameters they actually need, making them easier to use and test.

5. Dependency Inversion Principle (DIP)

High-level functions should not depend on low-level functions. Both should depend on abstractions.

JavaScript Example:

// Violating DIP - direct dependency on low-level function
function saveUserToMySQL(user) {
  console.log(`Saving ${user.name} to MySQL database`);
  // MySQL-specific code here
}

function createUser(userData) {
  const user = { name: userData.name, email: userData.email };
  saveUserToMySQL(user); // Direct dependency on MySQL implementation
  return user;
}

// Following DIP - passing the dependency as a function parameter
function createUser(userData, saveFunction) {
  const user = { name: userData.name, email: userData.email };
  saveFunction(user); // Depends on abstraction, not implementation
  return user;
}

// Different implementations that can be injected
function saveUserToMySQL(user) {
  console.log(`Saving ${user.name} to MySQL database`);
}

function saveUserToMongoDB(user) {
  console.log(`Saving ${user.name} to MongoDB`);
}

// Usage
createUser({ name: 'John', email: 'john@example.com' }, saveUserToMySQL);
createUser({ name: 'Jane', email: 'jane@example.com' }, saveUserToMongoDB);

TypeScript Example:

// Using function types as abstractions
interface User {
  name: string;
  email: string;
}

// Function type definition (the abstraction)
type SaveUserFn = (user: User) => Promise<User>;

// High-level function depends on abstraction
async function createUser(
  userData: Partial<User>, 
  saveUser: SaveUserFn
): Promise<User> {
  if (!userData.name || !userData.email) {
    throw new Error('Name and email are required');
  }

  const user: User = { 
    name: userData.name, 
    email: userData.email 
  };

  return await saveUser(user);
}

// Low-level implementations
const saveToMySQL: SaveUserFn = async (user: User): Promise<User> => {
  console.log(`Saving ${user.name} to MySQL database`);
  // MySQL-specific code would go here
  return user;
};

const saveToMongoDB: SaveUserFn = async (user: User): Promise<User> => {
  console.log(`Saving ${user.name} to MongoDB`);
  // MongoDB-specific code would go here
  return user;
};

// We can easily inject different dependencies
createUser({ name: 'John', email: 'john@example.com' }, saveToMySQL);
createUser({ name: 'Jane', email: 'jane@example.com' }, saveToMongoDB);

The DIP for functions means high-level functions should take adapter functions as parameters rather than importing and using low-level functions directly. This dependency injection allows for more flexible, testable code.

Practical Applications in Functional JavaScript/TypeScript

These principles are particularly relevant in functional programming approaches:

1. Single Responsibility: Pure functions that do one thing well

2. Open/Closed: Function composition and higher-order functions to extend behavior

3. Liskov Substitution: Function types and consistent interfaces for callbacks

4. Interface Segregation: Partial application and currying to create more focused function interfaces

5. Dependency Inversion: Dependency injection through function parameters

Example of All Principles Together in Functional Style:

// User types
interface UserData {
  name: string;
  email: string;
  address?: string;
}

// Database abstraction (for DIP)
type DatabaseFn = (data: any) => Promise<any>;

// Notification abstraction (for DIP)
type NotifyFn = (user: UserData) => Promise<void>;

// Single Responsibility functions
const validateUserData = (data: Partial<UserData>): UserData => {
  if (!data.name || !data.name.trim()) {
    throw new Error('Name is required');
  }
  if (!data.email || !data.email.includes('@')) {
    throw new Error('Valid email is required');
  }

  return data as UserData;
};

// Open for extension with different database implementations
const createSaveUserFn = (db: DatabaseFn) => {
  return async (userData: UserData): Promise<UserData> => {
    await db(userData);
    return userData;
  };
};

// Open for extension with different notification strategies
const createNotifyUserFn = (notifier: NotifyFn) => {
  return async (userData: UserData): Promise<UserData> => {
    await notifier(userData);
    return userData;
  };
};

// High-level function that's closed for modification but depends on abstractions
const processUser = async (
  userData: Partial<UserData>,
  saveUser: (user: UserData) => Promise<UserData>,
  notifyUser: (user: UserData) => Promise<UserData>
): Promise<UserData> => {
  // Pipeline of operations
  const validatedUser = validateUserData(userData);
  const savedUser = await saveUser(validatedUser);
  return await notifyUser(savedUser);
};

// Concrete implementations
const saveToDatabase: DatabaseFn = async (data) => {
  console.log(`Saving to database: ${JSON.stringify(data)}`);
  return data;
};

const sendWelcomeEmail: NotifyFn = async (user) => {
  console.log(`Sending welcome email to ${user.email}`);
};

// Compose the full functionality
const saveUser = createSaveUserFn(saveToDatabase);
const notifyUser = createNotifyUserFn(sendWelcomeEmail);

// Usage
processUser(
  { name: 'John Doe', email: 'john@example.com' }, 
  saveUser, 
  notifyUser
).then(user => {
  console.log(`User processing complete: ${user.name}`);
});

This functional approach leverages all SOLID principles:

• Each function has a single responsibility

• We extend functionality by creating new functions, not modifying existing ones

• Functions with the same signature are substitutable

• Function parameters are minimal and focused

• High-level functions depend on abstractions passed as parameters

By applying SOLID principles to functions, you can create more maintainable, flexible, and testable code in JavaScript and TypeScript, particularly in functional programming paradigms or in modern frameworks that emphasize component composition.

Creating a HashSet

To use a HashSet, you need to include the HashSet module from the standard collections library.

use std::collections::HashSet;

You can create a HashSet with the new method and make it mutable for modifications.

let mut my_set = HashSet::new();

By default, the type is inferred based on the inserted values, but you can also specify types explicitly.

let mut my_set: HashSet<String> = HashSet::new();

We can also create a hashset with default values using the from() method when creating it.

use std::collections::HashSet;

fn main() {
    // Create HashSet with default values using from() method
    let numbers1 = HashSet::from([2, 7, 8, 10]);
    println!("numbers = {:?}", numbers);
}

You can also turn a Vec into a HashSet using the into_iter() method(consumes ownership), followed by the collect() method.

use std::collections::HashSet;

fn main() {
    // Turning a vector into a HashSet
    let my_vec: Vec<i32> = vec![1, 2, 3, 4, 5];
    let my_set: HashSet<_> = my_vec.into_iter().collect();
    println!("{:?}", my_set);
}

Note that the type of the HashSet is inferred using the _ placeholder, but you can explicitly specify the type if needed.

Adding Elements to a HashSet

Elements can be added using the insert method, ensuring uniqueness within the set.

my_set.insert("apple");
my_set.insert("banana");
my_set.insert("orange");

Note: Adding a new value to the hashset is only possible when you declare variable as mut.

Printing a HashSet

To print the contents of a HashSet, use the println! macro with {:?} to display the elements.

println!("{:?}", my_set);

Difference Between HashSet and BTreeSet

In Rust, there are different types of sets available. HashSet uses a hash table for fast access, suitable for unordered data. On the other hand, BTreeSet uses a binary search tree, maintaining elements in sorted order.

Accessing, Removing, and Updating Elements

You can check if an element is present using contains, remove elements with remove, and update elements with replace.

if my_set.contains("apple") {
    println!("The set contains 'apple'");
}

my_set.remove("banana");
my_set.replace("apple", "grape");

Iterating over Values of a HashSet

There are several ways to iterate over the values of a HashSet, depending on whether you need references, mutable references, or want to consume and take ownership of the elements.

Iterating by References (Immutable Borrow)

Using an immutable reference to iterate over the values of a HashSet.

use std::collections::HashSet;

fn main() {
    let my_set: HashSet<i32> = vec![1, 2, 3, 4, 5].into_iter().collect();

    for value in my_set.iter() {
        println!("Reference to: {}", value);
    }
}

Here, the iter method is used to obtain an iterator over references to the elements.

Using method chaining with closures,

use std::collections::HashSet;

fn main() {
    let my_set: HashSet<i32> = vec![1, 2, 3, 4, 5].into_iter().collect();

    // Using .iter().for_each() to print each element
    my_set.iter().for_each(|&value| {
        println!("Reference to: {}", value);
    });
}

Here, he closure takes an immutable reference to each element in the HashSet and prints it. These methods doesn't consume the elements, and ownership remains with the HashSet.

Iterating by Mutable References (Mutable Borrow)

use std::collections::HashSet;

fn main() {
    let mut my_set: HashSet<i32> = vec![1, 2, 3, 4, 5].into_iter().collect();

    for value in my_set.iter_mut() {
        *value *= 2;  // Doubling each element in-place
    }

    println!("{:?}", my_set);
}

Here, the iter_mut method is used to obtain a mutable iterator, allowing modifications of the elements in the set.

Using method chaining with closures,

use std::collections::HashSet;

fn main() {
    let mut my_set: HashSet<i32> = vec![1, 2, 3, 4, 5].into_iter().collect();

    my_set.iter_mut().for_each(|value| {
        *value *= 2;
    });

    println!("{:?}", my_set);
}

Here, the closure takes a mutable reference to each element in the HashSet and doubles its value in-place. This allows modification of the elements in-place while still keeping ownership with the HashSet.

Consuming Iteration (Ownership Transfer)

Using the into_iter method to consume the elements of the HashSet.

for value in my_set.into_iter() {
    println!("Owned value: {}", value);
}

Here, into_iter is used to obtain an iterator that consumes the HashSet. The type of value is i32, indicating ownership transfer.

Using a for loop directly on the HashSet is concise but it will also consume and transfer ownership.

for value in my_set {
    println!("Owned value: {}", value);
}

Conclusion

HashSet in Rust provides a powerful way to store unique elements efficiently. Understanding how to create, modify, and iterate over a HashSet is essential for working with collections in Rust.

Introduction to HashMaps

A HashMap is a collection of key-value pairs, where each key is unique. Keys are used to index the values, allowing for fast lookups, inserts, and removals. HashMaps are useful when you need to associate one piece of data with another, such as mapping usernames to user IDs or storing configuration settings.

Creating a HashMap

To use HashMaps in Rust, you first need to import the HashMap type from the standard library:

use std::collections::HashMap;

You can then create a new, empty HashMap like so:

let mut my_map = HashMap::new();

The mut keyword is used to make the HashMap mutable, allowing you to add and remove elements.

Adding Elements

You can add key-value pairs to a HashMap using the insert method:

my_map.insert("key1", "value1");
my_map.insert("key2", "value2");

Each call to insert adds a new key-value pair to the HashMap.

Accessing Values

You can access values in a HashMap using their keys. Rust provides the get method, which returns an Option<&V> (an optional reference to the value) where V is the type of the values in the HashMap:

if let Some(value) = my_map.get("key1") {
    println!("Value for key1: {}", value);
}

This code prints the value associated with the key "key1" if it exists in the HashMap.

Printing HashMap

The {:?} format specifier is used for printing the debug representation of the HashMap. However, remember that a hash map does not guarantee the order of its elements.

use std::collections::HashMap;

struct City {
    name: String,
    population: HashMap<u32, u32>, // This will have the year and the population for the year
}

fn main() {
    let mut my_map = City {
        name: "India".to_string(),
        population: HashMap::new(), // empty HashMap
    };

    my_map.population.insert(1372, 3_250);
    my_map.population.insert(1851, 24_000);
    my_map.population.insert(2020, 437_619);


    for (year, population) in my_map.population {
        println!("{} {} {}.", year, my_map.name, population);
    }
}

Output (1st run):

1851 India 24000.
2020 India 437619.
1372 India 3250.

Output (2nd run):

2020 India 437619.
1851 India 24000.
1372 India 3250.

You can see that it's not in order. If you want a HashMap that you can sort, you can use a BTreeMap.

use std::collections::BTreeMap; // Just change HashMap to BTreeMap

struct City {
    name: String,
    population: BTreeMap<u32, u32>, // Just change HashMap to BTreeMap
}

fn main() {

    let mut my_map = City {
        name: "India".to_string(),
        population: BTreeMap::new(), // Just change HashMap to BTreeMap
    };

    my_map.population.insert(1372, 3_250);
    my_map.population.insert(1851, 24_000);
    my_map.population.insert(2020, 437_619);

    for (year, population) in my_map.population {
        println!("{} {} {}.", year, my_map.name, population);
    }
}

Output:

1372 India 3250.
1851 India 24000.
2020 India 437619.

Now the output will be always in order.

Removing Elements

To remove a key-value pair from a HashMap, you can use the remove method:

my_map.remove("key2");

This code removes the key-value pair with the key "key2" from the HashMap.

Updating Elements

If a HashMap already has a key when you try to put it in, it will overwrite its value.

my_map.insert("key1", "new_value1");

This line updates the value associated with the key "key1" to "new_value1" in the HashMap. If the key already existed, the insert method returns the previous value. Otherwise, it returns None.

Iterating Over a HashMap

You can iterate over the key-value pairs in a HashMap using a for loop:

for (key, value) in &my_map {
    println!("Key: {}, Value: {}", key, value);
}

This code prints each key-value pair in the HashMap.

HashMap Usage

• Fast Lookups: Hash maps provide fast and efficient lookups based on keys, with constant-time average-case complexity.

• Uniqueness of Keys: Keys in a hash map must be unique, ensuring that each key corresponds to at most one value.

• Associative Data Representation: Hash maps are well-suited for representing data with an associative relationship between keys and values, such as dictionaries.

• Dynamic Size: Hash maps can dynamically grow or shrink based on the number of elements they contain, adapting to changing data sets.

• Efficient Inserts and Removes: Hash maps offer efficient performance for inserting and removing key-value pairs, with constant-time average-case complexity.

Panic Situations

• Unordered Iteration: The order of items during iteration in a hash map is not guaranteed to be in any specific order, which can lead to unexpected behavior if order is relied upon.

• Borrowing and Ownership: Care must be taken when borrowing values from a hash map during iteration to avoid borrowing issues, especially when modifying the hash map concurrently.

• Missing Key Panics: Attempting to access a key that does not exist in a hash map using get and unwrapping the result may panic, necessitating careful handling of missing keys.

• Limitations of Hashing Functions: Custom types used as keys in a hash map must have a properly implemented Hash trait to avoid incorrect behavior or panics.

• Collision Handling: While rare, hash collisions can occur, where different keys produce the same hash value. Proper collision handling is necessary to ensure correct behavior in such cases.