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

Claude Haiku 5.5

by AnthropicReasoningClean
Open in new window

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

How it went

Total time
42.0 s
Cost
$0.0055
Output tokens
10,887
Spent thinking
2,275 tokens
Speed
276.2 tok/s
Console errors
0
First token after
2.6 s
First visible text after
16.2 s
Prompt tokens
855
Code size
16.0 KB
Finish reason
stop
Served by
Claude Platform on AWS
Model id
anthropic/claude-haiku-5.5
Reasoning sent
{"effort":"low"}
Max output
32,000 tokens
Generated
Nov 10, 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 · 492 lines

Download
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Low-Poly Campfire at Night</title>
<style>
  html, body {
    margin: 0;
    height: 100%;
    overflow: hidden;
    background: #05070d;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  }
  #hint {
    position: fixed;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%);
    padding: 8px 14px;
    background: rgba(10, 14, 24, 0.55);
    color: #d8c9a8;
    border: 1px solid rgba(255, 170, 90, 0.25);
    border-radius: 999px;
    font-size: 13px;
    letter-spacing: 0.3px;
    pointer-events: none;
    white-space: nowrap;
    user-select: none;
  }
  #title {
    position: fixed;
    top: 16px;
    left: 18px;
    color: #f2e3c4;
    font-size: 15px;
    opacity: 0.8;
    pointer-events: none;
    user-select: none;
  }
  @media (max-width: 480px) {
    #title { font-size: 13px; }
    #hint { font-size: 11px; bottom: 10px; }
  }
</style>
<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>
</head>
<body>
<div id="title">Campfire Clearing</div>
<div id="hint">Drag to look around · scroll to zoom · right-drag to pan</div>

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

// ---------- Renderer / scene / camera ----------
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.toneMappingExposure = 1.1;
document.body.appendChild(renderer.domElement);

const scene = new THREE.Scene();
const skyColor = 0x0a1024;
scene.background = new THREE.Color(skyColor);
scene.fog = new THREE.Fog(skyColor, 28, 95);

const camera = new THREE.PerspectiveCamera(55, window.innerWidth / window.innerHeight, 0.1, 400);
camera.position.set(6.5, 3.2, 9.5);

const controls = new OrbitControls(camera, renderer.domElement);
controls.target.set(0, 1.0, 0);
controls.enableDamping = true;
controls.dampingFactor = 0.06;
controls.minDistance = 3;
controls.maxDistance = 40;
controls.maxPolarAngle = Math.PI * 0.47; // never go below the ground
controls.update();

// ---------- Lights ----------
scene.add(new THREE.HemisphereLight(0x4a5f8c, 0x0c1208, 0.35));

const moonLight = new THREE.DirectionalLight(0x8fa8ff, 0.6);
moonLight.position.set(-60, 70, -50);
moonLight.castShadow = true;
moonLight.shadow.mapSize.set(2048, 2048);
moonLight.shadow.camera.left = -35;
moonLight.shadow.camera.right = 35;
moonLight.shadow.camera.top = 35;
moonLight.shadow.camera.bottom = -35;
moonLight.shadow.camera.near = 10;
moonLight.shadow.camera.far = 200;
moonLight.shadow.bias = -0.0008;
scene.add(moonLight);

const fireLight = new THREE.PointLight(0xff8a3c, 3, 26, 1.6);
fireLight.position.set(0, 1.2, 0);
fireLight.castShadow = true;
fireLight.shadow.mapSize.set(1024, 1024);
fireLight.shadow.bias = -0.002;
fireLight.shadow.radius = 4;
scene.add(fireLight);

// ---------- Helpers ----------
const rand = (a, b) => a + Math.random() * (b - a);

function jitterGeometry(geo, amount) {
  const pos = geo.attributes.position;
  const v = new THREE.Vector3();
  const seen = new Map();
  for (let i = 0; i < pos.count; i++) {
    v.fromBufferAttribute(pos, i);
    const key = `${v.x.toFixed(3)},${v.y.toFixed(3)},${v.z.toFixed(3)}`;
    if (!seen.has(key)) {
      seen.set(key, new THREE.Vector3(rand(-amount, amount), rand(-amount, amount), rand(-amount, amount)));
    }
    v.add(seen.get(key));
    pos.setXYZ(i, v.x, v.y, v.z);
  }
  geo.computeVertexNormals();
  return geo;
}

