HOW TO LOAD A
THREE.JS SCENE
AND DRAW A DONUT

Complete beginner tutorial with live rotating donut demo and full working code.

Published April 25, 2026 • By Shane Brumback • Indie Forge Studio

live demo

Watch the glowing donut rotate smoothly in real time

Introduction

Three.js is one of the most powerful JavaScript libraries for creating 3D graphics directly in the browser. In this tutorial, you'll learn how to set up a Three.js scene and create a beautiful rotating donut using TorusGeometry.

Shop great deals on gaming supplies and accessories on Amazon. As an Amazon Associate I earn from qualifying purchases.

Full Working Code (Copy & Paste)

donut-threejs.html

<!DOCTYPE html>
<html><head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r134/three.min.js"></script>
</head><body style="margin:0;background:#0f172a;">
<div id="demo" style="width:100vw;height:100vh;"></div>
<script>
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x0f172a);

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

const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.getElementById('demo').appendChild(renderer.domElement);

const geometry = new THREE.TorusGeometry(10, 4, 16, 100);
const material = new THREE.MeshPhongMaterial({ color: 0x4ade80, shininess: 120 });
const torus = new THREE.Mesh(geometry, material);
scene.add(torus);

scene.add(new THREE.AmbientLight(0xffffff, 0.6));
const light = new THREE.PointLight(0x2ad1d6, 2);
light.position.set(25, 30, 40);
scene.add(light);

function animate() {
    requestAnimationFrame(animate);
    torus.rotation.x += 0.008;
    torus.rotation.y += 0.012;
    renderer.render(scene, camera);
}
animate();
</script></body></html>

Step-by-Step Explanation

1. Include Three.js

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r134/three.min.js"></script>

2. Create Scene, Camera & Renderer

const scene = new THREE.Scene();
scene.background = new THREE.Color(0x0f172a);

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

const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.getElementById('demo').appendChild(renderer.domElement);

3. Create the Donut

const geometry = new THREE.TorusGeometry(10, 4, 16, 100);
const material = new THREE.MeshPhongMaterial({ color: 0x4ade80, shininess: 120 });
const torus = new THREE.Mesh(geometry, material);
scene.add(torus);

4. Add Lighting

scene.add(new THREE.AmbientLight(0xffffff, 0.6));

const light = new THREE.PointLight(0x2ad1d6, 2);
light.position.set(25, 30, 40);
scene.add(light);

5. Animation Loop

function animate() {
    requestAnimationFrame(animate);
    torus.rotation.x += 0.008;
    torus.rotation.y += 0.012;
    renderer.render(scene, camera);
}
animate();

More 3D Projects

▶ PLAY MORE 3D GAMES

HOW TO LOAD A THREE.JS SCENE AND DRAW A DONUT