Models 44
Claude Haiku 4.5AnthropicClaude Haiku 5.5AnthropicClaude Opus 5.5AnthropicClaude Sonnet 5.5AnthropicNorth Mini Code (free)CohereDeepSeek V4 Flash 0423DeepSeekDeepSeek V4 Pro 0813DeepSeekDeepSeek V4.1 Flash 1017DeepSeekDots3-Note Preview (free)Dots StudioGemini 3.1 Flash LiteGoogleGemini 3.8 FlashGoogleGemini 4 ArgonGoogleGemini 4 HydrogenGoogleGemma 4 31BGoogleLFM2.5-2.6B (free)LiquidAILFM3-1.7B (free)LiquidAIMuse EmberMetaMiniMax M3MiniMaxMiniMax M3.1 FlashMiniMaxMinistral 3 14B 2512MistralMistral Large 4MistralMistral Small 4MistralKimi K3.1 ProMoonshotAINemotron 3 Nano Omni (free)NVIDIANemotron 3 SuperNVIDIANemotron 3 Ultra (free)NVIDIANemotron 3.5 Lightning (free)NVIDIANemotron 3.5 Super VL (free)NVIDIAGPT-5 NanoOpenAIGPT-6 LunaOpenAIGPT-6 Luna ProOpenAIGPT-6.1 SolOpenAIGPT-6.1 TerraOpenAIgpt-oss-120bOpenAIQwen3 Coder NextQwenQwen3.8 FlashQwenQwen3.8 Max (0902)QwenFlint (free)RecursiveGrok 4.7SpaceXAIMiMo-V2.6-FlashXiaomiMiMo-V2.6-ProXiaomiXing4.0 29B A4B (free)XingChenGLM 5.3Z.aiGLM 5.3 FlashZ.ai
Forest campfire at night

GPT-5 Nano

by OpenAIReasoningClean
Open in new window

Running live in a sandboxed frame. Click inside it before using the keyboard.

How it went

Total time
1 min 36 s
Cost
$0.0053
Output tokens
13,227
Spent thinking
8,960 tokens
Speed
150.4 tok/s
Console errors
0
First token after
7.9 s
First visible text after
1 min 7 s
Prompt tokens
555
Code size
13.6 KB
Finish reason
stop
Served by
OpenAI
Model id
openai/gpt-5-nano
Reasoning sent
model default
Max output
128,000 tokens
Generated
Nov 12, 2026

What it was asked

The prompt
Build a low-poly 3D scene of a campfire in a forest clearing at night, with Three.js in a single HTML file. Load Three.js only through this import map (do not use any other URL or version): <script type="importmap">{"imports":{"three":"https://cdn.jsdelivr.net/npm/three@0.170.0/build/three.module.js","three/addons/":"https://cdn.jsdelivr.net/npm/three@0.170.0/examples/jsm/"}}</script> Requirements: - A ground with a few low-poly rocks and logs around a campfire in the center. - At least 30 low-poly trees placed randomly around the clearing (not on the fire). - The campfire has animated flames and a warm point light that flickers and casts shadows. - Sparks rising from the fire as a simple particle system. - A dark night sky with stars and a moon, plus fog that fades the distant trees. - OrbitControls to look around, with limits so the camera stays above the ground. - The renderer fills the window and handles resizing correctly.
System prompt, sent with every prompt
You are generating a self-contained web demo. It will be rendered automatically in a sandboxed iframe and compared side by side with the output of other AI models given the exact same task.

Output rules:
- Reply with exactly ONE fenced code block containing the complete file: ```html (or ```svg when the task asks for an SVG). No text before or after the code block.
- Everything must be inline: CSS in <style>, JavaScript in <script>. No external files, images, fonts or network requests, except the CDN URLs explicitly allowed by the task.
- Do not use localStorage, sessionStorage, cookies, IndexedDB, alert(), confirm(), prompt() or window.open(): they are blocked in the sandbox and will throw.
- The page must look right in a 1280×800 viewport and adapt gracefully down to 375px wide. No horizontal scrollbar.
- Something meaningful must be visible on first paint: a screenshot is taken automatically about 3 seconds after load, without any interaction.
- Everything that makes the demo interesting must be visible within the first seconds: nothing hidden behind a high score, a later level or a long play session.
- Games must start in a self-playing demo mode (a simple AI plays) behind a "Click or press a key to start" message, so the game can be judged in action without playing.
- The iframe only receives keyboard events after the user clicks it: if the demo uses the keyboard, display a clear "Click or press a key to start" message.
- The code must run with zero errors in the console of the latest Chrome.