// Smooth-ish pseudo noise for terrain
function hash(x, y) {
  const s = Math.sin(x * 127.1 + y * 311.7) * 43758.5453;
  return s - Math.floor(s);
}
function noise2(x, y) {
  const xi = Math.floor(x), yi = Math.floor(y);
  const xf = x - xi, yf = y - yi;
  const u = xf * xf * (3 - 2 * xf), v = yf * yf * (3 - 2 * yf);
  const a = hash(xi, yi), b = hash(xi + 1, yi);
  const c = hash(xi, yi + 1), d = hash(xi + 1, yi + 1);
  return a + (b - a) * u + (c - a) * v + (a - b - c + d) * u * v;
}

// ---------- Ground ----------
const groundSize = 220;
const groundGeo = new THREE.PlaneGeometry(groundSize, groundSize, 120, 120);
{
  const pos = groundGeo.attributes.position;
  for (let i = 0; i < pos.count; i++) {
    const x = pos.getX(i), y = pos.getY(i);
    const r = Math.hypot(x, y);
    const flatten = THREE.MathUtils.smoothstep(r, 7, 22);
    const h = (noise2(x * 0.12, y * 0.12) - 0.5) * 2.2 * flatten
            + (noise2(x * 0.4, y * 0.4) - 0.5) * 0.35 * flatten;
    pos.setZ(i, h);
  }
  groundGeo.rotateX(-Math.PI / 2);
  groundGeo.computeVertexNormals();
}
const ground = new THREE.Mesh(
  groundGeo,
  new THREE.MeshStandardMaterial({ color: 0x1c2e1d, roughness: 1, metalness: 0, flatShading: true })
);
ground.receiveShadow = true;
scene.add(ground);

// ---------- Rocks ----------
const rockMat = new THREE.MeshStandardMaterial({ color: 0x5b6069, roughness: 0.95, flatShading: true });
for (let i = 0; i < 12; i++) {
  const a = rand(0, Math.PI * 2);
  const d = rand(3.6, 7.5);
  const s = rand(0.35, 0.9);
  const geo = jitterGeometry(new THREE.IcosahedronGeometry(1, 0), 0.25);
  const rock = new THREE.Mesh(geo, rockMat);
  rock.scale.set(s * rand(1, 1.4), s * rand(0.6, 0.9), s * rand(1, 1.3));
  rock.position.set(Math.cos(a) * d, s * 0.2, Math.sin(a) * d);
  rock.rotation.set(rand(0, 3), rand(0, 3), rand(0, 3));
  rock.castShadow = true;
  rock.receiveShadow = true;
  scene.add(rock);
}

// ---------- Logs ----------
const logMat = new THREE.MeshStandardMaterial({ color: 0x4a2f1c, roughness: 1, flatShading: true });
const logEndMat = new THREE.MeshStandardMaterial({ color: 0x9a7048, roughness: 0.9, flatShading: true });
const logGeo = new THREE.CylinderGeometry(0.22, 0.26, 2.6, 7);

function makeLog() {
  const g = new THREE.Group();
  const body = new THREE.Mesh(logGeo, [logMat, logEndMat, logMat]);
  body.rotation.z = Math.PI / 2;
  body.castShadow = true;
  body.receiveShadow = true;
  g.add(body);
  return g;
}

// Fire ring logs tilted toward center
for (let i = 0; i < 6; i++) {
  const a = (i / 6) * Math.PI * 2 + 0.3;
  const log = makeLog();
  log.position.set(Math.cos(a) * 1.25, 0.2, Math.sin(a) * 1.25);
  log.rotation.y = -a;
  log.rotation.x = 0;
  log.rotateZ(0.0);
  log.children[0].rotation.set(0, 0, Math.PI / 2 - 0.12);
  log.rotation.y = -a + Math.PI / 2;
  log.rotation.x = 0.0;
  // tilt so the far end sits on ground and near end lifts
  log.rotateX(0.0);
  scene.add(log);
}

// Scattered logs
for (let i = 0; i < 4; i++) {
  const a = rand(0, Math.PI * 2);
  const d = rand(4.8, 6.5);
  const log = makeLog();
  log.position.set(Math.cos(a) * d, 0.24, Math.sin(a) * d);
  log.rotation.y = rand(0, Math.PI);
  scene.add(log);
}

// Crossed log pile near fire edge
{
  const pile1 = makeLog();
  pile1.position.set(-3.2, 0.25, 2.6);
  pile1.rotation.y = 0.5;
  scene.add(pile1);
  const pile2 = makeLog();
  pile2.position.set(-3.2, 0.5, 2.6);
  pile2.rotation.y = -0.6;
  scene.add(pile2);
}

