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

MiniMax M3.1 Flash

by MiniMaxReasoningClean
Open in new window

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

How it went

Total time
1 min 4 s
Cost
$0.0056
Output tokens
9,187
Spent thinking
2,842 tokens
Speed
145.5 tok/s
Console errors
0
First token after
859 ms
First visible text after
27.5 s
Prompt tokens
743
Code size
17.5 KB
Finish reason
stop
Served by
Parasail
Model id
minimax/minimax-m3.1-flash
Reasoning sent
{"effort":"medium"}
Max output
64,000 tokens
Generated
Nov 11, 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 · 506 lines

Download
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Low-poly Campfire — Night Clearing</title>
<style>
  html,body{margin:0;padding:0;height:100%;background:#04070d;overflow:hidden;}
  #app{position:fixed;inset:0;}
  canvas{display:block;}
  #hint{
    position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);
    padding:14px 22px;border-radius:12px;
    background:rgba(8,12,20,.62);backdrop-filter:blur(6px);
    border:1px solid rgba(255,180,90,.28);
    color:#ffd9a8;font:500 15px/1.4 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
    letter-spacing:.02em;text-align:center;pointer-events:none;
    box-shadow:0 8px 40px rgba(0,0,0,.55);
    transition:opacity .8s ease;
  }
  #hint small{display:block;margin-top:6px;color:#9fb0c8;font-size:12px;font-weight:400;}
  #hint.gone{opacity:0;}
  #title{
    position:fixed;left:18px;top:16px;color:#cfe0f5;
    font:600 13px/1.3 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
    letter-spacing:.14em;text-transform:uppercase;opacity:.75;pointer-events:none;
  }
</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="app"></div>
<div id="title">Night Clearing</div>
<div id="hint">Click or press a key to start<small>drag to orbit · scroll to zoom</small></div>

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

/* ---------- renderer / scene / camera ---------- */
const container = document.getElementById('app');
const renderer = new THREE.WebGLRenderer({ antialias: true, powerPreference: 'high-performance' });
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
container.appendChild(renderer.domElement);

const scene = new THREE.Scene();
const NIGHT = new THREE.Color(0x060b16);
scene.background = NIGHT;
scene.fog = new THREE.FogExp2(0x080e1c, 0.021);

const camera = new THREE.PerspectiveCamera(52, window.innerWidth / window.innerHeight, 0.1, 400);
camera.position.set(9.5, 5.4, 12.5);

const controls = new OrbitControls(camera, renderer.domElement);
controls.target.set(0, 1.5, 0);
controls.enableDamping = true;
controls.dampingFactor = 0.06;
controls.minDistance = 3.5;
controls.maxDistance = 34;
controls.minPolarAngle = 0.12;
controls.maxPolarAngle = Math.PI / 2 - 0.045;   // stays above ground
controls.autoRotate = true;
controls.autoRotateSpeed = 0.45;
controls.update();

/* ---------- helpers ---------- */
let seed = 1337;
function rnd() { seed = (seed * 1664525 + 1013904223) >>> 0; return seed / 4294967296; }
function rr(a, b) { return a + rnd() * (b - a); }
function pick(arr) { return arr[Math.floor(rnd() * arr.length)]; }

const flatLambert = (color, extra = {}) => new THREE.MeshLambertMaterial({ color, flatShading: true, ...extra });

/* ---------- sky: stars + moon ---------- */
const starCount = 1400;
const starPos = new Float32Array(starCount * 3);
const starCol = new Float32Array(starCount * 3);
const tmpC = new THREE.Color();
for (let i = 0; i < starCount; i++) {
  const u = rnd() * Math.PI * 2;
  const v = Math.acos(rr(-0.08, 1));      // upper hemisphere
  const r = 170;
  starPos[i * 3] = r * Math.sin(v) * Math.cos(u);
  starPos[i * 3 + 1] = r * Math.cos(v) * 0.9 + 4;
  starPos[i * 3 + 2] = r * Math.sin(v) * Math.sin(u);
  const b = rr(0.35, 1);
  tmpC.setHSL(rr(0.55, 0.68), rr(0.05, 0.35), 0.55 + b * 0.42);
  starCol[i * 3] = tmpC.r; starCol[i * 3 + 1] = tmpC.g; starCol[i * 3 + 2] = tmpC.b;
}
const starGeo = new THREE.BufferGeometry();
starGeo.setAttribute('position', new THREE.BufferAttribute(starPos, 3));
starGeo.setAttribute('color', new THREE.BufferAttribute(starCol, 3));
const stars = new THREE.Points(starGeo, new THREE.PointsMaterial({
  size: 1.4, sizeAttenuation: false, vertexColors: true,
  transparent: true, opacity: 0.95, depthWrite: false, fog: false
}));
scene.add(stars);

