Back to Tools

Three.js Previewer

Create and preview your Three.js 3D scenes in real-time with live code editing.

Three.js Studio

Real-time 3D scene editor

WebGL Powered
Loading editor...
3D Preview

Loading Three.js...

Three.js Code Editor

Write Three.js JavaScript code with full access to the Three.js library. Changes are applied in real-time to the 3D scene.

Available Globals:

  • THREE - Complete Three.js library
  • scene - Main scene object
  • camera - Perspective camera

Helper Functions:

  • createMesh() - Add mesh to scene
  • createLight() - Add light to scene
  • clock - Time management

Quick Tips

Animation:

- Use requestAnimationFrame

- Access time: clock.getElapsedTime()

Scene Setup:

- Camera at (0, 0, 5)

- Ambient + directional lighting

- Dark scene background