// ---------- Campfire flames ----------
const flameGroup = new THREE.Group();
flameGroup.position.set(0, 0.35, 0);
scene.add(flameGroup);

const flameGeo = new THREE.ConeGeometry(0.42, 1, 6, 1);
flameGeo.translate(0, 0.5, 0);
const flameOuterMat = new THREE.MeshBasicMaterial({ color: 0xff6a1f, transparent: true, opacity: 0.85, depthWrite: false });
const flameMidMat = new THREE.MeshBasicMaterial({ color: 0xffa132, transparent: true, opacity: 0.9, depthWrite: false });
const flameCoreMat = new THREE.MeshBasicMaterial({ color: 0xffe07a, transparent: true, opacity: 0.95, depthWrite: false });

const flames = [];
function addFlame(mat, sx, sy, ox, oz, phase, speed) {
  const m = new THREE.Mesh(flameGeo, mat);
  m.position.set(ox, 0, oz);
  m.scale.set(sx, sy, sx);
  flames.push({ mesh: m, sx, sy, phase, speed });
  flameGroup.add(m);
}
// outer flames
for (let i = 0; i < 7; i++) {
  const a = (i / 7) * Math.PI * 2;
  addFlame(flameOuterMat, rand(0.7, 0.95), rand(1.5, 2.1), Math.cos(a) * 0.2, Math.sin(a) * 0.2, rand(0, 6), rand(6, 9));
}
// middle flames
for (let i = 0; i < 5; i++) {
  const a = rand(0, Math.PI * 2);
  addFlame(flameMidMat, rand(0.5, 0.65), rand(1.1, 1.6), Math.cos(a) * 0.12, Math.sin(a) * 0.12, rand(0, 6), rand(8, 12));
}
// core flames
for (let i = 0; i < 3; i++) {
  addFlame(flameCoreMat, rand(0.3, 0.4), rand(0.8, 1.1), rand(-0.05, 0.05), rand(-0.05, 0.05), rand(0, 6), rand(10, 14));
}

// glowing embers base
const embers = new THREE.Mesh(
  new THREE.SphereGeometry(0.45, 8, 6),
  new THREE.MeshBasicMaterial({ color: 0xff4d12 })
);
embers.scale.y = 0.35;
embers.position.set(0, 0.05, 0);
scene.add(embers);

// ---------- Trees ----------
const trunkGeo = new THREE.CylinderGeometry(0.18, 0.28, 2.0, 6);
trunkGeo.translate(0, 1.0, 0);
const foliageGeoA = new THREE.ConeGeometry(1.5, 2.4, 7);
foliageGeoA.translate(0, 2.6, 0);
const foliageGeoB = new THREE.ConeGeometry(1.2, 2.0, 7);
foliageGeoB.translate(0, 3.9, 0);
const foliageGeoC = new THREE.ConeGeometry(0.8, 1.6, 7);
foliageGeoC.translate(0, 5.0, 0);

const trunkMat = new THREE.MeshStandardMaterial({ color: 0x3b2a1c, roughness: 1, flatShading: true });
const foliageMats = [
  new THREE.MeshStandardMaterial({ color: 0x1f4a2a, roughness: 0.9, flatShading: true }),
  new THREE.MeshStandardMaterial({ color: 0x18382a, roughness: 0.9, flatShading: true }),
  new THREE.MeshStandardMaterial({ color: 0x244f35, roughness: 0.9, flatShading: true }),
];

const treeCount = 70;
let placed = 0;
let attempts = 0;
while (placed < treeCount && attempts < 2000) {
  attempts++;
  const a = rand(0, Math.PI * 2);
  const d = rand(9, 60);
  const x = Math.cos(a) * d, z = Math.sin(a) * d;
  // keep trees from crowding each other
  let ok = true;
  for (const t of scene.children) {
    if (t.userData.isTree && Math.hypot(t.position.x - x, t.position.z - z) < 2.2) { ok = false; break; }
  }
  if (!ok) continue;

  const tree = new THREE.Group();
  const trunk = new THREE.Mesh(trunkGeo, trunkMat);
  trunk.castShadow = true;
  trunk.receiveShadow = true;
  tree.add(trunk);

  const mat = foliageMats[Math.floor(Math.random() * foliageMats.length)];
  const layers = Math.random() < 0.5 ? [foliageGeoA, foliageGeoB, foliageGeoC] : [foliageGeoA, foliageGeoB];
  for (const g of layers) {
    const f = new THREE.Mesh(g, mat);
    f.castShadow = true;
    f.receiveShadow = true;
    f.rotation.y = rand(0, Math.PI);
    tree.add(f);
  }

  const s = rand(0.8, 1.6);
  tree.scale.setScalar(s);
  tree.position.set(x, 0, z);
  tree.rotation.y = rand(0, Math.PI * 2);
  tree.userData.isTree = true;
  scene.add(tree);
  placed++;
}