Code run-1.html · 381 lines

Download
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>Low-Poly Campfire in a Forest Clearing</title>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <style>
    :root { color-scheme: dark; }
    html, body { height: 100%; margin: 0; background: #050510; }
    #container { width: 100%; height: 100%; display: block; }
    #overlay {
      position: fixed; left: 0; top: 0; width: 100%; height: 100%;
      display: flex; align-items: center; justify-content: center;
      background: rgba(0,0,0,0.6); z-index: 10; color: #fff;
      text-align: center; padding: 20px; box-sizing: border-box;
      cursor: pointer;
    }
    #overlay .card {
      background: rgba(15, 15, 30, 0.95); border: 1px solid rgba(255,255,255,0.2);
      padding: 20px 28px; border-radius: 12px; max-width: 640px;
      text-shadow: 0 1px 2px rgba(0,0,0,.4);
    }
    #overlay h1 { margin: 0 0 8px; font-size: 22px; }
    #overlay p { margin: 6px 0; font-size: 13.5px; opacity: 0.95; }
    @media (max-width: 700px) {
      #overlay h1 { font-size: 18px; }
      #overlay { padding: 0 12px; }
      #overlay .card { padding: 16px; }
    }
  </style>
</head>
<body>
  <div id="container"></div>
  <div id="overlay" title="Start">
    <div class="card">
      <h1>Click or press a key to start</h1>
      <p>A cozy low-poly campfire scene awaits. Look around with the mouse after you start.</p>
      <p style="opacity:.75">The scene keeps running in the background even before interaction.</p>
    </div>
  </div>

  <script type="importmap">
  {
    "imports": {
      "three": "https://cdn.jsdelivr.net/npm/three@0.170.0/build/three.module.js",
      "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.170.0/examples/jsm/"
    }
  }
  </script>

  <script type="module">
  import * as THREE from 'three';
  import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

  let scene, camera, renderer, controls;
  let campfireGroup;
  let sparks;
  let started = false;
  let lastTime = 0;
  const overlay = document.getElementById('overlay');

  function init() {
    // Scene
    scene = new THREE.Scene();
    scene.fog = new THREE.Fog(0x0a0b1a, 40, 400);

    // Camera
    const aspect = window.innerWidth / window.innerHeight;
    camera = new THREE.PerspectiveCamera(60, aspect, 0.1, 2000);
    camera.position.set(0, 12, 40);

    // Lights
    const ambient = new THREE.AmbientLight(0x404040, 0.6);
    scene.add(ambient);

    const moonLight = new THREE.DirectionalLight(0xffffff, 0.6);
    moonLight.position.set(-30, 60, -20);
    moonLight.castShadow = true;
    moonLight.shadow.mapSize.set(1024, 1024);
    moonLight.shadow.camera.near = 1;
    moonLight.shadow.camera.far = 200;
    scene.add(moonLight);

    // Ground
    const groundGeo = new THREE.PlaneGeometry(200, 200);
    const groundMat = new THREE.MeshStandardMaterial({ color: 0x2f6b2f, roughness: 0.9 });
    const ground = new THREE.Mesh(groundGeo, groundMat);
    ground.rotation.x = -Math.PI / 2;
    ground.receiveShadow = true;
    ground.position.y = 0;
    scene.add(ground);

    // Rocks around the clearing
    for (let i = 0; i < 12; i++) {
      const rock = createRock();
      const a = Math.random() * Math.PI * 2;
      const r = 8 + Math.random() * 60;
      rock.position.set(Math.cos(a) * r, 0.15, Math.sin(a) * r);
      rock.rotation.y = Math.random() * Math.PI;
      scene.add(rock);
    }

    // Trees: at least ~30 low-poly trees randomly placed around clearing
    const treesGroup = new THREE.Group();
    const treeCount = 34;
    for (let i = 0; i < treeCount; i++) {
      const pos = randomPointInCircle(60, 60);
      // Avoid placing on the fire center
      if (Math.hypot(pos.x, pos.z) < 6) continue;
      const t = createLowPolyTree();
      t.position.set(pos.x, 0, pos.z);
      t.rotation.y = Math.random() * Math.PI;
      treesGroup.add(t);
    }
    scene.add(treesGroup);

    // Campfire group at center
    campfireGroup = new THREE.Group();
    scene.add(campfireGroup);

    // Logs around the center
    const logMat = new THREE.MeshStandardMaterial({ color: 0x5a3d21 });
    const logGeom = new THREE.CylinderGeometry(0.25, 0.4, 3, 6);
    const log1 = new THREE.Mesh(logGeom, logMat); log1.castShadow = true; log1.rotation.z = Math.PI/2; log1.position.set(0, 0.3, 0);
    const log2 = log1.clone(); log2.rotation.y = Math.PI/2; log2.position.set(1.0, 0.3, 0);
    const log3 = log1.clone(); log3.rotation.y = Math.PI/4; log3.position.set(-0.6, 0.3, 0.7);
    const log4 = log1.clone(); log4.rotation.y = -Math.PI/4; log4.position.set(-0.6, 0.3, -0.7);
    campfireGroup.add(log1, log2, log3, log4);

    // Fire core and flames
    const fireCore = new THREE.Mesh(new THREE.SphereGeometry(0.6, 8, 8),
      new THREE.MeshStandardMaterial({ color: 0xff7f2a, emissive: 0xff5e1a, emissiveIntensity: 1.0 }));
    fireCore.position.y = 1.0;
    fireCore.castShadow = true;
    const fireGroup = new THREE.Group();
    fireGroup.add(fireCore);

    // Multiple low-poly flame cones
    const flameGeoms = [
      new THREE.ConeGeometry(0.9, 2.0, 6),
      new THREE.ConeGeometry(0.7, 1.6, 6),
      new THREE.ConeGeometry(0.8, 1.8, 6)
    ];
    const flameColors = [0xffaa33, 0xff5500, 0xffdd55];
    const flames = [];
    for (let i = 0; i < flameGeoms.length; i++) {
      const m = new THREE.MeshStandardMaterial({ color: flameColors[i], emissive: flameColors[i],
        emissiveIntensity: 0.9, transparent: true, opacity: 0.95 });
      const flame = new THREE.Mesh(flameGeoms[i], m);
      flame.position.y = 1.0;
      flame.rotation.x = Math.PI;
      flame.castShadow = true;
      flame.receiveShadow = true;
      flame.scale.set(0.9, 0.9, 0.9);
      fireGroup.add(flame);
      flames.push(flame);
    }
    campfireGroup.add(fireGroup);

    // Fire light with flicker
    const fireLight = new THREE.PointLight(0xffa34f, 2.0, 20, 2);
    fireLight.position.set(0, 1.2, 0);
    fireLight.castShadow = true;
    scene.add(fireLight);

    // Attach fire data for animation
    campfireGroup.userData.fire = { core: fireCore, flames: flames, light: fireLight, group: fireGroup };

    // Sparks
    sparks = createSparks(120);
    scene.add(sparks.mesh);

    // Moon
    const moonGeom = new THREE.SphereGeometry(6, 32, 32);
    const moonMat = new THREE.MeshStandardMaterial({ color: 0xffffff, emissive: 0xffffff, emissiveIntensity: 0.9 });
    const moon = new THREE.Mesh(moonGeom, moonMat);
    moon.position.set(-70, 60, -40);
    moon.receiveShadow = false;
    moon.castShadow = false;
    scene.add(moon);

    // Stars
    const stars = createStars(260, 140);
    scene.add(stars);

    // Fog (distant trees fade)
    scene.fog = new THREE.Fog(0x0a102a, 40, 420);

    // Renderer
    renderer = new THREE.WebGLRenderer({ antialias: true, alpha: false });
    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.shadowMap.enabled = true;
    renderer.shadowMap.type = THREE.PCFSoftShadowMap;
    document.getElementById('container').appendChild(renderer.domElement);

    // OrbitControls (start disabled, enabled after start)
    controls = new OrbitControls(camera, renderer.domElement);
    controls.enableDamping = true;
    controls.dampingFactor = 0.08;
    controls.enablePan = false;
    controls.minDistance = 15;
    controls.maxDistance = 200;
    controls.minPolarAngle = 0.1;
    controls.maxPolarAngle = Math.PI * 0.5 - 0.02;
    controls.enabled = false;

    // Resize handling
    window.addEventListener('resize', onWindowResize, false);

    // Start interaction listener
    overlay.addEventListener('pointerdown', start, { once: true });
    window.addEventListener('keydown', start, { once: true });

    // Start rendering loop
    animate(0);
  }

  function randomPointInCircle(rx, rz) {
    const a = Math.random() * Math.PI * 2;
    const r = Math.sqrt(Math.random()) * Math.max(rx, rz);
    return new THREE.Vector3(Math.cos(a) * r, 0, Math.sin(a) * r);
  }

  function createLowPolyTree() {
    const trunkGeom = new THREE.CylinderGeometry(0.25, 0.4, 3, 6);
    const trunkMat = new THREE.MeshStandardMaterial({ color: 0x6b4f2a });
    const trunk = new THREE.Mesh(trunkGeom, trunkMat);
    trunk.position.y = 1.5;
    const leavesGeom = new THREE.ConeGeometry(1.4, 3.5, 8);
    const leavesMat = new THREE.MeshStandardMaterial({ color: 0x2e8b57, flatShading: true });
    const leaves = new THREE.Mesh(leavesGeom, leavesMat);
    leaves.position.y = 3.3;

    const group = new THREE.Group();
    group.add(trunk, leaves);
    group.scale.set(0.9 + Math.random() * 0.4, 0.9 + Math.random() * 0.4, 0.9 + Math.random() * 0.4);
    group.castShadow = true;
    // Slight random tilt for variety
    group.rotation.y = Math.random() * Math.PI;
    return group;
  }

  function createRock() {
    const s = 0.8 + Math.random() * 1.6;
    const rockGeom = new THREE.IcosahedronGeometry(s, 0);
    const rockMat = new THREE.MeshStandardMaterial({ color: 0x7a7a7a, flatShading: true });
    const rock = new THREE.Mesh(rockGeom, rockMat);
    rock.castShadow = true;
    rock.receiveShadow = true;
    rock.rotation.y = Math.random() * Math.PI;
    return rock;
  }

  function createStars(count, spread) {
    const geometry = new THREE.BufferGeometry();
    const positions = new Float32Array(count * 3);
    for (let i = 0; i < count; i++) {
      const x = (Math.random() - 0.5) * spread * 2;
      const y = 20 + Math.random() * spread;
      const z = (Math.random() - 0.5) * spread * 2;
      positions[i * 3 + 0] = x;
      positions[i * 3 + 1] = y;
      positions[i * 3 + 2] = z;
    }
    geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
    const material = new THREE.PointsMaterial({ color: 0xffffff, size: 0.6, sizeAttenuation: true, transparent: true, opacity: 0.9 });
    const points = new THREE.Points(geometry, material);
    points.frustumCulled = false;
    return points;
  }

  function createSparks(count) {
    const geometry = new THREE.BufferGeometry();
    const positions = new Float32Array(count * 3);
    const velocities = new Float32Array(count * 3);
    const life = new Float32Array(count);
    for (let i = 0; i < count; i++) {
      positions[i * 3 + 0] = (Math.random() - 0.5) * 0.6;
      positions[i * 3 + 1] = 0.4 + Math.random() * 0.4;
      positions[i * 3 + 2] = (Math.random() - 0.5) * 0.6;

      velocities[i * 3 + 0] = (Math.random() - 0.5) * 0.2;
      velocities[i * 3 + 1] = 0.8 + Math.random() * 0.8;
      velocities[i * 3 + 2] = (Math.random() - 0.5) * 0.2;

      life[i] = 0.8 + Math.random() * 0.8;
    }
    geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
    geometry.setAttribute('velocity', new THREE.BufferAttribute(velocities, 3));
    geometry.setAttribute('life', new THREE.BufferAttribute(life, 1));

    const material = new THREE.PointsMaterial({ color: 0xffd27a, size: 3.0, transparent: true, opacity: 0.95 });
    const mesh = new THREE.Points(geometry, material);
    mesh.frustumCulled = false;
    return { mesh, geometry };
  }

  function onWindowResize() {
    const w = window.innerWidth;
    const h = window.innerHeight;
    camera.aspect = w / h;
    camera.updateProjectionMatrix();
    renderer.setSize(w, h);
  }

  function start() {
    if (started) return;
    started = true;
    overlay.style.display = 'none';
    controls.enabled = true;
  }

  function animate(time) {
    requestAnimationFrame(animate);
    const t = time * 0.001;

    // Sparks update
    if (sparks && sparks.geometry) {
      const pos = sparks.mesh.geometry.attributes.position;
      const vel = sparks.mesh.geometry.attributes.velocity;
      const life = sparks.mesh.geometry.attributes.life;
      for (let i = 0; i < pos.count; i++) {
        vel.array[i * 3 + 1] -= 9.8 * 0.25 * 0.016; // gravity-ish
        pos.array[i * 3 + 0] += vel.array[i * 3 + 0] * 0.016;
        pos.array[i * 3 + 1] += vel.array[i * 3 + 1] * 0.016;
        pos.array[i * 3 + 2] += vel.array[i * 3 + 2] * 0.016;

        life.array[i] -= 0.016;
        if (life.array[i] <= 0 || pos.array[i * 3 + 1] < 0) {
          pos.array[i * 3 + 0] = (Math.random() - 0.5) * 0.6;
          pos.array[i * 3 + 1] = 0.4 + Math.random() * 0.6;
          pos.array[i * 3 + 2] = (Math.random() - 0.5) * 0.6;
          vel.array[i * 3 + 0] = (Math.random() - 0.5) * 0.4;
          vel.array[i * 3 + 1] = 0.8 + Math.random() * 0.7;
          vel.array[i * 3 + 2] = (Math.random() - 0.5) * 0.4;
          life.array[i] = 0.8 + Math.random() * 0.8;
        }
      }
      pos.needsUpdate = true;
      life.needsUpdate = true;
    }

    // Fire flicker
    const fire = campfireGroup?.userData?.fire;
    if (fire) {
      const light = fire.light;
      const flames = fire.flames;
      const flicker = 0.75 + Math.sin(t * 8) * 0.25;
      light.intensity = 1.6 * flicker;
      for (let i = 0; i < flames.length; i++) {
        const flame = flames[i];
        const s = 0.9 + Math.sin(t * (1.0 + i * 0.3)) * 0.15;
        flame.scale.set(s, s, s);
        flame.material.emissiveIntensity = 0.85 + Math.sin(t * (2 + i)) * 0.25;
      }
    }

    if (controls && controls.enabled) controls.update();
    renderer.render(scene, camera);
  }

  function onWindowResizeHandler() {
    onWindowResize();
  }

  // Initialize
  init();
  // Expose to window for debugging if needed
  window.onbeforeunload = () => { /* no-op for sandbox */ };

  // Start after first interaction
  function onFirstInput() { if (!started) start(); }
  window.addEventListener('mousedown', onFirstInput, { once: true });
  window.addEventListener('touchstart', onFirstInput, { once: true });

  // Expose resize handler in case of duplication
  window.addEventListener('resize', onWindowResizeHandler, false);
  </script>
