Learn Threejs - 9 Code Examples & CST Typing Practice Test

Three.js is a popular open-source 3D JavaScript library that simplifies creating, displaying, and animating 3D graphics in web browsers using WebGL. It provides abstractions for cameras, lights, materials, geometries, and scene management, making 3D web development accessible and efficient.

View all 9 Threejs code examples →

Simple Three.js Scene Three.js Colored Cube Three.js Plane with Texture Three.js Sphere Scene Three.js Rotating Torus Three.js Orbit Controls Example Three.js Point Light Scene Three.js Multiple Objects Three.js Animated Spheres

Learn THREEJS with Real Code Examples

Updated Nov 26, 2025

Introduction & Fundamentals Setup & Configuration Architecture & Deep Internals Performance & Security Development Workflow Learning & Career Growth Business & Strategy Examples

Code Sample Descriptions

Simple Three.js Scene

# threejs/demo/main.js
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ canvas: document.getElementById('canvas') });
renderer.setSize(window.innerWidth, window.innerHeight);
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
camera.position.z = 5;
function animate() {
    requestAnimationFrame(animate);
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
    renderer.render(scene, camera);
}
animate();

A basic Three.js program that renders a spinning cube in a browser canvas.

Let’s Try →

Three.js Colored Cube

# threejs/demo/colored_cube.js
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ canvas: document.getElementById('canvas') });
renderer.setSize(window.innerWidth, window.innerHeight);
const geometry = new THREE.BoxGeometry();
const materials = [
    new THREE.MeshBasicMaterial({color: 0xff0000}),
    new THREE.MeshBasicMaterial({color: 0x00ff00}),
    new THREE.MeshBasicMaterial({color: 0x0000ff}),
    new THREE.MeshBasicMaterial({color: 0xffff00}),
    new THREE.MeshBasicMaterial({color: 0xff00ff}),
    new THREE.MeshBasicMaterial({color: 0x00ffff})
];
const cube = new THREE.Mesh(geometry, materials);
scene.add(cube);
camera.position.z = 5;
function animate() {
    requestAnimationFrame(animate);
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
    renderer.render(scene, camera);
}
animate();

A cube with different face colors rendered in Three.js.

Let’s Try →

Three.js Plane with Texture

# threejs/demo/texture_plane.js
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ canvas: document.getElementById('canvas') });
renderer.setSize(window.innerWidth, window.innerHeight);
const geometry = new THREE.PlaneGeometry(5, 5);
const texture = new THREE.TextureLoader().load('texture.jpg');
const material = new THREE.MeshBasicMaterial({ map: texture });
const plane = new THREE.Mesh(geometry, material);
scene.add(plane);
camera.position.z = 5;
renderer.render(scene, camera);

Displays a textured plane in Three.js.

Let’s Try →

Three.js Sphere Scene

# threejs/demo/sphere.js
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ canvas: document.getElementById('canvas') });
renderer.setSize(window.innerWidth, window.innerHeight);
const geometry = new THREE.SphereGeometry(1, 32, 32);
const material = new THREE.MeshBasicMaterial({ color: 0x0077ff });
const sphere = new THREE.Mesh(geometry, material);
scene.add(sphere);
camera.position.z = 5;
renderer.render(scene, camera);

Renders a sphere in Three.js.

Let’s Try →

Three.js Rotating Torus

# threejs/demo/torus.js
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ canvas: document.getElementById('canvas') });
renderer.setSize(window.innerWidth, window.innerHeight);
const geometry = new THREE.TorusGeometry(1, 0.4, 16, 100);
const material = new THREE.MeshBasicMaterial({ color: 0xff6600 });
const torus = new THREE.Mesh(geometry, material);
scene.add(torus);
camera.position.z = 5;
function animate() {
    requestAnimationFrame(animate);
    torus.rotation.x += 0.01;
    torus.rotation.y += 0.01;
    renderer.render(scene, camera);
}
animate();

Creates a rotating torus shape in Three.js.

Let’s Try →

Three.js Orbit Controls Example

# threejs/demo/orbit_controls.js
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ canvas: document.getElementById('canvas') });
renderer.setSize(window.innerWidth, window.innerHeight);
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
const controls = new THREE.OrbitControls(camera, renderer.domElement);
camera.position.z = 5;
function animate() {
    requestAnimationFrame(animate);
    controls.update();
    renderer.render(scene, camera);
}
animate();

Uses OrbitControls to allow interactive camera rotation.

Let’s Try →

Three.js Point Light Scene

