YOUR FIRST THREE.JS SCENE
SPINNING CUBE

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.