library/three.js
A three.js Online Editor and Playground with Live WebGL
Write a three.js scene in JavaScript and watch the WebGL canvas update as you type — meshes, lights, materials and an animation loop, with npm and nothing to install.
import * as THREE from 'three';
const scene = new THREE.Scene();
const cam = new THREE.PerspectiveCamera(75, 1, 0.1, 100);
cam.position.z = 3;
const cube = new THREE.Mesh(
new THREE.BoxGeometry(),
new THREE.MeshNormalMaterial()
);
scene.add(cube);
renderer.setAnimationLoop(() => {
cube.rotation.x += 0.01;
renderer.render(scene, cam);
});01 platform
What running three.js in a tab actually gives you
The official three.js editor is a scene builder with a GUI. This is the other kind — a code editor where you write the scene in JavaScript and see it render — which is what you want when you are learning the API or building something the GUI cannot express.
-
Write the scene in code
A scene, a camera, a renderer and a mesh, expressed as JavaScript you control — not dragged in a panel. It is how three.js actually gets used in a project, so what you learn here transfers.
-
Live WebGL preview
The canvas re-runs on save, so a changed material, a new light or a tweaked animation loop shows up immediately. You iterate against the render, not against a mental model of it.
-
npm and the ecosystem
threeresolves from npm through esm.sh, and so do its add-ons — OrbitControls, loaders, post-processing — so you build a real scene, not a toy limited to the core library. -
A real project, not a snippet
Split a scene across modules, add TypeScript, keep assets in the tree, and commit with Git — the shape of an actual three.js project rather than a single editable file.
02 deep dive
A scene, a camera, a render loop
Every three.js project is the same three things plus a loop, and the editor is a good place to internalise that before anything gets complicated.
The scene holds everything. Meshes, lights and groups are added to a Scene; a PerspectiveCamera decides what you see. Change the camera position or a mesh's material and the preview reflects it on the next save.
The renderer draws to a canvas. A WebGLRenderer paints the scene to the preview's canvas. Here it is wired up for you, so you focus on the scene rather than on boilerplate that never changes.
The loop animates. setAnimationLoop runs your callback every frame — rotate a mesh, advance a simulation, poll controls — which is where a static scene becomes a moving one.
- scene
- new THREE.Scene()
- camera
- PerspectiveCamera
- renderer
- WebGLRenderer
- loop
- setAnimationLoop
const light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(2, 2, 5);
scene.add(light);
// swap to a lit material to see it
cube.material = new THREE.MeshStandardMaterial({
color: 0x3bd1c8, roughness: 0.4,
});03 pipeline
What happens between save and the first frame
Four stages, all client-side. Knowing where three loads and where WebGL takes over is what makes a black canvas debuggable.
-
Resolve
import * as THREE from 'three'is matched against the project's import map to an esm.sh URL, and any add-ons resolve the same way — a missing one is named here rather than failing at runtime. -
Compile
Your JavaScript or TypeScript is transformed in a worker. TypeScript types are stripped on the same fast pass, so a typed scene costs nothing extra to run.
-
Run
The module executes, builds the scene graph and starts the render loop. This is real three.js running against real WebGL, not a recorded preview.
-
Draw
The renderer paints to the preview's canvas each frame. Edit and save, and the canvas restarts with your change — the loop that makes iterating on a shader or a material quick.
04 features
What ships with a three.js project
Everything below is on the moment you open the three.js editor, which starts with an animated WebGL scene you can take apart.
-
npm for add-ons
OrbitControls, GLTFLoader, post-processing passes and helper libraries install from the npm panel and resolve through esm.sh, so a scene is not limited to the core module.
-
Live preview, four ways
Full width, split beside the code, in device frames, or in its own tab — useful when a scene needs the whole viewport or a second monitor.
-
TypeScript when you want it
three ships its own types; write
.tsand the editor strips them on the fast path, so an autocompleted, typed scene costs nothing at compile time. -
Multi-file scenes
Split geometry, materials and controls across modules the way a real project would, with a file tree, tabs and per-project history.
-
The VS Code engine
Monaco brings IntelliSense against three's types, multi-cursor and the command palette — the editing three.js code actually benefits from.
-
Real Git in the browser
Stage, commit and branch through isomorphic-git, offline, and import an existing three.js repository without leaving the tab.
05 deep dive
What the browser can and can't render
three.js runs entirely on your device's GPU here, which is a strength and a boundary worth stating plainly.
Geometry, materials and shaders all run. Anything three.js draws with WebGL — meshes, lights, custom GLSL shaders, post-processing — runs at your GPU's speed, the same as it would in a deployed page.
Big assets are yours to bring. A loader will fetch a model or texture from a URL, but there is no asset pipeline optimizing a 200 MB GLTF for you; keep assets reasonable, or host them and load by URL.
It is the client half. Anything that needs a server — a multiplayer backend, server-side rendering of a scene to an image — runs elsewhere. Everything that runs in a browser tab in production runs here.
- GPU
- your device
- shaders
- custom GLSL ok
- assets
- load by URL
- server
- elsewhere
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
new GLTFLoader().load(url, (gltf) => {
scene.add(gltf.scene);
});06 workflow
From an empty file to a spinning mesh
No install, no bundler, no dev server — the whole loop from a blank file to an animating WebGL scene.
- new project → three.js
- created scene.js · three resolved via esm.sh
- add a MeshStandardMaterial + light
- canvas repainted · cube now lit
- install three/addons OrbitControls
- import map updated · drag to orbit
- git commit -m "lit rotating cube"
- [main 8c22d1a] lit rotating cube · 2 files
-
Nothing to set up
No webpack, no dev server, no local three install — the scene runs the moment you save, against real WebGL.
-
The same loop on a tablet
WebGL runs on the device's GPU, so an iPad renders the scene the same way a laptop does, with nothing installed.
-
Share by link
Send a live preview URL and the recipient sees the scene running and can orbit it, not a screenshot.
07 ecosystem
three.js beside the rest of the toolkit
three.js is one of many things the editor runs — the same tab compiles a framework, runs a language and renders WebGL, per file.
08 languages
What the editor runs alongside three.js
A three.js scene sits beside everything else the editor compiles in the browser, renders natively, or executes on demand.
Compiled in your browser11
Zero build step. Transform runs on a Web Worker, so typing never blocks.
- JSX
- TSX
- TypeScript
- Vue SFC
- Svelte
- Angular (JIT)
- SolidJS
- SCSS
- Sass
- Less
- Pug
Rendered natively8
Straight to the live preview, no transform in the way.
- HTML
- CSS
- JavaScript
- JSON
- Markdown
- Jupyter (.ipynb)
- SVG
- YAML
Executed on demand22
70+ languages run through a self-hosted Piston engine. stdout, stderr, images and tracebacks land in the console.
- Python
- Java
- C
- C++
- C#
- Go
- Rust
- Ruby
- PHP
- Kotlin
- Swift
- Lua
- Scala
- Perl
- Haskell
- Elixir
- Dart
- R
- Julia
- SQLite
- Bash
- PowerShell
09 questions
three.js in the browser — common questions
Is this the official three.js scene editor?
No — this is a code editor and playground where you write the scene in JavaScript, not the GUI scene builder at threejs.org/editor. It is the right tool for learning the API and for scenes that code expresses better than a panel, and what you write transfers straight to a project.
Do I need a bundler or a local install for three.js?
No. three resolves from npm through esm.sh into a native import map, so import * as THREE from 'three' works with no webpack, no dev server and no node_modules. Opening the editor is the whole setup.
Can I install three.js add-ons like OrbitControls or loaders?
Yes. OrbitControls, GLTFLoader, post-processing passes and helper libraries all resolve through the npm panel and the import map, so a scene is not limited to the core module.
Does it use real WebGL?
Yes. The scene runs on your device's GPU through a real WebGLRenderer, so custom GLSL shaders, lighting and post-processing behave exactly as they would in a deployed page, at your hardware's speed.
Can I use TypeScript with three.js here?
Yes. three ships its own type definitions, so writing .ts gives you autocomplete and type-checking in the editor, and the types are stripped on the same fast pass that compiles the code.
Can I load big models and textures?
You can load a model or texture from a URL with the usual loaders, but there is no asset pipeline optimizing huge files for you. Keep assets reasonable or host them and load by URL, the same as you would on a real site.
Is this a good place to learn three.js?
Yes, because the setup that usually gets in the way is gone. The first thing you do is add a mesh and watch it render, then a light, then a loop — the concepts three.js is built on, with nothing to install first.
Do I need to install anything to use XCODX Studio?
No. XCODX Studio is a browser-based IDE — the editor, the compilers and the preview all run client-side. There is no download, no package manager to set up and no configuration file to write. Opening the editor is the whole setup step.
Where is my code stored?
In your own browser. Projects, file history and Git objects live in local storage on your device and are never uploaded to a server. That also means XCODX works offline: it is a Progressive Web App, so you can install it and keep coding with no connection.
Is XCODX Studio free?
Yes. The editor, the live preview, the 70+ language runtimes, npm installs, Git and the integrated terminal are all free to use.
Can I use XCODX on a tablet or Chromebook?
Yes. The editor is a responsive web app, so a Chromebook, an iPad or an Android tablet gets the same compilers and the same preview a laptop does — there is no desktop-only build, because there is no build to install at all. The layout adapts to the screen rather than shrinking a desktop UI into it.
Can I export a project or move it to my own machine?
Yes. Export the whole project as a zip with its folder structure intact and open it locally, or commit it and push. It is ordinary source on disk from that point on — no proprietary format and no lock-in, which is also why importing an existing repository from GitHub works the same way in reverse.
Nothing to install
Open the three.js editor now
A spinning, lit mesh on screen in under a minute — real WebGL, npm add-ons, with no account wall and nothing to install.