</body>
</html>
Reasoning trace (8,960 tokens)
**Evaluating animation start conditions**

I figure the animation loop shouldn't run until it’s initiated. But what if we just run it in a loop while freezing updates until the user starts? However, we need to show a lively scene on the first load. The requirements state that something meaningful must be displayed automatically within three seconds after loading, even before user interaction. So I think we can show a static scene with lighting effects and block interaction until the user starts the demo.**Planning demo implementation**

The requirement indicates we need a self-playing demo mode with a "Click or press a key to start" message. Before interaction, it's fine if the scene doesn't update, but we should render something static. To meet the requirement for a screenshot three seconds after loading, we can set up a pre-start render of the scene with an overlay on top. 

I’ll implement an HTML structure with a full viewport container, an overlay message, and style it properly. I'll also load libraries using an import map and include the necessary components in the script.**Determining module imports**

I’ve decided we'll use dynamic module imports with the three.js library. So, I can set it up by importing everything with `import * as THREE from 'three';` and for the OrbitControls, I’ll use `import { OrbitControls } from 'three/addons/controls/OrbitControls.js';` 

I’m considering if the import map can handle this since it maps "three" to the CDN path for three.module.js. Thankfully, it seems the relative paths for add-ons will still work because they resolve correctly with the base path.**Clarifying OrbitControls import**

