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

Muse Ember

by MetaReasoningClean
Open in new window

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

How it went

Total time
27.9 s
Cost
$0.0073
Output tokens
14,461
Spent thinking
8,109 tokens
Speed
553.6 tok/s
Console errors
0
First token after
1.7 s
First visible text after
20.9 s
Prompt tokens
574
Code size
18.3 KB
Finish reason
stop
Served by
Meta
Model id
meta/muse-ember
Reasoning sent
{"effort":"xhigh"}
Max output
943,718 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 · 406 lines

Download
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Midnight Clearing — Low-Poly Campfire</title>
<style>
  *{box-sizing:border-box}
  html,body{margin:0;height:100%;overflow:hidden;background:#060d1e;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
  canvas{position:fixed;inset:0;display:block}
  .vignette{position:fixed;inset:0;pointer-events:none;z-index:2;background:radial-gradient(ellipse at center,transparent 52%,rgba(0,0,0,.48) 100%)}
  .card{position:fixed;top:18px;left:18px;z-index:10;pointer-events:none;color:#fff;background:rgba(7,13,26,.58);border:1px solid rgba(255,255,255,.09);border-radius:18px;padding:14px 18px 13px;backdrop-filter:blur(12px);box-shadow:0 12px 36px rgba(0,0,0,.35);max-width:320px}
  .card .eyebrow{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:#ffb86b;font-weight:800;margin-bottom:5px}
  .card h1{margin:0;font-size:22px;line-height:1.05;letter-spacing:-.02em}
  .card p{margin:7px 0 0;font-size:12.5px;line-height:1.45;color:rgba(226,236,255,.78)}
  .hint{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:10;pointer-events:none;white-space:nowrap;color:rgba(255,255,255,.88);background:rgba(7,13,26,.55);border:1px solid rgba(255,255,255,.09);border-radius:999px;padding:9px 15px;font-size:12px;backdrop-filter:blur(10px)}
  .controls{position:fixed;right:18px;bottom:18px;z-index:11;display:flex;gap:8px}
  .controls button{cursor:pointer;border:1px solid rgba(255,255,255,.12);background:rgba(7,13,26,.62);color:#fff;border-radius:999px;padding:9px 14px;font-size:12px;font-weight:700;backdrop-filter:blur(10px);transition:.2s}
  .controls button:hover{background:rgba(255,140,40,.25);border-color:rgba(255,180,90,.5)}
  .controls button.off{opacity:.6}
  @media(max-width:640px){
    .card{max-width:230px;padding:11px 14px}.card h1{font-size:18px}.card p{font-size:11px}
    .hint{display:none}.controls{right:12px;bottom:12px}
  }
</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 class="vignette"></div>
<header class="card">
  <div class="eyebrow">★ Night • Forest Clearing</div>
  <h1>Midnight Campfire</h1>
  <p>Low-poly pines, flickering firelight, rising sparks and a moonlit sky. Built with Three.js.</p>
</header>
<div class="hint">Drag to orbit &nbsp;•&nbsp; Scroll to zoom &nbsp;•&nbsp; Camera stays above the ground</div>
<div class="controls">
  <button id="fireBtn" type="button">🔥 Fire On</button>
  <button id="autoBtn" type="button">⟳ Auto-orbit On</button>
</div>

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

/* ---------- seeded random ---------- */
let _seed = 12345;
function rnd(){ _seed = (_seed * 1664525 + 1013904223) >>> 0; return _seed / 4294967296; }
function rr(a,b){ return a + rnd()*(b-a); }

/* ---------- renderer / scene / camera ---------- */
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x060d1e);
scene.fog = new THREE.Fog(0x0a1628, 22, 88);

const camera = new THREE.PerspectiveCamera(55, innerWidth/innerHeight, 0.1, 400);
camera.position.set(12.5, 6.2, 14.5);

const renderer = new THREE.WebGLRenderer({ antialias:true });
renderer.setSize(innerWidth, innerHeight);
renderer.setPixelRatio(Math.min(devicePixelRatio, 2));
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.toneMappingExposure = 1.18;
renderer.outputColorSpace = THREE.SRGBColorSpace;
document.body.appendChild(renderer.domElement);

const controls = new OrbitControls(camera, renderer.domElement);
controls.target.set(0, 1.2, 0);
controls.enableDamping = true;
controls.dampingFactor = 0.06;
controls.enablePan = false;
controls.minDistance = 4.5;
controls.maxDistance = 42;
controls.minPolarAngle = 0.15;
controls.maxPolarAngle = Math.PI * 0.49; // never below ground
controls.autoRotate = true;
controls.autoRotateSpeed = 0.55;

/* ---------- lights ---------- */
scene.add(new THREE.HemisphereLight(0x334a73, 0x101f14, 0.6));

const moonLight = new THREE.DirectionalLight(0x9db8ff, 0.75);
moonLight.position.set(-30, 38, -40);
moonLight.castShadow = true;
moonLight.shadow.mapSize.set(1024,1024);
moonLight.shadow.camera.left = -45; moonLight.shadow.camera.right = 45;
moonLight.shadow.camera.top = 45; moonLight.shadow.camera.bottom = -45;
moonLight.shadow.camera.far = 120;
scene.add(moonLight);

const fireLight = new THREE.PointLight(0xff7a26, 42, 38, 1.9);
fireLight.position.set(0, 1.6, 0);
fireLight.castShadow = true;
fireLight.shadow.mapSize.set(1024,1024);
fireLight.shadow.camera.near = 0.4;
fireLight.shadow.camera.far = 35;
fireLight.shadow.bias = -0.005;
scene.add(fireLight);

/* ---------- helpers ---------- */
function glowTexture(){
  const c = document.createElement('canvas'); c.width = c.height = 128;
  const g = c.getContext('2d');
  const grad = g.createRadialGradient(64,64,0,64,64,64);
  grad.addColorStop(0,'rgba(255,255,255,1)');
  grad.addColorStop(0.25,'rgba(255,255,255,.55)');
  grad.addColorStop(0.6,'rgba(255,255,255,.14)');
  grad.addColorStop(1,'rgba(255,255,255,0)');
  g.fillStyle = grad; g.fillRect(0,0,128,128);
  const t = new THREE.CanvasTexture(c); return t;
}
const glowTex = glowTexture();

/* ---------- ground ---------- */
const groundGeo = new THREE.PlaneGeometry(180,180,36,36);
groundGeo.rotateX(-Math.PI/2);
{
  const p = groundGeo.attributes.position;
  for(let i=0;i<p.count;i++){
    const x=p.getX(i), z=p.getZ(i), d=Math.hypot(x,z);
    if(d>10){
      const h = (Math.sin(x*0.18)*Math.cos(z*0.16)*0.7 + Math.sin(x*0.05+z*0.04)*1.1) * Math.min(1,(d-10)/18);
      p.setY(i, h);
    }
  }
  groundGeo.computeVertexNormals();
}
const ground = new THREE.Mesh(groundGeo, new THREE.MeshStandardMaterial({ color:0x182b1e, roughness:1, flatShading:true }));
ground.receiveShadow = true;
scene.add(ground);

const dirt = new THREE.Mesh(new THREE.CircleGeometry(5.8,28), new THREE.MeshStandardMaterial({ color:0x3b2d1e, roughness:1, flatShading:true }));
dirt.geometry.rotateX(-Math.PI/2); dirt.position.y = 0.02; dirt.receiveShadow = true; scene.add(dirt);

const ash = new THREE.Mesh(new THREE.CircleGeometry(1.35,20), new THREE.MeshStandardMaterial({ color:0x171717, roughness:1 }));
ash.geometry.rotateX(-Math.PI/2); ash.position.y = 0.04; ash.receiveShadow = true; scene.add(ash);

/* ---------- sky: stars + moon ---------- */
{
  const N=900, pos=new Float32Array(N*3);
  for(let i=0;i<N;i++){
    const a=rnd()*Math.PI*2, e=Math.acos(rnd()*0.92), r=150;
    pos[i*3]=Math.sin(e)*Math.cos(a)*r;
    pos[i*3+1]=Math.cos(e)*r+4;
    pos[i*3+2]=Math.sin(e)*Math.sin(a)*r;
  }
  const g=new THREE.BufferGeometry(); g.setAttribute('position', new THREE.BufferAttribute(pos,3));
  const stars=new THREE.Points(g, new THREE.PointsMaterial({ color:0xdfeaff, size:1.7, sizeAttenuation:false, transparent:true, opacity:0.92, fog:false, depthWrite:false }));
  scene.add(stars);
}
const moon = new THREE.Mesh(new THREE.SphereGeometry(3.2,20,20), new THREE.MeshBasicMaterial({ color:0xf6efcf, fog:false }));
moon.position.set(-38,32,-58); scene.add(moon);
const moonGlow = new THREE.Sprite(new THREE.SpriteMaterial({ map:glowTex, color:0xbdd2ff, transparent:true, opacity:0.28, blending:THREE.AdditiveBlending, depthWrite:false, fog:false }));
moonGlow.position.copy(moon.position); moonGlow.scale.set(22,22,1); scene.add(moonGlow);

/* clouds */
const clouds=[];
{
  const mat=new THREE.MeshStandardMaterial({ color:0x18263f, roughness:1, flatShading:true });
  const geo=new THREE.IcosahedronGeometry(1,0);
  for(let i=0;i<5;i++){
    const cl=new THREE.Group();
    for(let j=0;j<3;j++){
      const m=new THREE.Mesh(geo,mat);
      m.position.set(j*2.2-2.2, rnd()*0.3, rnd()*0.6);
      m.scale.set(2.6+rnd()*1.6, 0.7+rnd()*0.4, 1.4+rnd()*0.6);
      cl.add(m);
    }
    cl.position.set(rr(-55,55), rr(30,42), rr(-55,20));
    cl.userData.speed = 0.35 + rnd()*0.4;
    clouds.push(cl); scene.add(cl);
  }
}

/* ---------- trees (78) ---------- */
const trunkGeo = new THREE.CylinderGeometry(0.22,0.36,1.5,5); trunkGeo.translate(0,0.75,0);
const leaf1 = new THREE.ConeGeometry(1.55,2.7,6); leaf1.translate(0,2.3,0);
const leaf2 = new THREE.ConeGeometry(1.15,2.1,6); leaf2.translate(0,3.55,0);
const leaf3 = new THREE.ConeGeometry(0.72,1.5,6); leaf3.translate(0,4.65,0);
const trunkMat = new THREE.MeshStandardMaterial({ color:0x5a3d24, roughness:1, flatShading:true });
const leafMats = [0x0f2e1f,0x17402a,0x1a4d2e,0x123624].map(c=>new THREE.MeshStandardMaterial({ color:c, roughness:1, flatShading:true }));

for(let i=0;i<78;i++){
  const a = rnd()*Math.PI*2;
  const r = 13.5 + Math.pow(rnd(),1.15)*58;
  const x = Math.cos(a)*r, z = Math.sin(a)*r;
  const s = rr(0.9,2.15) + r*0.006;
  const tree = new THREE.Group();
  tree.position.set(x,0,z);
  tree.rotation.y = rnd()*Math.PI*2;
  tree.scale.setScalar(s);
  const trunk = new THREE.Mesh(trunkGeo, trunkMat); trunk.castShadow=true; tree.add(trunk);
  const lm = leafMats[Math.floor(rnd()*leafMats.length)];
  [leaf1,leaf2,leaf3].forEach(g=>{ const m=new THREE.Mesh(g,lm); m.castShadow=true; m.receiveShadow=true; tree.add(m); });
  scene.add(tree);
}

/* ---------- rocks & grass ---------- */
const rockGeo = new THREE.IcosahedronGeometry(1,0);
const rockMat = new THREE.MeshStandardMaterial({ color:0x6f7a86, roughness:1, flatShading:true });
for(let i=0;i<28;i++){
  const a=rnd()*Math.PI*2, r=rr(3.4,46);
  const rock=new THREE.Mesh(rockGeo,rockMat);
  const sx=rr(0.3,1.25), sy=rr(0.2,0.65);
  rock.position.set(Math.cos(a)*r, sy*0.35, Math.sin(a)*r);
  rock.scale.set(sx,sy,rr(0.3,1.1));
  rock.rotation.set(rnd()*3,rnd()*3,rnd()*3);
  rock.castShadow=true; rock.receiveShadow=true; scene.add(rock);
}
const grassGeo = new THREE.ConeGeometry(0.18,0.55,4);
const grassMat = new THREE.MeshStandardMaterial({ color:0x1e4d2e, roughness:1, flatShading:true });
for(let i=0;i<55;i++){
  const a=rnd()*Math.PI*2, r=rr(3,32);
  const g=new THREE.Mesh(grassGeo,grassMat);
  g.position.set(Math.cos(a)*r,0.22,Math.sin(a)*r);
  g.scale.setScalar(rr(0.7,1.6)); g.rotation.y=rnd()*3; scene.add(g);
}

/* ---------- seating logs ---------- */
const logGeo = new THREE.CylinderGeometry(0.34,0.34,3.0,7); logGeo.rotateZ(Math.PI/2);
const logMat = new THREE.MeshStandardMaterial({ color:0x6b4a2b, roughness:1, flatShading:true });
const endMat = new THREE.MeshStandardMaterial({ color:0xc9a06a, roughness:1, flatShading:true });
for(let i=0;i<5;i++){
  const a=(i/5)*Math.PI*2 + 0.35;
  const log=new THREE.Mesh(logGeo,logMat);
  log.position.set(Math.cos(a)*4.4,0.34,Math.sin(a)*4.4);
  log.rotation.y = -a + Math.PI/2;
  log.castShadow=true; log.receiveShadow=true; scene.add(log);
  const cap=new THREE.Mesh(new THREE.CircleGeometry(0.34,7),endMat);
  cap.position.set(1.51,0,0); cap.rotation.y=Math.PI/2; log.add(cap);
}

/* ---------- tents ---------- */
function makeTent(color,x,z,rot,s){
  const g=new THREE.Group(); g.position.set(x,0,z); g.rotation.y=rot; g.scale.setScalar(s);
  const body=new THREE.Mesh(new THREE.ConeGeometry(2.1,1.8,4), new THREE.MeshStandardMaterial({ color, roughness:1, flatShading:true }));
  body.position.y=0.9; body.rotation.y=Math.PI/4; body.scale.z=1.35; body.castShadow=true; body.receiveShadow=true; g.add(body);
  const door=new THREE.Mesh(new THREE.ConeGeometry(0.65,1.05,4), new THREE.MeshStandardMaterial({ color:0x101418, roughness:1, flatShading:true }));
  door.position.set(0,0.52,1.05); door.rotation.y=Math.PI/4; door.scale.z=0.45; g.add(door);
  scene.add(g);
}
makeTent(0xd97706,-8,-5.5,0.7,1);
makeTent(0x0f766e,8.5,-6.5,-0.5,0.85);

/* mushrooms */
for(let i=0;i<6;i++){
  const a=rnd()*Math.PI*2, r=rr(4.8,8);
  const g=new THREE.Group(); g.position.set(Math.cos(a)*r,0,Math.sin(a)*r);
  const stem=new THREE.Mesh(new THREE.CylinderGeometry(0.09,0.11,0.3,6), new THREE.MeshStandardMaterial({ color:0xe8dcc0, roughness:1, flatShading:true }));
  stem.position.y=0.15; g.add(stem);
  const cap=new THREE.Mesh(new THREE.SphereGeometry(0.24,8,6,0,Math.PI*2,0,Math.PI/2), new THREE.MeshStandardMaterial({ color:0xc0392b, roughness:1, flatShading:true }));
  cap.position.y=0.28; cap.castShadow=true; g.add(cap); scene.add(g);
}

/* ---------- campfire ---------- */
const fireGroup = new THREE.Group(); scene.add(fireGroup);

/* stone ring */
for(let i=0;i<11;i++){
  const a=(i/11)*Math.PI*2;
  const s=new THREE.Mesh(rockGeo,rockMat);
  s.position.set(Math.cos(a)*1.55,0.16,Math.sin(a)*1.55);
  s.scale.set(rr(0.24,0.36),rr(0.18,0.26),rr(0.24,0.36));
  s.rotation.set(rnd()*3,rnd()*3,rnd()*3);
  s.castShadow=true; s.receiveShadow=true; fireGroup.add(s);
}
/* firewood (crossed logs) */
const fireWoodGeo = new THREE.CylinderGeometry(0.13,0.16,1.7,6); fireWoodGeo.rotateZ(Math.PI/2);
for(let i=0;i<4;i++){
  const w=new THREE.Mesh(fireWoodGeo,logMat);
  w.position.y = i<2 ? 0.16 : 0.38;
  w.rotation.y = i*0.7 + 0.3;
  w.castShadow=true; w.receiveShadow=true; fireGroup.add(w);
}
/* glowing embers */
const emberGeo=new THREE.SphereGeometry(0.09,6,5);
const emberMat=new THREE.MeshBasicMaterial({ color:0xff6622 });
for(let i=0;i<9;i++){
  const e=new THREE.Mesh(emberGeo,emberMat);
  const a=rnd()*Math.PI*2, r=rnd()*0.55;
  e.position.set(Math.cos(a)*r,0.12+rnd()*0.1,Math.sin(a)*r);
  e.scale.setScalar(rr(0.7,1.4)); fireGroup.add(e);
}
/* flames */
const flames=[];
function makeFlame(radius,height,color,opacity,bx,bz){
  const geo=new THREE.ConeGeometry(radius,height,7); geo.translate(0,height/2,0);
  const mesh=new THREE.Mesh(geo,new THREE.MeshBasicMaterial({ color, transparent:true, opacity, depthWrite:false }));
  mesh.position.set(bx,0.22,bz);
  mesh.userData.baseX=bx; mesh.userData.baseZ=bz;
  fireGroup.add(mesh); flames.push(mesh); return mesh;
}
makeFlame(0.95,2.3,0xff5a00,0.72,0,0);
makeFlame(0.65,1.78,0xff8c1a,0.86,0,0);
makeFlame(0.38,1.18,0xffd54a,0.96,0,0);
makeFlame(0.32,0.95,0xff7a1a,0.80,0.36,0.12);
makeFlame(0.30,0.85,0xff7a1a,0.80,-0.32,-0.1);

/* fire glow sprite */
const glow=new THREE.Sprite(new THREE.SpriteMaterial({ map:glowTex, color:0xff8833, transparent:true, opacity:0.42, blending:THREE.AdditiveBlending, depthWrite:false }));
glow.position.set(0,1.3,0); glow.scale.set(6.4,6.4,1); scene.add(glow);

/* ---------- sparks particle system ---------- */
const sparkCount=110;
const sparkPos=new Float32Array(sparkCount*3);
const sparkSpeed=new Float32Array(sparkCount);
const sparkPhase=new Float32Array(sparkCount);
for(let i=0;i<sparkCount;i++){
  sparkPos[i*3]=(Math.random()-0.5)*0.7;
  sparkPos[i*3+1]=Math.random()*4;
  sparkPos[i*3+2]=(Math.random()-0.5)*0.7;
  sparkSpeed[i]=0.9+Math.random()*1.7;
  sparkPhase[i]=Math.random()*Math.PI*2;
}
const sparkGeo=new THREE.BufferGeometry();
sparkGeo.setAttribute('position',new THREE.BufferAttribute(sparkPos,3));
const sparks=new THREE.Points(sparkGeo,new THREE.PointsMaterial({ color:0xffb84d, size:0.13, transparent:true, opacity:0.95, blending:THREE.AdditiveBlending, depthWrite:false }));
sparks.frustumCulled=false; scene.add(sparks);

/* fireflies */
const ffCount=24, ffPos=new Float32Array(ffCount*3), ffBase=[], ffPhase=[];
for(let i=0;i<ffCount;i++){
  const a=Math.random()*Math.PI*2, r=5+Math.random()*13;
  const bx=Math.cos(a)*r, bz=Math.sin(a)*r, by=0.6+Math.random()*1.8;
  ffBase.push([bx,by,bz]); ffPhase.push(Math.random()*Math.PI*2);
  ffPos[i*3]=bx; ffPos[i*3+1]=by; ffPos[i*3+2]=bz;
}
const ffGeo=new THREE.BufferGeometry(); ffGeo.setAttribute('position',new THREE.BufferAttribute(ffPos,3));
const fireflies=new THREE.Points(ffGeo,new THREE.PointsMaterial({ color:0xcfff7a, size:0.12, transparent:true, opacity:0.9, blending:THREE.AdditiveBlending, depthWrite:false }));
fireflies.frustumCulled=false; scene.add(fireflies);

/* ---------- UI toggles ---------- */
let fireOn=true, autoOn=true, idleTimer=null;
const fireBtn=document.getElementById('fireBtn'), autoBtn=document.getElementById('autoBtn');
fireBtn.addEventListener('click',()=>{
  fireOn=!fireOn;
  fireGroup.visible=fireOn; fireLight.visible=fireOn; glow.visible=fireOn; sparks.visible=fireOn;
  fireBtn.textContent=fireOn?'🔥 Fire On':'🌑 Fire Off';
  fireBtn.classList.toggle('off',!fireOn);
});
autoBtn.addEventListener('click',()=>{
  autoOn=!autoOn; controls.autoRotate=autoOn;
  autoBtn.textContent=autoOn?'⟳ Auto-orbit On':'⟳ Auto-orbit Off';
  autoBtn.classList.toggle('off',!autoOn);
});
controls.addEventListener('start',()=>{ controls.autoRotate=false; clearTimeout(idleTimer); });
controls.addEventListener('end',()=>{ idleTimer=setTimeout(()=>{ if(autoOn) controls.autoRotate=true; },2600); });

/* ---------- resize ---------- */
addEventListener('resize',()=>{
  camera.aspect=innerWidth/innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(innerWidth,innerHeight);
});

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

  if(fireOn){
    flames.forEach((m,i)=>{
      const s=1+Math.sin(t*11+i*1.7)*0.12+Math.sin(t*23+i)*0.06;
      m.scale.set(s,1+Math.sin(t*13+i*2.1)*0.18+Math.cos(t*17+i)*0.07,s);
      m.rotation.y+=dt*(0.5+i*0.18);
      m.position.x=m.userData.baseX+Math.sin(t*9+i*3)*0.05;
      m.position.z=m.userData.baseZ+Math.cos(t*8+i*2)*0.05;
    });
    fireLight.intensity=40+Math.sin(t*12)*5+Math.sin(t*27+1.3)*3.5+(Math.random()-0.5)*4;
    fireLight.position.x=(Math.random()-0.5)*0.18;
    fireLight.position.z=(Math.random()-0.5)*0.18;
    glow.material.opacity=0.36+Math.sin(t*10)*0.06;
    const gs=6.3+Math.sin(t*9)*0.5; glow.scale.set(gs,gs,1);

    const p=sparkGeo.attributes.position.array;
    for(let i=0;i<sparkCount;i++){
      const idx=i*3;
      p[idx+1]+=sparkSpeed[i]*dt;
      p[idx]+=Math.sin(t*4+sparkPhase[i])*0.003+dt*0.12;
      p[idx+2]+=Math.cos(t*3+sparkPhase[i])*0.003;
      if(p[idx+1]>4.6){ p[idx+1]=0.55; p[idx]=(Math.random()-0.5)*0.7; p[idx+2]=(Math.random()-0.5)*0.7; }
    }
    sparkGeo.attributes.position.needsUpdate=true;
  }

  const fp=ffGeo.attributes.position.array;
  for(let i=0;i<ffCount;i++){
    const b=ffBase[i], ph=ffPhase[i];
    fp[i*3]=b[0]+Math.sin(t*0.7+ph)*0.9;
    fp[i*3+1]=b[1]+Math.sin(t*1.1+ph*2)*0.35;
    fp[i*3+2]=b[2]+Math.cos(t*0.6+ph)*0.9;
  }
  ffGeo.attributes.position.needsUpdate=true;

  clouds.forEach(c=>{ c.position.x+=dt*c.userData.speed; if(c.position.x>75) c.position.x=-75; });

  controls.update();
  renderer.render(scene,camera);
}
animate();
</script>
</body>
</html>
Reasoning trace (8,109 tokens)
Implementing a Threejs low-poly campfire scene with animated flames, particles, lighting, controls, and responsive rendering.Adding auto-rotate camera, UI overlay, and low-poly geometry for stars, terrain, trees, rocks, and animated flame cones.Adding lighting, fog, camera controls, particle embers, and low-poly scene props with import mapping.Configuring Three.js lighting, shadows, camera controls, and particle animations for the scene.Adding HTML scaffolding, UI layout, pixel ratio clamping, and control limits with damping and auto-rotate pause logic.Adjusting rotation to align the mesh tangent, switching to stacked logs and adding tents, mushrooms, stars, moon, fog, clouds, and fireflies.Implementing firefly and spark particle updates with clamped delta and position resets.Adding optional UI controls for auto-orbit and fire toggles with backdrop styling and event handling.