// moon
const moonDir = new THREE.Vector3(-0.42, 0.55, -0.72).normalize();
const moonPos = moonDir.clone().multiplyScalar(165);
const moon = new THREE.Mesh(
  new THREE.IcosahedronGeometry(6.2, 2),
  new THREE.MeshBasicMaterial({ color: 0xf2f0e2, fog: false })
);
moon.position.copy(moonPos);
scene.add(moon);
const moonGlow = new THREE.Sprite(new THREE.SpriteMaterial({
  map: radialTexture('rgba(200,215,255,1)', 'rgba(200,215,255,0)'),
  blending: THREE.AdditiveBlending, depthWrite: false, fog: false, opacity: 0.55
}));
moonGlow.scale.setScalar(34);
moonGlow.position.copy(moonPos);
scene.add(moonGlow);
// small craters
for (let i = 0; i < 7; i++) {
  const c = new THREE.Mesh(
    new THREE.CircleGeometry(rr(0.5, 1.5), 8),
    new THREE.MeshBasicMaterial({ color: 0xdcd9c8, fog: false })
  );
  const u = rnd() * Math.PI * 2, v = rnd() * Math.PI;
  c.position.set(
    Math.sin(v) * Math.cos(u) * 6.05,
    Math.cos(v) * 6.05,
    Math.sin(v) * Math.sin(u) * 6.05
  );
  c.lookAt(0, 0, 0);
  moon.add(c);
}

/* ---------- lights ---------- */
scene.add(new THREE.AmbientLight(0x223047, 0.55));
const hemi = new THREE.HemisphereLight(0x2b3f63, 0x0b1410, 0.55);
scene.add(hemi);

const moonLight = new THREE.DirectionalLight(0x9fb7e8, 0.45);
moonLight.position.copy(moonDir.clone().multiplyScalar(60));
scene.add(moonLight);

const fireLight = new THREE.PointLight(0xff8a34, 45, 34, 1.7);
fireLight.position.set(0, 1.15, 0);
fireLight.castShadow = true;
fireLight.shadow.mapSize.set(1024, 1024);
fireLight.shadow.camera.near = 0.25;
fireLight.shadow.camera.far = 34;
fireLight.shadow.bias = -0.0035;
fireLight.shadow.normalBias = 0.03;
scene.add(fireLight);

/* ---------- ground ---------- */
const groundGeo = new THREE.PlaneGeometry(320, 320, 44, 44);
groundGeo.rotateX(-Math.PI / 2);
{
  const pos = groundGeo.attributes.position;
  const col = new Float32Array(pos.count * 3);
  const c = new THREE.Color();
  for (let i = 0; i < pos.count; i++) {
    const x = pos.getX(i), z = pos.getZ(i);
    const d = Math.hypot(x, z);
    pos.setY(i, Math.sin(x * 0.13) * Math.cos(z * 0.11) * 0.5 + Math.sin(x * 0.4 + z * 0.3) * 0.09 - Math.max(0, (d - 40)) * 0.01);
    const n = 0.5 + 0.5 * Math.sin(x * 0.7) * Math.cos(z * 0.6) + (rnd() - 0.5) * 0.25;
    c.setHSL(0.28 + rr(-0.02, 0.02), 0.30, 0.055 + n * 0.035);
    col[i * 3] = c.r; col[i * 3 + 1] = c.g; col[i * 3 + 2] = c.b;
  }
  groundGeo.setAttribute('color', new THREE.BufferAttribute(col, 3));
  groundGeo.computeVertexNormals();
}
const ground = new THREE.Mesh(groundGeo, new THREE.MeshLambertMaterial({ vertexColors: true, flatShading: true }));
ground.receiveShadow = true;
scene.add(ground);

// darker clearing dirt patch
const dirt = new THREE.Mesh(
  new THREE.CircleGeometry(4.6, 26),
  new THREE.MeshLambertMaterial({ color: 0x241a12, flatShading: true })
);
dirt.rotation.x = -Math.PI / 2;
dirt.position.y = 0.035;
dirt.receiveShadow = true;
scene.add(dirt);