# threejs/demo/point_light.js
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ canvas: document.getElementById('canvas') });
renderer.setSize(window.innerWidth, window.innerHeight);
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshStandardMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
const pointLight = new THREE.PointLight(0xffffff);
pointLight.position.set(5,5,5);
scene.add(pointLight);
camera.position.z = 5;
function animate() {
    requestAnimationFrame(animate);
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
    renderer.render(scene, camera);
}
animate();

Adds a point light to illuminate a cube.

Let’s Try →

Three.js Multiple Objects

# threejs/demo/multiple_cubes.js
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ canvas: document.getElementById('canvas') });
renderer.setSize(window.innerWidth, window.innerHeight);
const colors = [0xff0000, 0x00ff00, 0x0000ff];
for(let i=0;i<3;i++){
    const geometry = new THREE.BoxGeometry();
    const material = new THREE.MeshBasicMaterial({ color: colors[i] });
    const cube = new THREE.Mesh(geometry, material);
    cube.position.x = (i-1)*2;
    scene.add(cube);
}
camera.position.z = 5;
renderer.render(scene, camera);

Renders multiple cubes in the scene with different colors.

Let’s Try →

Three.js Animated Spheres

# threejs/demo/animated_spheres.js
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ canvas: document.getElementById('canvas') });
renderer.setSize(window.innerWidth, window.innerHeight);
const spheres = [];
for(let i=0;i<3;i++){
    const geometry = new THREE.SphereGeometry(0.5,32,32);
    const material = new THREE.MeshBasicMaterial({color: 0xff00ff});
    const sphere = new THREE.Mesh(geometry, material);
    sphere.position.x = (i-1)*2;
    scene.add(sphere);
    spheres.push(sphere);
}
camera.position.z = 5;
let t=0;
function animate(){
    t+=0.05;
    spheres.forEach((s,i)=>{ s.position.y = Math.sin(t+i); });
    requestAnimationFrame(animate);
    renderer.render(scene,camera);
}
animate();

Creates multiple spheres that bounce up and down.

Let’s Try →

Frequently Asked Questions about Threejs

What is Threejs?

What are the primary use cases for Threejs?

Interactive 3D websites and apps. Product visualization and configurators. Web-based games using WebGL. AR/VR experiences via WebXR. Scientific and architectural visualizations

What are the strengths of Threejs?

Simplifies WebGL 3D rendering. Large ecosystem with plugins and examples. Flexible and extensible. Active community support. Good performance for real-time 3D web apps

What are the limitations of Threejs?

Not as low-level as raw WebGL or WebGPU. Performance bottlenecks with very large scenes. Limited compute capabilities (no native GPU compute). Some advanced effects require custom shaders. Debugging can be challenging for complex scenes

How can I practice Threejs typing speed?

CodeSpeedTest offers 9+ real Threejs code examples for typing practice. You can measure your WPM, track accuracy, and improve your coding speed with guided exercises.

Learn Other Programming Languages

C React Python C++Rust TypeScript Kotlin PHP Java C#Ruby Mql Cql N1ql Cypher Gremlin Partiql Haskell Elixir Fsharp View all languages →

Code Sample Descriptions

Simple Three.js Scene

# threejs/demo/main.js
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ canvas: document.getElementById('canvas') });
renderer.setSize(window.innerWidth, window.innerHeight);
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
camera.position.z = 5;
function animate() {
    requestAnimationFrame(animate);
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
    renderer.render(scene, camera);
}
animate();

A basic Three.js program that renders a spinning cube in a browser canvas.

Let’s Try →

Three.js Colored Cube

# threejs/demo/colored_cube.js
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ canvas: document.getElementById('canvas') });
renderer.setSize(window.innerWidth, window.innerHeight);
const geometry = new THREE.BoxGeometry();
const materials = [
    new THREE.MeshBasicMaterial({color: 0xff0000}),
    new THREE.MeshBasicMaterial({color: 0x00ff00}),
    new THREE.MeshBasicMaterial({color: 0x0000ff}),
    new THREE.MeshBasicMaterial({color: 0xffff00}),
    new THREE.MeshBasicMaterial({color: 0xff00ff}),
    new THREE.MeshBasicMaterial({color: 0x00ffff})
];
const cube = new THREE.Mesh(geometry, materials);
scene.add(cube);
camera.position.z = 5;
function animate() {
    requestAnimationFrame(animate);
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
    renderer.render(scene, camera);
}
animate();

A cube with different face colors rendered in Three.js.

Let’s Try →

Three.js Plane with Texture

# threejs/demo/texture_plane.js
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ canvas: document.getElementById('canvas') });
renderer.setSize(window.innerWidth, window.innerHeight);
const geometry = new THREE.PlaneGeometry(5, 5);
const texture = new THREE.TextureLoader().load('texture.jpg');
const material = new THREE.MeshBasicMaterial({ map: texture });
const plane = new THREE.Mesh(geometry, material);
scene.add(plane);
camera.position.z = 5;
renderer.render(scene, camera);