To use OrbitControls, the import statement will be `import { OrbitControls } from 'three/addons/controls/OrbitControls.js';`. The browser will fetch this module from the specified path. I plan to ensure the import map includes the necessary entries, mapping "three" to its module and "three/addons/" to the correct CDN URL.

I’ve realized that OrbitControls is a named export, confirming I can’t import it as default. The syntax I need is correct, so I'm all set with that plan.**Building the scene**

I’m starting to build the scene with various elements. First, I’ll create a new scene and add fog to enhance the depth, using a linear fog colorized with dark blue. The ground will be a large, horizontal plane with a greenish color.

For rocks and logs, I’ll create low-poly shapes in brownish-gray. I plan to place 30+ trees randomly in a circular area while ensuring they don’t block the campfire.

The campfire will have logs arranged in a cross and flickering flames animated via scale changes. I’ll add sparks through a particle system, updating their positions and lifetimes dynamically. Lastly, I’ll set up ambient and directional lighting, including the moon and star field. The camera will be positioned above ground with orbit controls for a good viewing experience, and I’ll include an overlay to prompt users to start the animation.**Implementing scene interactivity**

I’m setting up the scene overlay to be clickable, implementing event handlers to start the demo when the overlay is interacted with. The overlay will block interaction until that point, but I'll allow the scene elements, like flames and sparks, to animate behind it. So, although the overlay is visible, the self-playing demo can still run.