/* ---------- low-poly trees ---------- */
const trunkGeo = new THREE.CylinderGeometry(0.13, 0.24, 1, 6, 1);
trunkGeo.translate(0, 0.5, 0);
const foliageGeos = [];
for (let i = 0; i < 4; i++) {
  const r = [1.15, 0.95, 0.72, 0.5][i];
  const h = [1.7, 1.5, 1.35, 1.1][i];
  foliageGeos.push(new THREE.ConeGeometry(r, h, 7, 1));
}
const treeMats = [
  flatLambert(0x173323), flatLambert(0x1c3c2a), flatLambert(0x12301f),
  flatLambert(0x1f442f), flatLambert(0x152b25)
];
const trunkMat = flatLambert(0x3a2a1f);

function makeTree(scale) {
  const g = new THREE.Group();
  const th = 1.6 * scale;
  const trunk = new THREE.Mesh(trunkGeo, trunkMat);
  trunk.scale.set(scale, th, scale);
  trunk.castShadow = true;
  g.add(trunk);
  const tiers = 3 + Math.floor(rnd() * 2);
  let y = th * 0.85;
  for (let i = 0; i < tiers; i++) {
    const fg = foliageGeos[Math.min(i, 3)];
    const m = new THREE.Mesh(fg, pick(treeMats));
    const s = scale * (1 - i * 0.14);
    m.scale.set(s, s * rr(0.9, 1.25), s);
    m.position.y = y;
    m.rotation.y = rnd() * Math.PI;
    m.castShadow = true;
    g.add(m);
    y += fg.parameters.height * scale * 0.52;
  }
  return g;
}

const trees = [];
const TREE_COUNT = 46;
let guard = 0;
while (trees.length < TREE_COUNT && guard++ < 4000) {
  const a = rnd() * Math.PI * 2;
  const d = 8.5 + Math.pow(rnd(), 0.75) * 30;      // ring outside clearing
  const x = Math.cos(a) * d, z = Math.sin(a) * d;
  if (Math.hypot(x, z) < 8) continue;
  const t = makeTree(rr(0.85, 2.1));
  t.position.set(x, 0, z);
  t.rotation.y = rnd() * Math.PI * 2;
  t.userData.dist = d;
  scene.add(t);
  trees.push(t);
}
// a couple of trees right at the edge of the clearing for framing
for (let i = 0; i < 4; i++) {
  const a = rnd() * Math.PI * 2, d = rr(6.6, 8.2);
  const t = makeTree(rr(1.3, 2.0));
  t.position.set(Math.cos(a) * d, 0, Math.sin(a) * d);
  t.rotation.y = rnd() * Math.PI * 2;
  scene.add(t); trees.push(t);
}

/* ---------- bushes / grass tufts ---------- */
const bushGeo = new THREE.IcosahedronGeometry(0.6, 0);
for (let i = 0; i < 34; i++) {
  const a = rnd() * Math.PI * 2, d = rr(4.8, 26);
  const b = new THREE.Mesh(bushGeo, pick(treeMats));
  const s = rr(0.5, 1.5);
  b.scale.set(s, s * rr(0.5, 0.9), s);
  b.position.set(Math.cos(a) * d, 0.15 * s, Math.sin(a) * d);
  b.rotation.set(rnd(), rnd(), rnd());
  b.castShadow = true;
  scene.add(b);
}

/* ---------- rocks ---------- */
const rockMat = flatLambert(0x545a63);
const rockMat2 = flatLambert(0x3f4650);
function makeRock(size, mat) {
  const g = new THREE.IcosahedronGeometry(size, 0);
  const p = g.attributes.position;
  for (let i = 0; i < p.count; i++) {
    p.setXYZ(i, p.getX(i) * rr(0.75, 1.25), p.getY(i) * rr(0.5, 1.0), p.getZ(i) * rr(0.75, 1.25));
  }
  g.computeVertexNormals();
  const m = new THREE.Mesh(g, mat);
  m.castShadow = true; m.receiveShadow = true;
  return m;
}
for (let i = 0; i < 16; i++) {
  const a = rnd() * Math.PI * 2, d = rr(4.5, 20);
  const r = makeRock(rr(0.35, 1.5), rnd() > 0.5 ? rockMat : rockMat2);
  r.position.set(Math.cos(a) * d, rr(-0.05, 0.15), Math.sin(a) * d);
  r.rotation.set(rnd() * 3, rnd() * 3, rnd() * 3);
  scene.add(r);
}

