YOUR FIRST THREE.JS SCENE
SPINNING CUBE

Build a colorful 3D spinning cube with lighting and smooth animation — your gateway into the world of Three.js and WebGL.

By Shane Brumback · May 26, 2026 · Beginner Level

Frequently Asked Questions

How do you get started with Three.js?

Include the Three.js library via CDN or npm, create an HTML file with a script tag, and set up the three core components: a Scene, a PerspectiveCamera, and a WebGLRenderer. Add a simple mesh (like a cube) and an animation loop. The entire setup takes under 30 lines of code.

What is the minimum code needed for a Three.js spinning cube?

You need about 20-30 lines: create a scene, camera, and renderer. Create a BoxGeometry + MeshStandardMaterial, combine into a Mesh, add to scene. Add a light. Write an animate() function that rotates the cube and calls renderer.render(), then start it with requestAnimationFrame.

What is requestAnimationFrame and why is it used in Three.js?

requestAnimationFrame is a browser API that calls your function before the next screen repaint (~60 times per second). Unlike setInterval, it automatically pauses when the tab is hidden, syncs with the display refresh rate, and provides smooth frame timing. Every Three.js animation loop uses it.

Do you need to know WebGL to use Three.js?

No. Three.js completely abstracts WebGL behind a high-level API. You work with concepts like Scene, Camera, Mesh, Geometry, and Material — never writing raw shader code or managing GPU buffers directly. Three.js handles all the WebGL calls internally. Basic JavaScript knowledge is the only prerequisite.

Introduction

Three.js is the most popular JavaScript library for creating 3D graphics in the browser. It abstracts away the complexity of raw WebGL and gives you a clean, intuitive API to build everything from simple spinning shapes to full 3D games and interactive experiences — all running directly in a web page with no plugins or downloads required.

In this tutorial, you'll create your very first Three.js scene from scratch. We'll build a colorful cube that spins smoothly in 3D space, lit by a point light that casts soft shadows. The entire demo is under 100 lines of code and runs in any modern browser. This is the foundation that every Three.js project builds upon — once you understand scenes, cameras, renderers, meshes, and the animation loop, you can build anything.

No prior 3D experience is needed. If you can write basic HTML and JavaScript, you're ready to start. By the end of this tutorial, you'll have a working 3D scene and a solid understanding of how Three.js renders frames to the screen.

What You'll Learn

  • How to set up a Three.js scene, camera, and renderer
  • Creating 3D geometry (BoxGeometry) and materials (MeshStandardMaterial)
  • Adding lighting to make objects visible and realistic
  • The animation loop pattern (requestAnimationFrame)
  • Handling window resize for responsive 3D

Prerequisites

Basic HTML and JavaScript knowledge. You should know what a <script> tag is and how variables and functions work. No 3D or WebGL experience needed — we start from zero.