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...
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