RENDERING A
3D CUBE

Create and render a rotating 3D cube in the browser using Three.js — the foundation of every 3D web project.

3D Cube rendered with Three.js

By Shane Brumback · May 26, 2026 · Beginner Level

Introduction

The humble 3D cube is where every Three.js developer starts. It's the "Hello World" of 3D web development — simple enough to understand in minutes, but it teaches you the core concepts that power every Three.js application: scenes, cameras, renderers, geometry, materials, lighting, and the animation loop.

In this tutorial, you'll create a smooth rotating cube with realistic lighting using Three.js. The entire demo runs in under 50 lines of JavaScript and works in any modern browser with no build tools or plugins required. Once you understand how this cube works, you have the foundation to build anything — from particle systems to full 3D games.

Three.js abstracts away the complexity of raw WebGL (which requires hundreds of lines just to draw a triangle) and gives you a clean, intuitive API. You define what you want to see, and Three.js handles the GPU-level rendering for you.

What You'll Learn

  • Setting up a Three.js scene, camera, and WebGL renderer
  • Creating 3D geometry with BoxGeometry
  • Applying materials that respond to light (MeshPhongMaterial)
  • Adding ambient and directional lighting
  • Building the animation loop with requestAnimationFrame
  • Handling window resize for responsive 3D

Prerequisites

Basic HTML and JavaScript. If you know what a <script> tag does and how to create a variable, you're ready. No 3D or WebGL experience needed.