/* ---------- firepit stones ---------- */
const pitStoneGeo = new THREE.DodecahedronGeometry(0.42, 0);
for (let i = 0; i < 13; i++) {
  const a = (i / 13) * Math.PI * 2 + rr(-0.08, 0.08);
  const s = new THREE.Mesh(pitStoneGeo, rockMat);
  const sc = rr(0.7, 1.15);
  s.scale.set(sc, sc * rr(0.6, 0.9), sc);
  s.position.set(Math.cos(a) * 1.55, 0.1, Math.sin(a) * 1.55);
  s.rotation.set(rnd() * 3, rnd() * 3, rnd() * 3);
  s.castShadow = true; s.receiveShadow = true;
  scene.add(s);
}

/* ---------- logs around the fire ---------- */
const logGeo = new THREE.CylinderGeometry(0.26, 0.3, 3.1, 7, 1);
logGeo.rotateZ(Math.PI / 2);
const logMat = flatLambert(0x4a3524);
const emberMat = new THREE.MeshLambertMaterial({ color: 0x2a1a12, emissive: 0xff5a12, emissiveIntensity: 0.6, flatShading: true });
const logAngles = [0.4, 2.2, 4.1];
for (const ang of logAngles) {
  const log = new THREE.Mesh(logGeo, logMat);
  log.position.set(Math.cos(ang) * 1.05, 0.26, Math.sin(ang) * 1.05);
  log.rotation.y = -ang + rr(-0.3, 0.3);
  log.castShadow = true; log.receiveShadow = true;
  scene.add(log);
  // glowing embers on the log
  for (const sgn of [-1, 1]) {
    const em = new THREE.Mesh(new THREE.CircleGeometry(0.22, 7), emberMat);
    em.position.copy(log.position);
    em.position.x += Math.cos(-ang + Math.PI / 2) * 0 + Math.cos(ang + Math.PI / 2) * sgn * 1.5;
    em.position.z += -Math.sin(ang + Math.PI / 2) * sgn * 1.5;
    em.position.y = 0.26;
    em.lookAt(em.position.x * 3, em.position.y, em.position.z * 3);
    scene.add(em);
  }
}

/* ---------- flame shader ---------- */
function radialTexture(inner, outer) {
  const c = document.createElement('canvas');
  c.width = c.height = 128;
  const ctx = c.getContext('2d');
  const g = ctx.createRadialGradient(64, 64, 0, 64, 64, 64);
  g.addColorStop(0, inner);
  g.addColorStop(1, outer);
  ctx.fillStyle = g;
  ctx.fillRect(0, 0, 128, 128);
  const t = new THREE.CanvasTexture(c);
  t.colorSpace = THREE.SRGBColorSpace;
  return t;
}

const flameUniforms = {
  uTime: { value: 0 },
  uCore: { value: new THREE.Color(0xfff3c0) },
  uMid: { value: new THREE.Color(0xff8b22) },
  uEdge: { value: new THREE.Color(0xd42a08) }
};
const flameMat = new THREE.ShaderMaterial({
  uniforms: flameUniforms,
  transparent: true,
  depthWrite: false,
  blending: THREE.AdditiveBlending,
  side: THREE.DoubleSide,
  vertexShader: /* glsl */`
    varying vec2 vUv;
    void main(){
      vUv = uv;
      gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0);
    }`,
  fragmentShader: /* glsl */`
    uniform float uTime;
    uniform vec3 uCore, uMid, uEdge;
    varying vec2 vUv;
    void main(){
      vec2 p = vUv*2.0-1.0;
      float y = vUv.y;
      float x = p.x;
      float t = uTime*1.6;
      float sway = (sin(t*1.9 + y*5.0)*0.55 + sin(t*3.1 + y*9.0)*0.25) * 0.16 * pow(y,1.4);
      x -= sway;
      float width = (1.0 - pow(y,0.7)) * 0.62;
      width *= smoothstep(0.0, 0.14, y);
      float d = width - abs(x);
      float body = smoothstep(0.0, 0.10, d);
      body *= smoothstep(1.0, 0.55, y);
      float core = smoothstep(0.0, 0.16, width*0.45 - abs(x)) * smoothstep(0.85, 0.25, y);
      vec3 col = mix(uMid, uEdge, smoothstep(0.15, 0.9, y));
      col = mix(col, uCore, clamp(core,0.0,1.0));
      float a = clamp(body,0.0,1.0);
      gl_FragColor = vec4(col * (0.55 + 1.1*core), a*0.92);
    }`
});