// Small bushes for ground detail
const bushGeo = new THREE.IcosahedronGeometry(0.6, 0);
const bushMat = new THREE.MeshStandardMaterial({ color: 0x2a5a30, roughness: 1, flatShading: true });
for (let i = 0; i < 25; i++) {
  const a = rand(0, Math.PI * 2);
  const d = rand(8, 30);
  const b = new THREE.Mesh(bushGeo, bushMat);
  b.position.set(Math.cos(a) * d, 0.25, Math.sin(a) * d);
  b.scale.set(rand(1, 1.8), rand(0.6, 0.9), rand(1, 1.8));
  b.castShadow = true;
  scene.add(b);
}

// ---------- Sparks ----------
const SPARK_COUNT = 160;
const sparkPos = new Float32Array(SPARK_COUNT * 3);
const sparkVel = new Float32Array(SPARK_COUNT * 3);
const sparkLife = new Float32Array(SPARK_COUNT);
const sparkMaxLife = new Float32Array(SPARK_COUNT);

function respawnSpark(i, initial) {
  sparkPos[i * 3] = rand(-0.2, 0.2);
  sparkPos[i * 3 + 1] = rand(0.6, 1.2);
  sparkPos[i * 3 + 2] = rand(-0.2, 0.2);
  sparkVel[i * 3] = rand(-0.4, 0.4);
  sparkVel[i * 3 + 1] = rand(1.6, 3.2);
  sparkVel[i * 3 + 2] = rand(-0.4, 0.4);
  sparkMaxLife[i] = rand(1.4, 3.0);
  sparkLife[i] = initial ? rand(0, sparkMaxLife[i]) : sparkMaxLife[i];
}
for (let i = 0; i < SPARK_COUNT; i++) respawnSpark(i, true);

const sparkGeo = new THREE.BufferGeometry();
sparkGeo.setAttribute('position', new THREE.BufferAttribute(sparkPos, 3));
const sparkMat = new THREE.PointsMaterial({
  color: 0xffb347,
  size: 0.09,
  transparent: true,
  opacity: 0.9,
  blending: THREE.AdditiveBlending,
  depthWrite: false,
  sizeAttenuation: true,
});
const sparks = new THREE.Points(sparkGeo, sparkMat);
scene.add(sparks);

function updateSparks(dt, t) {
  const wind = Math.sin(t * 0.4) * 0.5 + 0.3;
  for (let i = 0; i < SPARK_COUNT; i++) {
    sparkLife[i] -= dt;
    if (sparkLife[i] <= 0) { respawnSpark(i, false); continue; }
    const k = i * 3;
    sparkVel[k] += (wind + Math.sin(t * 2 + i) * 0.3) * dt;
    sparkVel[k + 2] += Math.cos(t * 1.7 + i * 0.7) * 0.4 * dt;
    sparkVel[k + 1] -= 0.25 * dt; // slight drag/cooling
    sparkPos[k] += sparkVel[k] * dt;
    sparkPos[k + 1] += sparkVel[k + 1] * dt;
    sparkPos[k + 2] += sparkVel[k + 2] * dt;
  }
  sparkGeo.attributes.position.needsUpdate = true;
  // fade with a global opacity pulse for a flickering feel
  sparkMat.opacity = 0.75 + Math.sin(t * 13) * 0.12;
}

// ---------- Sky: stars, moon ----------
{
  const starCount = 1800;
  const sp = new Float32Array(starCount * 3);
  const sc = new Float32Array(starCount * 3);
  for (let i = 0; i < starCount; i++) {
    // uniform on upper hemisphere
    const u = Math.random(), v = Math.random() * 0.5;
    const theta = u * Math.PI * 2;
    const phi = Math.acos(1 - v * 1.6);
    const r = 320;
    const y = Math.cos(phi) * r;
    if (y < 8) { i--; continue; }
    sp[i * 3] = Math.sin(phi) * Math.cos(theta) * r;
    sp[i * 3 + 1] = y;
    sp[i * 3 + 2] = Math.sin(phi) * Math.sin(theta) * r;
    const tint = rand(0.75, 1);
    sc[i * 3] = tint;
    sc[i * 3 + 1] = tint * rand(0.9, 1);
    sc[i * 3 + 2] = 1;
  }
  const starGeo = new THREE.BufferGeometry();
  starGeo.setAttribute('position', new THREE.BufferAttribute(sp, 3));
  starGeo.setAttribute('color', new THREE.BufferAttribute(sc, 3));
  const stars = new THREE.Points(starGeo, new THREE.PointsMaterial({
    size: 1.6, vertexColors: true, sizeAttenuation: false, fog: false,
  }));
  scene.add(stars);
}