I’ll create trees, rocks, and logs, along with a campfire that includes animated flames. I’ll also set up a moon and a starry sky. The auto screenshot requirement will be met by ensuring a visual scene is ready three seconds after load.**Designing HTML structure**

I’m laying out the HTML structure for the low-poly campfire scene. The page includes a full-height container and a clickable overlay for starting the scene. The overlay will feature a dark semi-transparent background with informative text encouraging interaction.

I'll use media queries to ensure the layout adapts to smaller screens. The goal is to create a simple yet engaging experience for the user, making it easy to get into the demo with clear instructions and a visually appealing setup.**Setting up the JavaScript code**

I’m building the JavaScript components for the campfire scene, using Three.js. The scene will include ambient lighting, moonlight, and a fog effect to create atmosphere. I'll initiate the camera and set up the ground and trees, ensuring some nice randomization in tree placements.

For the campfire, I’m designing logs, flames, and sparks, making sure everything is visually appealing. I’ll also manage controls with OrbitControls, allowing users to interact with the scene after starting it. Close attention will be given to how the overlay interacts with user input.**Refining JavaScript for campfire scene**

I’m processing the code for creating the sparks in the campfire scene. The logic initializes their positions, velocities, and lifespans. I'll also ensure the animation for sparks mimics realistic movement and lifetimes.

I must remove any TypeScript syntax for compatibility, like using `campfireGroup.userData` instead of the cast. I'll avoid duplicates, especially concerning fog settings. The overlay variable defined in the `init` function needs to be utilized appropriately, and I’ll keep everything streamlined for clarity. Time to implement these fixes!**Finalizing campfire scene code**

I'm focusing on enhancing the campfire scene. First, I'll implement low-poly rocks and trees while ensuring proper position and shading for realism. The camera controls need adjustments, setting limits accurately to prevent odd angles.

I’ll streamline the code by removing TypeScript lines, ensuring everything is in standard JS syntax. Properly structuring `createRock` and the overlay's event handling is also essential. I’ll finalize by crafting a single coherent HTML block, taking care of the performance and shadow settings while ensuring a captivating starry sky and fog effect. Time to wrap this up!