const flames = [];
const flameGroup = new THREE.Group();
flameGroup.position.set(0, 0.22, 0);
scene.add(flameGroup);
for (let i = 0; i < 7; i++) {
  const q = new THREE.Mesh(new THREE.PlaneGeometry(1, 1, 1, 1), flameMat);
  const s = rr(1.1, 2.4);
  q.scale.set(s * 0.85, s * 1.9, 1);
  q.position.set(rr(-0.45, 0.45), s * 0.9, rr(-0.45, 0.45));
  q.userData.bob = rr(0, 6.28);
  q.userData.baseY = q.position.y;
  q.userData.baseS = s;
  q.renderOrder = 5;
  flameGroup.add(q);
  flames.push(q);
}
// base glow sprite
const glow = new THREE.Sprite(new THREE.SpriteMaterial({
  map: radialTexture('rgba(255,170,70,0.95)', 'rgba(255,80,10,0)'),
  blending: THREE.AdditiveBlending, depthWrite: false, opacity: 0.85
}));
glow.scale.set(4.4, 3.2, 1);
glow.position.set(0, 0.45, 0);
scene.add(glow);

/* ---------- sparks ---------- */
const SPARKS = 90;
const sparkPos = new Float32Array(SPARKS * 3);
const sparkData = [];
for (let i = 0; i < SPARKS; i++) {
  sparkData.push({ life: rnd(), vx: rr(-0.35, 0.35), vy: rr(1.1, 2.6), vz: rr(-0.35, 0.35), size: rr(0.5, 1.5) });
  sparkPos[i * 3 + 1] = -99;
}
const sparkGeo = new THREE.BufferGeometry();
sparkGeo.setAttribute('position', new THREE.BufferAttribute(sparkPos, 3));
const sparkMat = new THREE.PointsMaterial({
  size: 0.14, map: radialTexture('rgba(255,220,140,1)', 'rgba(255,90,0,0)'),
  blending: THREE.AdditiveBlending, depthWrite: false, transparent: true,
  sizeAttenuation: true, opacity: 0.95
});
const sparks = new THREE.Points(sparkGeo, sparkMat);
sparks.frustumCulled = false;
scene.add(sparks);

/* ---------- resize ---------- */
function onResize() {
  const w = window.innerWidth, h = window.innerHeight;
  camera.aspect = w / h;
  camera.updateProjectionMatrix();
  renderer.setSize(w, h);
  renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
}
window.addEventListener('resize', onResize);
onResize();

/* ---------- start hint ---------- */
const hint = document.getElementById('hint');
function dismiss() {
  hint.classList.add('gone');
  window.removeEventListener('pointerdown', dismiss);
  window.removeEventListener('keydown', dismiss);
}
window.addEventListener('pointerdown', dismiss);
window.addEventListener('keydown', dismiss);
setTimeout(dismiss, 9000);

