iwantcoding.com
🔥 Daily 👥 Rooms 🏆 Top Log in Sign up
« Previous

Three.js HOME

By · Reviewed & last updated · Part of Three.js Tutorial

Welcome to the iwantcoding.com Three.js Tutorial. Three.js is the most popular library for 3D on the web. It wraps WebGL (and now WebGPU) in a friendly Scene + Camera + Renderer API — so you can ship interactive 3D in the browser without writing raw GLSL.

What this tutorial covers

ChapterYou will learn
Three.js BasicsScenes, cameras, the renderer, meshes, geometries, materials, lights, the animation loop, OrbitControls.
Assets & EffectsTextures, glTF models, PBR materials, shadows, fog, environment maps, post-processing, GLSL shaders.
InteractivityRaycaster picking, physics (Rapier / Cannon), GSAP tweens, react-three-fiber, WebXR for VR / AR.
ExamplesRunnable snippets, quiz, exercises, bootcamp, certificate.

Who this is for

  • Web devs who want to add product visualisers, data viz, or hero scenes.
  • Game / interactive devs targeting the browser.
  • React devs — react-three-fiber turns Three.js into JSX components.
How to use this tutorial: read the chapter, run the example with Try it Yourself », do the exercise, then take the quiz at the bottom. Hit Mark complete when you're done — the sidebar will track your progress.

Example

Example
import * as THREE from 'three';
console.log('three.js', THREE.REVISION);
Try it Yourself »

Discussion

Loading…

« Previous