How to Use Three.js for Interactive 3D Web Experiences

The web has evolved beyond flat, static content. Today, users expect engaging and immersive experiences, and 3D interactions are leading this transformation. One of the most powerful tools for creating 3D content on the web is Three.js — a JavaScript library that simplifies WebGL’s complexities.

In this article, I’ll guide you through building an interactive 3D web experience with Three.js, covering the fundamentals, practical tips, and real-world examples.

Why Three.js?

Three.js abstracts the complexities of WebGL, making it easier to create 3D graphics without diving into low-level APIs. It offers:
• A robust rendering engine.
• Support for lights, materials, and shadows.
• Tools for handling 3D models, textures, and animations.
• A vast ecosystem of plugins and examples.

Getting Started with Three.js

1. Setup Your Environment

You’ll need a basic web environment to get started. Create a new project and install Three.js:

npm install three

1. Initialize a Basic Scene

Every Three.js project starts with three key elements:
• A scene to hold objects.
• A camera to view the scene.
• A renderer to display the scene on the screen.

Here’s how you can set up a basic scene:

import * as THREE from 'three';  

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

// Set up the camera  
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);  
camera.position.z = 5;  

// Create the renderer  
const renderer = new THREE.WebGLRenderer();  
renderer.setSize(window.innerWidth, window.innerHeight);  
document.body.appendChild(renderer.domElement);  

// Add a simple cube  
const geometry = new THREE.BoxGeometry();  
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });  
const cube = new THREE.Mesh(geometry, material);  
scene.add(cube);  

// Animation loop  
function animate() {  
  requestAnimationFrame(animate);  
  cube.rotation.x += 0.01;  
  cube.rotation.y += 0.01;  
  renderer.render(scene, camera);  
}  

animate();  

Adding Interactivity

1. Mouse Interaction

You can add interactivity by using raycasting, which detects where the user’s pointer interacts with the scene.

const raycaster = new THREE.Raycaster();  
const mouse = new THREE.Vector2();  

document.addEventListener('mousemove', (event) => {  
  mouse.x = (event.clientX / window.innerWidth) * 2 - 1;  
  mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;  

  raycaster.setFromCamera(mouse, camera);  
  const intersects = raycaster.intersectObjects(scene.children);  

  if (intersects.length > 0) {  
    intersects[0].object.material.color.set(0xff0000);  
  }  
});  

1. Orbit Controls

Adding controls for rotating, zooming, and panning the scene is straightforward with OrbitControls:

import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';  
const controls = new OrbitControls(camera, renderer.domElement);  
controls.enableDamping = true;  

Enhancing the Experience

1. Lighting

Proper lighting makes a world of difference in your 3D scenes. Add a directional light:

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

1. Loading 3D Models

Use GLTFLoader to import complex 3D models:

import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';  

const loader = new GLTFLoader();  
loader.load('model.gltf', (gltf) => {  
  scene.add(gltf.scene);  
});  

1. Post-Processing

Use the EffectComposer for advanced effects like bloom or depth of field:

import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer';  
import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass';  
import { BloomPass } from 'three/examples/jsm/postprocessing/BloomPass';  

const composer = new EffectComposer(renderer);  
composer.addPass(new RenderPass(scene, camera));  
composer.addPass(new BloomPass(1.5));  

Case Study: Interactive 3D Dashboard

One of my projects involved creating a 3D dashboard using Three.js and React. Users could interact with rotating charts, animated models, and data visualizations. Here’s what made it special:
• Dynamic Data: Charts updated in real-time.
• User Engagement: Clicking on objects triggered detailed popups.
• Immersion: Ambient lighting and smooth transitions enhanced user experience.

Best Practices
1. Optimize for Performance:
• Use lower-polygon models for faster rendering.
• Limit the number of lights and shadows.
2. Test Across Devices:
Ensure your 3D experiences are responsive and functional on mobile devices.
3. Start Simple:
Begin with basic shapes and gradually add complexity.

Conclusion

Three.js unlocks the power of 3D for web developers, making it possible to create immersive and interactive experiences. Whether you’re building games, dashboards, or marketing content, Three.js provides the tools you need to succeed.

Are you excited to try Three.js in your next project? Share your thoughts and creations in the comments below! 🚀