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

Editor

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

The three.js Editor (https://threejs.org/editor/) is a free, browser-based scene builder maintained by mrdoob. You can build scenes, drag-drop GLBs, tune materials and lights, and export a JSON scene that loads back into your app via THREE.ObjectLoader. Use it as a level editor for prototypes and a fast way to produce reference scenes without writing code.

Author in the editor, load the export in code

EXAMPLE
// 1) In the browser editor (https://threejs.org/editor/):
//    - drag a .glb onto the canvas, position cameras and lights
//    - tweak materials, shadows, fog
//    - File > Export Scene → scene.json
//    - File > Export GLB    → scene.glb (for runtimes that prefer glTF)

// 2) Load the JSON scene back in your app
import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';

const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(innerWidth, innerHeight);
renderer.outputColorSpace = THREE.SRGBColorSpace;
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.shadowMap.enabled = true;
document.body.appendChild(renderer.domElement);

const loader = new THREE.ObjectLoader();
const sceneJson = await fetch('/scene.json').then(r => r.json());
const scene = loader.parse(sceneJson);

// The editor exports a default camera, but you usually want your own
const camera = new THREE.PerspectiveCamera(60, innerWidth / innerHeight, 0.1, 200);
camera.position.set(4, 3, 6);
camera.lookAt(0, 0, 0);
const controls = new OrbitControls(camera, renderer.domElement);

// 3) Find named objects from the editor and wire them to runtime logic
const door = scene.getObjectByName('FrontDoor');
const sign = scene.getObjectByName('Sign');
sign.userData.url = 'https://example.com';   // userData survives the round trip

addEventListener('click', (e) => {
  const ray = new THREE.Raycaster();
  const v = new THREE.Vector2((e.clientX / innerWidth) * 2 - 1, -(e.clientY / innerHeight) * 2 + 1);
  ray.setFromCamera(v, camera);
  const hits = ray.intersectObjects(scene.children, true);
  if (hits[0]?.object === sign) location.href = sign.userData.url;
});

// 4) Live reload while authoring: open the editor, drag a folder onto it,
//    and serve scene.json from the dev server. Every export overwrites the
//    file; your app reloads with the latest scene without code changes.

renderer.setAnimationLoop(() => {
  controls.update();
  renderer.render(scene, camera);
});

Why it matters

Use the editor to set up lighting, materials, and post-processing tuning that is painful to iterate on in code. Once the look is locked in, export the scene and hand-write the gameplay layer on top — the editor is for what artists tune, not for what you script.

Tip: Tweak the snippet with Try it Yourself », then sit the quiz at the bottom of the page.

Example

Example
// The three.js playground uses esm.sh + a canvas.
Try it Yourself »

Discussion

Loading…