/* ---------- animation loop ---------- */
const clock = new THREE.Clock();
function animate() {
  const dt = Math.min(clock.getDelta(), 0.05);
  const t = clock.elapsedTime;

  flameUniforms.uTime.value = t;

  // flames billboard to camera + bob
  for (const f of flames) {
    f.lookAt(camera.position);
    const b = f.userData.bob;
    const sc = f.userData.baseS * (0.92 + 0.14 * Math.sin(t * 7.3 + b) + 0.07 * Math.sin(t * 11.7 + b * 2));
    f.scale.set(sc * 0.85, sc * 1.9, 1);
    f.position.y = f.userData.baseY + Math.sin(t * 4.6 + b) * 0.06;
  }
  flameGroup.rotation.y = t * 0.25;

  // flickering fire light
  const flick = 0.72
    + 0.18 * Math.sin(t * 9.1)
    + 0.10 * Math.sin(t * 15.7 + 1.3)
    + 0.08 * Math.sin(t * 23.3 + 0.7);
  fireLight.intensity = 46 * flick;
  fireLight.position.x = Math.sin(t * 5.3) * 0.08;
  fireLight.position.z = Math.cos(t * 4.1) * 0.08;
  glow.material.opacity = 0.7 + 0.18 * flick;
  glow.scale.set(4.4 * (0.94 + 0.1 * flick), 3.2 * (0.94 + 0.1 * flick), 1);
  emberMat.emissiveIntensity = 0.45 + 0.35 * flick;

  // sparks
  const pos = sparkGeo.attributes.position.array;
  for (let i = 0; i < SPARKS; i++) {
    const s = sparkData[i];
    s.life += dt * (0.28 + s.size * 0.12);
    if (s.life > 1) {
      s.life = 0;
      pos[i * 3] = rr(-0.4, 0.4);
      pos[i * 3 + 1] = 0.35;
      pos[i * 3 + 2] = rr(-0.4, 0.4);
      s.vx = rr(-0.45, 0.45); s.vy = rr(1.2, 2.8); s.vz = rr(-0.45, 0.45);
    } else {
      s.vy += dt * 0.25;                    // buoyancy
      s.vx += Math.sin(t * 3 + i) * dt * 0.6;
      s.vz += Math.cos(t * 2.6 + i) * dt * 0.6;
      s.vx *= 0.985; s.vz *= 0.985;
      pos[i * 3] += s.vx * dt;
      pos[i * 3 + 1] += s.vy * dt;
      pos[i * 3 + 2] += s.vz * dt;
    }
  }
  sparkGeo.attributes.position.needsUpdate = true;

  stars.rotation.y = t * 0.004;

  controls.update();
  renderer.render(scene, camera);
  requestAnimationFrame(animate);
}
animate();
</script>
</body>
</html>
Reasoning trace (2,842 tokens)
Let me write a single HTML file with Three.js via import map, using OrbitControls addon.

Plan:
- Scene with fog (FogExp2 dark blue).
- Ground: large plane with vertex-colored subtle noise, low poly.
- Trees: 30+ procedurally generated low-poly trees (cone + trunk cylinder, flat shading), placed randomly in ring around clearing.
- Rocks: icosahedron geometry flat shaded, random.
- Logs: cylinders around the fire.
- Campfire: cone/stacked triangles flame meshes with vertex animation (shader or CPU), point light with flicker, shadows.
- Sparks: Points with custom positions updated each frame.
- Sky: dark background color, stars as Points, moon as a sphere with emissive material far away.
- OrbitControls with maxPolarAngle to keep camera above ground.
- Resize handler.

Flame: build a group of ~8 cone-ish "flame" meshes with custom shader for animated flame shape, or simpler: use a plane-based billboard shader. A nice approach: ShaderMaterial on a cone geometry with vertex displacement based on time and position. Let's do a shader-based flame on a cone (open ended) with additive blending and vertical gradient. Actually classic: use a plane quad billboarded with a flame shader (noise-based). Simpler and reliable: cone geometry with shader making tapering shape animated.

Let me write a flame shader:

Vertex: compute position along y, sway x/z with sin(time*speed + y*k), scale radius by (1 - y/h) wobble. Use geometry ConeGeometry(r, h, 6, 8) and modify.

I'll do the classic "flame" from three.js example: uses Mesh with PlaneGeometry and shader computing shape from uv. Let me implement a simpler approach: multiple cone meshes with random colors, scaled and animated by CPU each frame, plus additive transparent blending — looks decent low-poly.

Better: shader-based billboard quad flames. I'll write a flame shader on a PlaneGeometry(1,1,1,1) that computes a flame shape in fragment via signed distance of a teardrop, animated with noise. Then billboard by setting each flame mesh's quaternion to camera's. Use a few layers.

Let's do that: fragment shader:
```
vec2 p = vUv*2.-1.;
p.x *= 1.0/(vUv.y*0.9+0.15); // narrowing
```
Hmm, standard approach:

```
float flameShape(vec2 uv, float t){
  float y = uv.y;
  float x = uv.x*2.-1.;
  float w = (1.-y)*0.5;  // width narrowing to top
  float sway = sin(t*3.+y*6.)*0.12*y + sin(t*5.+y*3.)*0.06*y;
  x -= sway;
  w *= smoothstep(0.,0.2,y);
  float d = w - abs(x);
  ...
}
```
Then color mix from white-yellow at base to orange/red to transparent top.

