🎮ArcadeLab
🧊May 13, 2026

How do I publish a Three.js scene as a single file?

💡

Quick answer

Write your Three.js scene as one HTML file with all JavaScript inline. Add an ARCADELAB header with libraries: three. Paste at arcadelab.ai/publish. ArcadeLab injects Three.js automatically (r128, classic global API).

Three.js works beautifully as a single-file HTML scene as long as you stick to the classic global THREE API and avoid the ES-module distribution. That's exactly what ArcadeLab loads, so you get a working 3D scene with no build step.

What does a minimal Three.js scene look like on ArcadeLab?

<!--ARCADELAB
title: Three.js Cube
description: A spinning cube
libraries: three
emoji: 🧊
color: blue
-->
<!DOCTYPE html>
<html>
<head>
  <style>body { margin: 0; }</style>
</head>
<body>
  <script>
    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(75, innerWidth/innerHeight, 0.1, 1000);
    const renderer = new THREE.WebGLRenderer();
    renderer.setSize(innerWidth, innerHeight);
    document.body.appendChild(renderer.domElement);

    const geometry = new THREE.BoxGeometry();
    const material = new THREE.MeshBasicMaterial({ color: 0x44aaff });
    const cube = new THREE.Mesh(geometry, material);
    scene.add(cube);

    camera.position.z = 3;
    function animate() {
      requestAnimationFrame(animate);
      cube.rotation.x += 0.01;
      cube.rotation.y += 0.01;
      renderer.render(scene, camera);
    }
    animate();
  </script>
</body>
</html>

Can I load a 3D model file?

Not directly. Loaders like GLTFLoader need to fetch the model file over the network, and ArcadeLab's sandbox blocks all network requests. Two workarounds:

  • Build the geometry procedurally: use Three.js primitives (BoxGeometry, SphereGeometry, etc.) and modify them programmatically.
  • Embed the model inline: base64-encode a small GLB or convert to a JSON format and parse it directly. Practical only for very small models.

Is the global THREE namespace available?

Yes. ArcadeLab loads Three.js r128 from cdnjs, which exposes THREE as a global. Use new THREE.Scene(), new THREE.PerspectiveCamera(), and so on without imports.

How do I get a working Three.js scene from Claude or ChatGPT?

Use this prompt:

"Build a Three.js scene as a single self-contained HTML file. Use the global THREE namespace (Three.js r128). Don't include the Three.js CDN script tag — ArcadeLab injects it. Put an <!--ARCADELAB> header at the top with libraries: three. All JS inline. No external models or textures — build geometry procedurally and use solid colors."

What about react-three-fiber?

React-three-fiber is normally distributed as an ES module that needs bundling. ArcadeLab's single-file format doesn't play well with that. If you want to write Three.js with a React-like component model, you'd need to inline a UMD build — which is heavier than just writing direct Three.js. For ArcadeLab, stick with the imperative Three.js API.

Prompt template

🧊How do I prompt Claude or ChatGPT to make a Three.js scene?

Library hub

🧊Three.js (3D graphics) on ArcadeLab

Ready to publish? Paste your HTML file and get a URL.

🚀Publish your thing

Related guides