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
16.1 s
Cost
$0.0046
Output tokens
9,040
Spent thinking
2,702 tokens
Speed
625.3 tok/s
Console errors
0
First token after
1.6 s
First visible text after
7.9 s
Prompt tokens
574
Code size
18.2 KB
Finish reason
stop
Served by
Meta
Model id
meta/muse-ember
Reasoning sent
{"effort":"high"}
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 · 335 lines

Download
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Campfire Clearing — Low-Poly Night Forest</title>
<style>
  * { margin:0; padding:0; box-sizing:border-box; }
  html,body { width:100%; height:100%; overflow:hidden; background:#070b1d; font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; color:#e8ecff; }
  #app { position:fixed; inset:0; }
  canvas { display:block; }
  .vignette { position:fixed; inset:0; pointer-events:none; background:radial-gradient(ellipse at center, transparent 55%, rgba(2,4,18,.55) 100%); z-index:2; }
  .panel { position:fixed; top:18px; left:18px; z-index:10; max-width:340px; padding:16px 18px 14px; border-radius:18px; background:linear-gradient(160deg, rgba(10,14,38,.78), rgba(8,10,28,.55)); border:1px solid rgba(255,255,255,.14); backdrop-filter: blur(10px); box-shadow:0 12px 40px rgba(0,0,0,.45); pointer-events:none; }
  .panel h1 { font-size:22px; letter-spacing:.02em; line-height:1.1; font-weight:800; }
  .panel h1 span { color:#ffb347; }
  .panel p { margin-top:8px; font-size:13px; line-height:1.55; color:#c7cdf5; }
  .chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; }
  .chip { font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; padding:6px 9px; border-radius:999px; background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.12); color:#dfe4ff; }
  .chip.warm { background:rgba(255,122,26,.22); border-color:rgba(255,170,80,.35); color:#ffd9a8; }
  .hint { position:fixed; left:18px; bottom:18px; z-index:10; display:flex; align-items:center; gap:10px; padding:10px 13px; border-radius:999px; background:rgba(7,9,26,.72); border:1px solid rgba(255,255,255,.13); backdrop-filter:blur(8px); font-size:12.5px; color:#cfd6ff; pointer-events:none; }
  .hint b { color:#fff; }
  .dot { width:8px; height:8px; border-radius:50%; background:#ffb347; box-shadow:0 0 12px #ff8c1a; animation:pulse 1.6s infinite; }
  @keyframes pulse { 0%,100%{transform:scale(1); opacity:1} 50%{transform:scale(.65); opacity:.6} }
  #orbitBtn { position:fixed; right:18px; bottom:18px; z-index:11; border:1px solid rgba(255,255,255,.18); background:rgba(10,14,38,.82); color:#fff; font:700 13px system-ui; padding:11px 16px; border-radius:999px; cursor:pointer; backdrop-filter:blur(8px); box-shadow:0 10px 28px rgba(0,0,0,.4); transition:.2s; }
  #orbitBtn:hover { transform:translateY(-1px); background:rgba(255,122,26,.28); border-color:rgba(255,180,90,.5); }
  .badge { position:fixed; right:18px; top:18px; z-index:10; font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; padding:8px 11px; border-radius:999px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.13); color:#aeb8ff; pointer-events:none; }
  @media (max-width:640px){ .panel{ max-width:calc(100vw - 36px); padding:13px 15px; } .panel h1{font-size:19px} .panel p{font-size:12px} .badge{display:none} .hint{ right:18px; font-size:11.5px; } #orbitBtn{ bottom:68px; } }
</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 class="vignette"></div>

<div class="panel">
  <h1>🔥 Campfire <span>Clearing</span></h1>
  <p>A low-poly forest at night. Warm firelight flickers across the logs and rocks while sparks drift into the dark, star-filled sky.</p>
  <div class="chips"><span class="chip warm">60+ Trees</span><span class="chip">Live Sparks</span><span class="chip">Moonlight</span><span class="chip">Fog</span></div>
</div>
<div class="badge">Three.js • Low-Poly • Night</div>
<div class="hint"><span class="dot"></span><span><b>Drag</b> to orbit &nbsp;•&nbsp; <b>Scroll</b> to zoom &nbsp;•&nbsp; Camera stays above ground</span></div>
<button id="orbitBtn">⏸ Pause Auto-Orbit</button>

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

const container = document.getElementById('app');
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x070b1f);
scene.fog = new THREE.Fog(0x0b1026, 18, 68);

const camera = new THREE.PerspectiveCamera(55, innerWidth/innerHeight, 0.1, 300);
camera.position.set(10.5, 5.2, 12.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.05;
renderer.outputColorSpace = THREE.SRGBColorSpace;
container.appendChild(renderer.domElement);

const controls = new OrbitControls(camera, renderer.domElement);
controls.target.set(0, 1.1, 0);
controls.enableDamping = true;
controls.dampingFactor = 0.05;
controls.enablePan = false;
controls.minDistance = 5;
controls.maxDistance = 48;
controls.minPolarAngle = 0.15;
controls.maxPolarAngle = Math.PI/2 - 0.04; // stays above ground
controls.autoRotate = true;
controls.autoRotateSpeed = 0.55;
controls.addEventListener('start', () => { controls.autoRotate = false; syncBtn(); });

const btn = document.getElementById('orbitBtn');
function syncBtn(){ btn.textContent = controls.autoRotate ? '⏸ Pause Auto-Orbit' : '▶ Resume Auto-Orbit'; }
btn.addEventListener('click', () => { controls.autoRotate = !controls.autoRotate; syncBtn(); });

// Lights
scene.add(new THREE.HemisphereLight(0x3a4a7a, 0x16210f, 0.75));
scene.add(new THREE.AmbientLight(0x2a3566, 0.55));
const moonLight = new THREE.DirectionalLight(0x8fa3ff, 0.65);
moonLight.position.set(-28, 38, -22);
scene.add(moonLight);

const fireLight = new THREE.PointLight(0xff7b24, 28, 28, 2);
fireLight.position.set(0, 1.15, 0);
fireLight.castShadow = true;
fireLight.shadow.mapSize.set(1024,1024);
fireLight.shadow.camera.near = 0.3;
fireLight.shadow.camera.far = 22;
fireLight.shadow.bias = -0.004;
scene.add(fireLight);
const fireLight2 = new THREE.PointLight(0xffc46b, 6, 10, 2);
fireLight2.position.set(0, 0.6, 0);
scene.add(fireLight2);

// Helpers
const rand = (a,b)=>a+Math.random()*(b-a);
function groundHeight(x,z){
  const r = Math.hypot(x,z);
  if(r < 10) return 0;
  const t = Math.min(1,(r-10)/12);
  return (Math.sin(x*0.22)*Math.cos(z*0.27)*0.75 + Math.sin(x*0.07+z*0.11)*1.1) * t;
}
function makeGlowTexture(){
  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,'rgba(255,255,255,1)'); g.addColorStop(0.35,'rgba(255,255,255,.55)'); g.addColorStop(1,'rgba(255,255,255,0)');
  ctx.fillStyle=g; ctx.fillRect(0,0,128,128); return new THREE.CanvasTexture(c);
}
const glowTex = makeGlowTexture();

// Ground
const groundGeo = new THREE.PlaneGeometry(170,170,42,42);
groundGeo.rotateX(-Math.PI/2);
{
  const pos = groundGeo.attributes.position;
  for(let i=0;i<pos.count;i++){ const x=pos.getX(i), z=pos.getZ(i); pos.setY(i, groundHeight(x,z)); }
  groundGeo.computeVertexNormals();
}
const ground = new THREE.Mesh(groundGeo, new THREE.MeshStandardMaterial({ color:0x1d3522, roughness:1, flatShading:true }));
ground.receiveShadow = true;
scene.add(ground);

// Dirt clearing
const dirt = new THREE.Mesh(new THREE.CircleGeometry(5.2, 28), new THREE.MeshStandardMaterial({ color:0x4a3826, roughness:1, flatShading:true }));
dirt.rotation.x = -Math.PI/2; dirt.position.y = 0.02; dirt.receiveShadow = true; scene.add(dirt);
const dirt2 = new THREE.Mesh(new THREE.CircleGeometry(2.2, 22), new THREE.MeshStandardMaterial({ color:0x33261a, roughness:1, flatShading:true }));
dirt2.rotation.x = -Math.PI/2; dirt2.position.y = 0.035; dirt2.receiveShadow = true; scene.add(dirt2);

// Stars
{
  const N=950, p=new Float32Array(N*3);
  for(let i=0;i<N;i++){
    const t=Math.random()*Math.PI*2, ph=Math.acos(rand(0.05,1)), r=125;
    p[i*3]=r*Math.sin(ph)*Math.cos(t); p[i*3+1]=r*Math.cos(ph)+4; p[i*3+2]=r*Math.sin(ph)*Math.sin(t);
  }
  const g=new THREE.BufferGeometry(); g.setAttribute('position', new THREE.BufferAttribute(p,3));
  const m=new THREE.PointsMaterial({ color:0xffffff, size:1.6, sizeAttenuation:false, transparent:true, opacity:0.9, fog:false, depthWrite:false });
  scene.add(new THREE.Points(g,m));
}
// Moon
const moon = new THREE.Mesh(new THREE.SphereGeometry(4.6, 24, 24), new THREE.MeshBasicMaterial({ color:0xf6f0c8, fog:false }));
moon.position.set(-38, 44, -58); scene.add(moon);
const moonGlow = new THREE.Sprite(new THREE.SpriteMaterial({ map:glowTex, color:0xfff3a6, transparent:true, opacity:0.38, blending:THREE.AdditiveBlending, depthWrite:false, fog:false }));
moonGlow.position.copy(moon.position); moonGlow.scale.set(30,30,1); scene.add(moonGlow);

// Trees
const trunkMat = new THREE.MeshStandardMaterial({ color:0x5b3d26, roughness:1, flatShading:true });
const leafMats = [0x1d4a2b,0x245c34,0x173d26,0x2a6b3a].map(c=>new THREE.MeshStandardMaterial({ color:c, roughness:1, flatShading:true }));
const treePositions=[];
function createTree(s){
  const g=new THREE.Group();
  const trunk=new THREE.Mesh(new THREE.CylinderGeometry(0.14*s,0.22*s,1.0*s,6), trunkMat); trunk.position.y=0.5*s; g.add(trunk);
  const mat=leafMats[Math.floor(Math.random()*leafMats.length)];
  [[1.05,1.9,1.55],[0.78,1.45,2.45],[0.52,1.15,3.2]].forEach(([r,h,y])=>{
    const cone=new THREE.Mesh(new THREE.ConeGeometry(r*s,h*s,7), mat); cone.position.y=y*s; g.add(cone);
  });
  g.traverse(o=>{ if(o.isMesh){o.castShadow=true; o.receiveShadow=true;} });
  return g;
}
let treeCount=0, attempts=0;
while(treeCount<62 && attempts<600){
  attempts++;
  const a=Math.random()*Math.PI*2, r=15.5+Math.pow(Math.random(),0.75)*52;
  const x=Math.cos(a)*r, z=Math.sin(a)*r;
  if(treePositions.some(p=>Math.hypot(p[0]-x,p[1]-z)<3.4)) continue;
  treePositions.push([x,z]);
  const t=createTree(rand(0.85,1.7)); t.position.set(x, groundHeight(x,z)-0.05, z); t.rotation.y=Math.random()*Math.PI*2; scene.add(t); treeCount++;
}
// Bushes, grass, rocks, mushrooms
const rockMat=new THREE.MeshStandardMaterial({ color:0x6b7280, roughness:1, flatShading:true });
function addRock(x,z,s){
  const m=new THREE.Mesh(new THREE.IcosahedronGeometry(s,0), rockMat);
  m.position.set(x, groundHeight(x,z)+s*0.35, z); m.rotation.set(Math.random()*3,Math.random()*3,Math.random()*3); m.scale.y=0.65; m.castShadow=m.receiveShadow=true; scene.add(m);
}
for(let i=0;i<22;i++){ const a=Math.random()*Math.PI*2, r=rand(3.5,38); addRock(Math.cos(a)*r, Math.sin(a)*r, rand(0.18,0.65)); }
for(let i=0;i<14;i++){ const a=Math.random()*Math.PI*2, r=rand(44,66); addRock(Math.cos(a)*r, Math.sin(a)*r, rand(0.5,1.2)); }

const bushMat=new THREE.MeshStandardMaterial({ color:0x1b3d24, roughness:1, flatShading:true });
for(let i=0;i<26;i++){
  const a=Math.random()*Math.PI*2, r=rand(10,42), x=Math.cos(a)*r, z=Math.sin(a)*r;
  const b=new THREE.Mesh(new THREE.IcosahedronGeometry(rand(0.5,1.1),0), bushMat);
  b.position.set(x, groundHeight(x,z)+0.35, z); b.scale.y=0.6; b.castShadow=b.receiveShadow=true; scene.add(b);
}
const grassMat=new THREE.MeshStandardMaterial({ color:0x2f6b3a, roughness:1, flatShading:true });
for(let i=0;i<110;i++){
  const a=Math.random()*Math.PI*2, r=rand(3.2,20), x=Math.cos(a)*r, z=Math.sin(a)*r;
  const g=new THREE.Mesh(new THREE.ConeGeometry(rand(0.09,0.18), rand(0.35,0.7), 5), grassMat);
  g.position.set(x, groundHeight(x,z)+0.2, z); g.castShadow=true; scene.add(g);
}
// Mushrooms with tiny glow caps
for(let i=0;i<8;i++){
  const a=Math.random()*Math.PI*2, r=rand(7,18), x=Math.cos(a)*r, z=Math.sin(a)*r, y=groundHeight(x,z);
  const stem=new THREE.Mesh(new THREE.CylinderGeometry(0.06,0.08,0.3,6), new THREE.MeshStandardMaterial({color:0xe8dcc3,flatShading:true})); stem.position.set(x,y+0.15,z); scene.add(stem);
  const cap=new THREE.Mesh(new THREE.ConeGeometry(0.2,0.18,8), new THREE.MeshStandardMaterial({color:0xb83a2a, emissive:0x5a0f06, flatShading:true})); cap.position.set(x,y+0.36,z); cap.castShadow=true; scene.add(cap);
}
// Scattered logs / stumps
const logMat=new THREE.MeshStandardMaterial({ color:0x6b4423, roughness:1, flatShading:true });
function addLog(x,z,rot,length=1.6){
  const m=new THREE.Mesh(new THREE.CylinderGeometry(0.18,0.18,length,8), logMat);
  m.position.set(x, groundHeight(x,z)+0.18, z); m.rotation.z=Math.PI/2; m.rotation.y=rot; m.castShadow=m.receiveShadow=true; scene.add(m);
  const a=new THREE.Mesh(new THREE.CircleGeometry(0.18,8), new THREE.MeshStandardMaterial({color:0xc9a06a,flatShading:true}));
  a.position.set(x-Math.cos(rot)*length/2, groundHeight(x,z)+0.18, z+Math.sin(rot)*length/2); a.rotation.y = rot+Math.PI/2; scene.add(a);
}
addLog(6.5,3.5,0.6); addLog(-7,4,1.2); addLog(4,-8,-0.4); addLog(-5,-6,2.1);
for(let i=0;i<5;i++){ const a=Math.random()*Math.PI*2, r=rand(9,16); const x=Math.cos(a)*r,z=Math.sin(a)*r; const s=new THREE.Mesh(new THREE.CylinderGeometry(0.55,0.65,0.7,8), logMat); s.position.set(x,groundHeight(x,z)+0.35,z); s.castShadow=s.receiveShadow=true; scene.add(s); }

// Campfire stone ring
for(let i=0;i<11;i++){
  const a=(i/11)*Math.PI*2, x=Math.cos(a)*1.25, z=Math.sin(a)*1.25;
  const s=new THREE.Mesh(new THREE.DodecahedronGeometry(rand(0.2,0.3),0), rockMat);
  s.position.set(x,0.14,z); s.rotation.set(Math.random()*3,Math.random()*3,Math.random()*3); s.castShadow=s.receiveShadow=true; scene.add(s);
}
// Teepee logs in fire
for(let i=0;i<6;i++){
  const a=(i/6)*Math.PI*2;
  const l=new THREE.Mesh(new THREE.CylinderGeometry(0.09,0.11,1.25,7), logMat);
  l.position.set(Math.cos(a)*0.28,0.45,Math.sin(a)*0.28);
  l.rotation.z=Math.cos(a)*0.62; l.rotation.x=-Math.sin(a)*0.62; l.castShadow=true; scene.add(l);
}
// Log seats around fire
for(let i=0;i<3;i++){
  const a=i/3*Math.PI*2+0.5, x=Math.cos(a)*3.1, z=Math.sin(a)*3.1;
  const seat=new THREE.Mesh(new THREE.CylinderGeometry(0.28,0.28,1.7,9), logMat);
  seat.position.set(x,0.3,z); seat.rotation.z=Math.PI/2; seat.rotation.y=-a+Math.PI/2; seat.castShadow=seat.receiveShadow=true; scene.add(seat);
}

// Flames (low-poly cones, pivot at base)
function flameCone(r,h,color,op){
  const geo=new THREE.ConeGeometry(r,h,7); geo.translate(0,h/2,0);
  const mesh=new THREE.Mesh(geo, new THREE.MeshBasicMaterial({ color, transparent:true, opacity:op }));
  mesh.position.y=0.25; return mesh;
}
const flameGroup=new THREE.Group(); scene.add(flameGroup);
const flames=[flameCone(0.58,1.45,0xff5a00,0.88), flameCone(0.42,1.15,0xff8c1a,0.95), flameCone(0.26,0.82,0xffd23f,1), flameCone(0.14,0.5,0xfff3b0,1)];
flames.forEach(f=>flameGroup.add(f));
const fireGlow=new THREE.Sprite(new THREE.SpriteMaterial({ map:glowTex, color:0xff8c2a, transparent:true, opacity:0.55, blending:THREE.AdditiveBlending, depthWrite:false }));
fireGlow.position.set(0,0.9,0); fireGlow.scale.set(3.2,3.2,1); scene.add(fireGlow);
const emberGlow=new THREE.Mesh(new THREE.CircleGeometry(0.55,10), new THREE.MeshBasicMaterial({ color:0xff6a00 }));
emberGlow.rotation.x=-Math.PI/2; emberGlow.position.y=0.12; scene.add(emberGlow);

// Sparks particle system
const SPARKS=170;
const sparkPos=new Float32Array(SPARKS*3);
const sparkVel=[];
function resetSpark(i, randomY=false){
  sparkPos[i*3]=rand(-0.25,0.25); sparkPos[i*3+1]=randomY?rand(0.4,3.2):rand(0.4,0.8); sparkPos[i*3+2]=rand(-0.25,0.25);
  sparkVel[i]={ x:rand(-0.12,0.12), y:rand(0.55,1.25), z:rand(-0.12,0.12), life:rand(0.4,1) };
}
for(let i=0;i<SPARKS;i++) resetSpark(i,true);
const sparkGeo=new THREE.BufferGeometry(); sparkGeo.setAttribute('position', new THREE.BufferAttribute(sparkPos,3));
const sparks=new THREE.Points(sparkGeo, new THREE.PointsMaterial({ color:0xffb03a, size:0.085, transparent:true, opacity:0.95, blending:THREE.AdditiveBlending, depthWrite:false }));
scene.add(sparks);

// Smoke sprites
const smokes=[];
for(let i=0;i<10;i++){
  const m=new THREE.SpriteMaterial({ map:glowTex, color:0x9aa3b8, transparent:true, opacity:0.12, depthWrite:false });
  const s=new THREE.Sprite(m); s.scale.set(1.1,1.1,1); s.userData.t=Math.random(); scene.add(s); smokes.push(s);
}
// Fireflies
const FLIES=26, flyPos=new Float32Array(FLIES*3), flyBase=[];
for(let i=0;i<FLIES;i++){ const a=Math.random()*Math.PI*2, r=rand(4,16); flyBase.push({x:Math.cos(a)*r,z:Math.sin(a)*r,p:Math.random()*10}); }
const flyGeo=new THREE.BufferGeometry(); flyGeo.setAttribute('position', new THREE.BufferAttribute(flyPos,3));
scene.add(new THREE.Points(flyGeo, new THREE.PointsMaterial({ color:0xa8ff9e, size:0.13, transparent:true, opacity:0.8, blending:THREE.AdditiveBlending, depthWrite:false })));

// Animation
const clock=new THREE.Clock();
function animate(){
  requestAnimationFrame(animate);
  const t=clock.getElapsedTime();
  const dt=Math.min(clock.getDelta(),0.05) || 0.016;

  // Flicker
  const flick = Math.sin(t*11)*0.18 + Math.sin(t*23+1.3)*0.12 + Math.sin(t*5.7)*0.1 + (Math.random()-0.5)*0.12;
  fireLight.intensity = 27 + flick*9;
  fireLight2.intensity = 6 + flick*2;
  fireGlow.material.opacity = 0.48 + flick*0.12;
  fireGlow.scale.setScalar(3.1 + flick*0.5);
  flames.forEach((f,i)=>{
    const s=1 + Math.sin(t*(9+i*2.2)+i*1.7)*0.13 + (Math.random()-0.5)*0.06;
    f.scale.set(2-s*0.25, s, 2-s*0.25);
    f.rotation.y = t*(0.4+i*0.15) + i;
    f.rotation.z = Math.sin(t*7+i)*0.06;
  });
  emberGlow.material.color.setHSL(0.07, 1, 0.45 + flick*0.08);

  // Sparks
  for(let i=0;i<SPARKS;i++){
    const v=sparkVel[i];
    sparkPos[i*3]+=v.x*0.016 + Math.sin(t*3+i)*0.002;
    sparkPos[i*3+1]+=v.y*0.016;
    sparkPos[i*3+2]+=v.z*0.016;
    v.life -= 0.016;
    if(sparkPos[i*3+1]>3.4 || v.life<=0) resetSpark(i);
  }
  sparkGeo.attributes.position.needsUpdate=true;

  // Smoke
  smokes.forEach((s,i)=>{
    s.userData.t += 0.0016; if(s.userData.t>1) s.userData.t=0;
    const k=s.userData.t;
    s.position.set(Math.sin(k*6+i)*0.3 + k*0.6, 1.2 + k*4.2, Math.cos(k*5+i)*0.25);
    s.scale.setScalar(0.8 + k*2.6);
    s.material.opacity = 0.14*(1-k)*k*4;
  });

  // Fireflies
  for(let i=0;i<FLIES;i++){
    const b=flyBase[i];
    flyPos[i*3]=b.x + Math.sin(t*0.6+b.p)*1.2;
    flyPos[i*3+1]=1.1 + Math.sin(t*0.9+b.p*2)*0.55;
    flyPos[i*3+2]=b.z + Math.cos(t*0.5+b.p)*1.2;
  }
  flyGeo.attributes.position.needsUpdate=true;

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

addEventListener('resize', ()=>{
  camera.aspect = innerWidth/innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(innerWidth, innerHeight);
});
</script>
</body>
</html>
Reasoning trace (2,702 tokens)
Generating a Threejs low-poly night campfire scene with particles, lighting, and controls under module constraints.Expanding the scene with fog, terrain, trees, rocks, logs, flames, particles, stars, and moon lighting.Adding camera controls, UI overlay, renderer settings, and ground displacement with placement logic.Extending the scene with fire particles, smoke sprites, lighting setup, and additional props.