Multiple quads at different scales/rotations, additive blending, depthWrite false.

Also add a "glow" point light and the logs glow.

Sparks: THREE.Points with BufferGeometry, positions updated, additive PointsMaterial with a circular texture generated via canvas.

Stars: Points with sizes, plus moon: sphere mesh at far position with MeshBasicMaterial, plus a sprite glow? Keep simple.

Shadows: point light castShadow = true. PointLight shadow uses cube shadow map — expensive with 6 faces but at 1024 ok. Alternatively use a SpotLight from above for shadows, plus point light for warm glow without shadows. But requirement says warm point light flickers and casts shadows. So enable pointLight.castShadow with shadow.mapSize 1024, and bias.

Set renderer.shadowMap.enabled = true, type PCFSoftShadowMap.

Ground receives shadows. Trees cast shadows maybe limited (distance). Keep tree castShadow true for near ones.

Camera: PerspectiveCamera at (0, 5, 12) looking at (0,1.5,0). OrbitControls target (0,1.2,0), maxPolarAngle ~ 1.45 (keeps above ground relative to target... polar angle from up axis; maxPolarAngle = Math.PI/2 - 0.05 keeps camera above target height). Also minDistance 4, maxDistance 30.

Ground: use a big circle/plane 120x120 with fog; also a darker vignette.

Tree placement: random in ring radius 8..40, avoid fire radius. Also place a few behind for depth. At least 30 trees — do 45.

Trees: trunk cylinder (5 segments) and foliage: 2-3 cones stacked with flat shading, colors dark green-blue. Random scale/rotation.

Rocks: icosahedron detail 0, deformed vertices, flat shading grey.

Logs: cylinders rotated lying, near fire, with glowing ends (emissive orange).

Also add some low grass tufts / small stones scattered? optional.

Also add firelight on ground: point light already.

Firepit ring of small stones.

Add gentle camera auto-rotate? OrbitControls autoRotate slow — nice for demo. Yes autoRotate true, speed 0.5.

"Click or press a key to start" — required if using keyboard. We use OrbitControls mouse; not keyboard necessarily but add message overlay anyway with fade. The demo should be visible from first paint though — the scene renders immediately; the overlay is just a hint. Requirement says games must start in self-playing demo mode behind a message. This isn't a game; scene is animated automatically. I'll include a small hint overlay "Click to look around · drag to orbit" that fades after interaction. Fine.

Let me write the code.

Flame shader details:

```glsl
// vertex
varying vec2 vUv;
void main(){ vUv=uv; gl_Position = projectionMatrix*modelViewMatrix*vec4(position,1.0); }
```
Billboard: I'll set each flame mesh.lookAt(camera.position) each frame — but the mesh is child of a group at fire position; lookAt works in world space for object — Three's Object3D.lookAt handles parents correctly (it accounts for parent world matrix). Yes lookAt supports parented objects (uses world position). But it rotates the object so that its +Z faces target... For a plane, the plane faces +Z by default so lookAt(camera) makes plane face camera. Good.

Fragment:
```glsl
uniform float uTime; uniform vec3 uCol1,uCol2,uCol3; uniform float uSeed; uniform float uOpacity;
varying vec2 vUv;
float hash(float n){return fract(sin(n)*43758.5453);}
void main(){
  vec2 p = vUv*2.0-1.0;
  float y = p.y*0.5+0.5; // 0 bottom 1 top
  float x = p.x;
  float t = uTime*2.0 + uSeed*10.0;
  float sway = (sin(t*1.7 + y*4.0 + uSeed)*0.5 + sin(t*2.9 + y*7.0)*0.25)*0.18*pow(y,1.5);
  x -= sway;
  float width = (1.0 - pow(y,0.75))*0.55;
  width *= smoothstep(0.0,0.12,y);
  float d = width - abs(x);
  float f = smoothstep(0.0,0.12,d);
  f *= smoothstep(1.0,0.6,y); // fade top
  // inner core
  float core = smoothstep(0.0,0.2, (width*0.5) - abs(x)) * smoothstep(0.9,0.35,y);
  vec3 col = mix(uCol3, uCol2, smoothstep(0.0,0.5,y));
  col = mix(col, uCol1, core);
  float alpha = f*uOpacity;
  gl_FragColor = vec4(col* (0.6+0.9*core), alpha);
}
```
Additive blending → alpha works with additive (src*srcAlpha + dst). With AdditiveBlending, three uses blending src=SrcAlpha, dst=One. So color contributes color*alpha. Good.

