DJC2 - Day 5 - Creating Video Games

DJC > Daily > DJC2

What Is Three.js?

The library that brought 3D graphics from the gaming world… straight into the browser.

Three.js is one of the most important tools in the modern web ecosystem. It allows you to create real-time 3D graphics, animations, interactive experiences, and complete scenes —all using JavaScript and WebGL— with no additional installations.

Today, it powers:

  • 3D product visualizers,
  • cinematic websites,
  • browser-based video games,
  • interactive presentations,
  • scientific and architectural simulations,
  • and immersive VR/AR experiences.

Its greatest strength is that it simplifies 90% of the heavy lifting required for 3D programming, allowing you to focus on creativity.

What can you build with Three.js?

  • Render 3D models (OBJ, GLTF, FBX, etc.)
  • Create realistic lights, shadows, and materials
  • Add physics and animations
  • Build full interactive worlds navigable with the mouse
  • Integrate effects like particles, fog, reflections, and more
  • Create VR/AR experiences directly in the browser

Basic example: a 3D scene with an animated cube

import * as THREE from 'three';

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

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

const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshStandardMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

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

camera.position.z = 3;

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

animate();

This creates:

  • A 3D scene
  • A cube
  • Directional light
  • A basic animation
  • Real-time rendering

All with less than 40 lines of code.

Why use Three.js?

  • No heavy engines required
  • Works in any modern browser
  • Huge community
  • Supports custom shaders
  • Perfect for interactive or high-impact visual projects
  • Easily integrates with React, Svelte, Vue, and frameworks like React Three Fiber

In my current workflow, Three.js allows me to:

  • Prototype visual ideas quickly
  • Build interactive demos without external tools
  • Integrate 3D models directly into the web
  • Experiment with advanced animations and effects
  • Prepare visually appealing content for social media

Versions

v0.1.0

  • What is Three.js?

DJC > Daily > DJC2