const moonPos = new THREE.Vector3(-120, 130, -150);
{
  const moon = new THREE.Mesh(
    new THREE.IcosahedronGeometry(9, 2),
    new THREE.MeshBasicMaterial({ color: 0xfff1d6, fog: false })
  );
  moon.position.copy(moonPos);
  scene.add(moon);

  const halo = new THREE.Mesh(
    new THREE.SphereGeometry(18, 16, 12),
    new THREE.MeshBasicMaterial({
      color: 0xbfd0ff, transparent: true, opacity: 0.08,
      blending: THREE.AdditiveBlending, depthWrite: false, fog: false,
    })
  );
  halo.position.copy(moonPos);
  scene.add(halo);

  // place the moon's directional light in its direction
  moonLight.position.copy(moonPos).multiplyScalar(0.5);
}

// ---------- Animation ----------
const clock = new THREE.Clock();

function animate() {
  requestAnimationFrame(animate);
  const dt = Math.min(clock.getDelta(), 0.05);
  const t = clock.elapsedTime;

  // flames
  for (const f of flames) {
    const n = Math.sin(t * f.speed + f.phase) * 0.5 + Math.sin(t * f.speed * 2.3 + f.phase * 1.7) * 0.25;
    f.mesh.scale.y = f.sy * (1 + n * 0.22);
    f.mesh.scale.x = f.sx * (1 - n * 0.08);
    f.mesh.scale.z = f.mesh.scale.x;
    f.mesh.rotation.y = Math.sin(t * 0.8 + f.phase) * 0.15;
  }

  // flickering warm light
  const flick = 3.0 + Math.sin(t * 11.0) * 0.35 + Math.sin(t * 23.0 + 1.3) * 0.2 + (Math.random() - 0.5) * 0.25;
  fireLight.intensity = flick;
  fireLight.position.y = 1.2 + Math.sin(t * 7.0) * 0.05;
  fireLight.color.setRGB(1, 0.52 + Math.sin(t * 5.3) * 0.04, 0.22);

  embers.material.color.setHSL(0.05, 1, 0.45 + Math.sin(t * 6) * 0.05);

  updateSparks(dt, t);

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

// ---------- Resize ----------
window.addEventListener('resize', () => {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
});

animate();
</script>
</body>
</html>
Reasoning trace (2,275 tokens)
I need to put together a single HTML file that stays compact, so I'll use the importmap exactly as provided and import OrbitControls from the three/addons path. I'm planning a renderer with shadows and fog, and a dark green ground built from a flat-shaded plane with jittered vertices, keeping trees out of a clearing of radius 6. I'm also starting on the rocks.

Next I'm going through the remaining scene pieces: rocks, logs, and a campfire with flickering flames and a point light that casts shadows. Then the trees, which I want at around 45, plus sparks and a sky with stars and a dim bluish moonlight. The fog, the navy background, and the OrbitControls limits come after that, along with a resize handler.

Next I'm working out the shadow setup: the moon's directional light casts shadows, the campfire's point light does too, and trees and rocks cast while the ground receives. Then the flicker and the flame construction, a group of three orange cones with animated scale.

Still building the flame and spark setup...

Still setting up the ground: a plane with displaced vertices, kept flat near the clearing, rendered with flat shading in dark green.

Still on the ground: the z values become world height once the plane is rotated, so I bake the rotation into the geometry. Next the trees go in, a trunk with cone foliage, shared geometry and materials, spread between radius 9 and 45. Logs come after that, as short cylinders laid on their sides.

Still building the fire: the logs get laid out around the center, then the flame cones, which flicker in scale, and a warm point light with shadows.

Next I'm wrapping up the scene details: the camera sits at (6, 3.5, 9) looking at a point just above the fire, with damping on and distance limits of 3 to 40. I'm also making sure the ground stays flat near the center, blending in the noise only past the clearing edge. Trees still need to be kept clear of the rocks and logs.

I'm placing about ten rocks at radius 3 to 7 with random scales, each built from a jittered icosahedron with flat shading and a gray standard material. Then I'll write out the final file and keep it under roughly 250 lines.