Colors: base white-yellow uCol1 = (1,0.95,0.7), mid orange (1,0.5,0.1), outer red (0.9,0.15,0.05).

Use several flame quads (6) at slightly different sizes and offsets, plus base glow.

Also embers: Points with additive.

Sparks system: 60 points, each with velocity, life; update positions.

Moon: place mesh sphere at direction, e.g. (-40, 35, -60)? Also add a directional light from moon, cool blue, low intensity, castShadow maybe false to save perf (or true for trees? point light already casts). Add DirectionalLight blue for moon.

Fog: scene.fog = new THREE.FogExp2(0x0a1020, 0.022). Background color same 0x050912. But sky should be dark with stars visible — fog affects stars if they're Points material with fog enabled; set fog:false on star material. Also ground plane radius 200 will be fogged.

Stars: Points across a sphere radius 150, size ~0.6 with sizeAttenuation false.

Also add faint milky way? skip.

Let me write full file.

Performance: point light shadows 6 faces at 1024 — fine. But many shadow casters (trees 45 + logs + rocks) — each shadow pass renders the scene 6 times. ~60 objects, fine.

I'll limit shadow casting to trees within radius 20, rocks near fire.

Write code now.

Ground: PlaneGeometry(300,300, 40,40) rotated, with vertex colors slightly varied (green-dark). flatShading true.

Also add subtle grass patches: small dark green cones? skip, add tiny "bushes" spheres.

Let me produce final HTML.

Details for import map script then module script.

Resize: renderer.setSize(window.innerWidth, window.innerHeight) and camera aspect.

Also pixelRatio min(devicePixelRatio,2).

Let me write.

Tree generation function:
```js
function makeTree(rand){
  const g = new THREE.Group();
  const h = rand*... 
  trunk: CylinderGeometry(0.12,0.2, h*0.5, 6) at y=h*0.25, color 0x3a2a20
  foliage: cone tiers: 3 cones of decreasing radius, ConeGeometry(r, hh, 7) flat shading, color varied dark greens 0x1d3a2a etc.
}
```
Use MeshLambertMaterial with flatShading.

Ground colors: MeshLambertMaterial with vertexColors true and color 0xffffff? Set base color 0x1a2a1c-ish and vertex color variation dark.

Let me just make ground material color 0x1b2a1e with vertexColors modulating brightness.

Fire point light: color 0xff8a3c, intensity varies 2..3 (physically correct? r170 uses physically correct lighting by default: intensity in candela). With distance=25, decay=2. Need intensity high, e.g. 40-80. Let's set intensity ~ 60 with decay 1.4 and distance 30. Tune: in r155+, PointLight intensity is in candela; illuminance falls with decay 2. To light a scene of a few meters, intensity ~ 20-60. I'll use decay=1.6, intensity base 45.

Ambient: HemisphereLight(sky 0x20304a, ground 0x0a1208, 0.35) plus AmbientLight small.

Moon directional: 0x8fa8d8 intensity 0.5.

Fine. Write.

Flame quad sizes: base quads of scale ~2.2 tall, 1.6 wide.

Also add glow sprite at base using canvas radial gradient texture, additive.

Let's write the file.

Also "Click or press a key to start": I'll add overlay div with that text that disappears on click/keydown. Since scene animates regardless, that's ok. But requirement: "The iframe only receives keyboard events after the user clicks it". We don't need keyboard. I'll show "Click and drag to orbit · scroll to zoom" hint. Also add the required "Click or press a key to start" text to be safe — combining: "Click or press a key to start — then drag to orbit".

Implementation of overlay hiding: addEventListener('pointerdown') and 'keydown'.

Let's finalize code.

Sparks points material: PointsMaterial with map from canvas, size 0.12, blending additive, depthWrite false, transparent, sizeAttenuation true.

Sparks update: positions array; each particle has life; recycle.

Write it.

One more: ensure no console errors — avoid deprecated stuff. THREE.sRGBOutputSpace default in r170. Use renderer.outputColorSpace = THREE.SRGBColorSpace (default). ok.

Colors set via setHex are converted assuming sRGB by default (THREE.ColorManagement enabled) — fine.

Write final.