Displays a textured plane in Three.js.

Let’s Try →

Three.js Sphere Scene

# threejs/demo/sphere.js
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ canvas: document.getElementById('canvas') });
renderer.setSize(window.innerWidth, window.innerHeight);
const geometry = new THREE.SphereGeometry(1, 32, 32);
const material = new THREE.MeshBasicMaterial({ color: 0x0077ff });
const sphere = new THREE.Mesh(geometry, material);
scene.add(sphere);
camera.position.z = 5;
renderer.render(scene, camera);

Renders a sphere in Three.js.

Let’s Try →

Three.js Rotating Torus

# threejs/demo/torus.js
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ canvas: document.getElementById('canvas') });
renderer.setSize(window.innerWidth, window.innerHeight);
const geometry = new THREE.TorusGeometry(1, 0.4, 16, 100);
const material = new THREE.MeshBasicMaterial({ color: 0xff6600 });
const torus = new THREE.Mesh(geometry, material);
scene.add(torus);
camera.position.z = 5;
function animate() {
    requestAnimationFrame(animate);
    torus.rotation.x += 0.01;
    torus.rotation.y += 0.01;
    renderer.render(scene, camera);
}
animate();

Creates a rotating torus shape in Three.js.

Let’s Try →

Three.js Orbit Controls Example

# threejs/demo/orbit_controls.js
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ canvas: document.getElementById('canvas') });
renderer.setSize(window.innerWidth, window.innerHeight);
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
const controls = new THREE.OrbitControls(camera, renderer.domElement);
camera.position.z = 5;
function animate() {
    requestAnimationFrame(animate);
    controls.update();
    renderer.render(scene, camera);
}
animate();

Uses OrbitControls to allow interactive camera rotation.

Let’s Try →

Three.js Point Light Scene

# threejs/demo/point_light.js
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ canvas: document.getElementById('canvas') });
renderer.setSize(window.innerWidth, window.innerHeight);
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshStandardMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
const pointLight = new THREE.PointLight(0xffffff);
pointLight.position.set(5,5,5);
scene.add(pointLight);
camera.position.z = 5;
function animate() {
    requestAnimationFrame(animate);
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
    renderer.render(scene, camera);
}
animate();

Adds a point light to illuminate a cube.

Let’s Try →

Three.js Multiple Objects

# threejs/demo/multiple_cubes.js
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ canvas: document.getElementById('canvas') });
renderer.setSize(window.innerWidth, window.innerHeight);
const colors = [0xff0000, 0x00ff00, 0x0000ff];
for(let i=0;i<3;i++){
    const geometry = new THREE.BoxGeometry();
    const material = new THREE.MeshBasicMaterial({ color: colors[i] });
    const cube = new THREE.Mesh(geometry, material);
    cube.position.x = (i-1)*2;
    scene.add(cube);
}
camera.position.z = 5;
renderer.render(scene, camera);

Renders multiple cubes in the scene with different colors.

Let’s Try →

Three.js Animated Spheres

# threejs/demo/animated_spheres.js
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ canvas: document.getElementById('canvas') });
renderer.setSize(window.innerWidth, window.innerHeight);
const spheres = [];
for(let i=0;i<3;i++){
    const geometry = new THREE.SphereGeometry(0.5,32,32);
    const material = new THREE.MeshBasicMaterial({color: 0xff00ff});
    const sphere = new THREE.Mesh(geometry, material);
    sphere.position.x = (i-1)*2;
    scene.add(sphere);
    spheres.push(sphere);
}
camera.position.z = 5;
let t=0;
function animate(){
    t+=0.05;
    spheres.forEach((s,i)=>{ s.position.y = Math.sin(t+i); });
    requestAnimationFrame(animate);
    renderer.render(scene,camera);
}
animate();

Creates multiple spheres that bounce up and down.

Let’s Try →

Frequently Asked Questions about Threejs

What is Threejs?

What are the primary use cases for Threejs?

Interactive 3D websites and apps. Product visualization and configurators. Web-based games using WebGL. AR/VR experiences via WebXR. Scientific and architectural visualizations

What are the strengths of Threejs?

Simplifies WebGL 3D rendering. Large ecosystem with plugins and examples. Flexible and extensible. Active community support. Good performance for real-time 3D web apps

What are the limitations of Threejs?

How can I practice Threejs typing speed?

CodeSpeedTest offers 9+ real Threejs code examples for typing practice. You can measure your WPM, track accuracy, and improve your coding speed with guided exercises.