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
46.2 s
Cost
$0.012
Output tokens
24,875
Spent thinking
13,512 tokens
Speed
575.2 tok/s
Console errors
0
First token after
3.0 s
First visible text after
35.0 s
Prompt tokens
574
Code size
30.9 KB
Finish reason
stop
Served by
Meta
Model id
meta/muse-ember
Reasoning sent
{"effort":"max"}
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 · 862 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 in the Pines — Low-Poly Night Scene</title>
<style>
  * { box-sizing: border-box; }
  html, body {
    margin: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #050816;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: #eef2ff;
  }
  #scene {
    position: fixed;
    inset: 0;
    z-index: 0;
    display: block;
    width: 100%;
    height: 100%;
  }
  .vignette {
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: radial-gradient(circle at 50% 42%, transparent 46%, rgba(1, 3, 12, 0.58) 100%);
  }
  .panel {
    position: fixed;
    top: 18px;
    left: 18px;
    z-index: 10;
    width: min(350px, calc(100vw - 36px));
    padding: 16px 18px 14px;
    border-radius: 18px;
    background: rgba(7, 11, 28, 0.58);
    border: 1px solid rgba(255, 255, 255, 0.13);
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    pointer-events: none;
    animation: rise 0.9s ease both;
  }
  .eyebrow {
    font-size: 10px;
    letter-spacing: 0.22em;
    font-weight: 800;
    color: #ffb15e;
    margin-bottom: 5px;
  }
  .panel h1 {
    margin: 0;
    font-size: 25px;
    line-height: 1.08;
    letter-spacing: -0.02em;
    text-shadow: 0 3px 18px rgba(255, 122, 26, 0.35);
  }
  .panel p {
    margin: 8px 0 11px;
    font-size: 13px;
    line-height: 1.45;
    color: rgba(238, 242, 255, 0.78);
  }
  .chips { display: flex; flex-wrap: wrap; gap: 6px; }
  .chips span {
    font-size: 11px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.86);
    padding: 5px 9px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.09);
    border: 1px solid rgba(255, 255, 255, 0.1);
  }
  .toolbar {
    position: fixed;
    top: 18px;
    right: 18px;
    z-index: 10;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: stretch;
    animation: rise 0.9s 0.12s ease both;
  }
  .badge {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.9);
    padding: 9px 12px;
    border-radius: 999px;
    background: rgba(7, 11, 28, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
  .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #7dff9a;
    box-shadow: 0 0 12px #7dff9a;
  }
  .chipbtn {
    appearance: none;
    border: 1px solid rgba(255, 255, 255, 0.13);
    background: rgba(7, 11, 28, 0.55);
    color: rgba(255, 255, 255, 0.78);
    font: inherit;
    font-size: 12px;
    font-weight: 750;
    padding: 9px 12px;
    border-radius: 999px;
    cursor: pointer;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
  }
  .chipbtn:hover { transform: translateY(-1px); color: #fff; }
  .chipbtn.active {
    color: #1a0d02;
    background: linear-gradient(135deg, #ffb15e, #ff7a1a);
    border-color: rgba(255, 177, 94, 0.8);
    box-shadow: 0 8px 24px rgba(255, 122, 26, 0.28);
  }
  .chipbtn:focus-visible { outline: 2px solid #ffb15e; outline-offset: 2px; }
  .hint {
    position: fixed;
    left: 50%;
    bottom: 16px;
    transform: translateX(-50%);
    z-index: 10;
    max-width: calc(100vw - 32px);
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.85);
    padding: 9px 14px;
    border-radius: 999px;
    background: rgba(5, 8, 22, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.11);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    pointer-events: none;
    animation: rise 0.9s 0.2s ease both;
  }
  @keyframes rise {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .hint { animation-name: riseCenter; }
  @keyframes riseCenter {
    from { opacity: 0; transform: translateX(-50%) translateY(8px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
  }
  @media (max-width: 640px) {
    .panel {
      left: 12px;
      top: 12px;
      width: min(272px, calc(100vw - 24px));
      padding: 12px 14px;
      border-radius: 15px;
    }
    .panel h1 { font-size: 19px; }
    .panel p { font-size: 11px; margin: 6px 0 8px; }
    .chips { display: none; }
    .toolbar {
      top: auto;
      right: 12px;
      bottom: 60px;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: flex-end;
      max-width: calc(100vw - 24px);
    }
    .badge { display: none; }
    .chipbtn { font-size: 11px; padding: 8px 10px; }
    .hint {
      left: 12px;
      bottom: 12px;
      transform: none;
      width: calc(100vw - 24px);
      font-size: 11px;
      animation-name: rise;
    }
  }
</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="panel">
  <div class="eyebrow">THREE.JS • LOW-POLY NIGHT</div>
  <h1>🔥 Campfire in the Pines</h1>
  <p>A flickering campfire in a forest clearing — orbit around it under the stars and moon.</p>
  <div class="chips"><span>90 pines</span><span>Live sparks</span><span>Dynamic light</span><span>Night fog</span></div>
</header>

<div class="toolbar">
  <div class="badge"><span class="dot"></span> Forest clearing</div>
  <button id="orbitBtn" class="chipbtn active" type="button">⟳ Auto-orbit</button>
  <button id="sparksBtn" class="chipbtn active" type="button">✦ Sparks</button>
  <button id="resetBtn" class="chipbtn" type="button">⌂ Reset view</button>
</div>

<div class="hint">Drag to orbit &nbsp;•&nbsp; Scroll or pinch to zoom</div>

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

function rand(min, max) { return min + Math.random() * (max - min); }
function hash(x, z) {
  const s = Math.sin(x * 127.1 + z * 311.7) * 43758.5453;
  return s - Math.floor(s);
}
function groundHeight(x, z) {
  const r = Math.hypot(x, z);
  const f = THREE.MathUtils.clamp((r - 7) / 12, 0, 1);
  const n = Math.sin(x * 0.32) * Math.cos(z * 0.28) * 0.45 +
            Math.sin(x * 0.11 + z * 0.07) * 0.7 +
            Math.cos(z * 0.5 + x * 0.06) * 0.25;
  return n * f * 0.85 + Math.max(0, r - 55) * 0.04;
}
function makeCircleTexture() {
  const c = document.createElement('canvas');
  c.width = 128; 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,0.75)');
  g.addColorStop(1, 'rgba(255,255,255,0)');
  ctx.fillStyle = g;
  ctx.fillRect(0, 0, 128, 128);
  const tex = new THREE.CanvasTexture(c);
  tex.colorSpace = THREE.SRGBColorSpace;
  return tex;
}
const softTex = makeCircleTexture();

const scene = new THREE.Scene();
scene.background = new THREE.Color(0x060b18);
scene.fog = new THREE.Fog(0x0a152c, 20, 70);

const camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 300);
camera.position.set(10.5, 5.5, 12.5);

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

/* Night sky dome */
const skyMat = new THREE.ShaderMaterial({
  side: THREE.BackSide,
  depthWrite: false,
  uniforms: {
    topColor: { value: new THREE.Color(0x02040f) },
    bottomColor: { value: new THREE.Color(0x142642) },
    offset: { value: 18 },
    exponent: { value: 0.75 }
  },
  vertexShader: [
    'varying vec3 vWorldPosition;',
    'void main() {',
    '  vec4 wp = modelMatrix * vec4(position, 1.0);',
    '  vWorldPosition = wp.xyz;',
    '  gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);',
    '}'
  ].join('\n'),
  fragmentShader: [
    'uniform vec3 topColor;',
    'uniform vec3 bottomColor;',
    'uniform float offset;',
    'uniform float exponent;',
    'varying vec3 vWorldPosition;',
    'void main() {',
    '  float h = normalize(vWorldPosition + vec3(0.0, offset, 0.0)).y;',
    '  float t = pow(max(h, 0.0), exponent);',
    '  gl_FragColor = vec4(mix(bottomColor, topColor, t), 1.0);',
    '}'
  ].join('\n')
});
scene.add(new THREE.Mesh(new THREE.SphereGeometry(140, 32, 16), skyMat));

/* Stars */
const starCount = 1000;
const starPos = new Float32Array(starCount * 3);
const starCol = new Float32Array(starCount * 3);
const starTmp = new THREE.Color();
for (let i = 0; i < starCount; i++) {
  let x, y, z;
  do {
    x = rand(-1, 1); y = rand(-1, 1); z = rand(-1, 1);
  } while (x * x + y * y + z * z > 1 || y < 0.06);
  const len = Math.hypot(x, y, z);
  starPos[i * 3] = x / len * 125;
  starPos[i * 3 + 1] = y / len * 125;
  starPos[i * 3 + 2] = z / len * 125;
  const pick = Math.random();
  if (pick < 0.65) starTmp.set(0xffffff);
  else if (pick < 0.87) starTmp.set(0xbcd3ff);
  else starTmp.set(0xffe3b3);
  starTmp.multiplyScalar(rand(0.45, 1.0));
  starCol[i * 3] = starTmp.r; starCol[i * 3 + 1] = starTmp.g; starCol[i * 3 + 2] = starTmp.b;
}
const starGeo = new THREE.BufferGeometry();
starGeo.setAttribute('position', new THREE.BufferAttribute(starPos, 3));
starGeo.setAttribute('color', new THREE.BufferAttribute(starCol, 3));
const starMat = new THREE.PointsMaterial({
  size: 1.6, sizeAttenuation: false, map: softTex, vertexColors: true,
  transparent: true, opacity: 0.9, depthWrite: false, toneMapped: false
});
const stars = new THREE.Points(starGeo, starMat);
stars.frustumCulled = false;
scene.add(stars);

/* Moon + glow */
const moonGroup = new THREE.Group();
moonGroup.position.set(-36, 20, -58);
const moon = new THREE.Mesh(
  new THREE.SphereGeometry(4, 24, 24),
  new THREE.MeshBasicMaterial({ color: 0xf2f5fb, fog: false, toneMapped: false })
);
moonGroup.add(moon);
const moonGlow = new THREE.Sprite(new THREE.SpriteMaterial({
  map: softTex, color: 0xbcd3ff, transparent: true, opacity: 0.34,
  blending: THREE.AdditiveBlending, depthWrite: false, fog: false, toneMapped: false
}));
moonGlow.scale.set(19, 19, 1);
moonGroup.add(moonGlow);
const moonHalo = new THREE.Sprite(new THREE.SpriteMaterial({
  map: softTex, color: 0x8fb4ff, transparent: true, opacity: 0.13,
  blending: THREE.AdditiveBlending, depthWrite: false, fog: false, toneMapped: false
}));
moonHalo.scale.set(34, 34, 1);
moonGroup.add(moonHalo);
scene.add(moonGroup);

/* Low-poly clouds */
const cloudMat = new THREE.MeshStandardMaterial({ color: 0x25365c, roughness: 1, flatShading: true, transparent: true, opacity: 0.82 });
[[-18, 26, -46], [14, 31, -54], [-44, 29, -22], [30, 25, -38]].forEach(function (p) {
  const cloud = new THREE.Group();
  for (let i = 0; i < 3; i++) {
    const puff = new THREE.Mesh(new THREE.IcosahedronGeometry(rand(2.2, 3.6), 0), cloudMat);
    puff.position.set(i * rand(2.4, 3.2) - 3, rand(-0.4, 0.4), rand(-0.8, 0.8));
    puff.scale.y = 0.38;
    cloud.add(puff);
  }
  cloud.position.set(p[0], p[1], p[2]);
  scene.add(cloud);
});

/* Lights */
scene.add(new THREE.HemisphereLight(0x24355e, 0x0b150c, 0.55));
const moonLight = new THREE.DirectionalLight(0x8fb4ff, 0.55);
moonLight.position.set(-30, 40, -40);
scene.add(moonLight);
scene.add(moonLight.target);

const fireLight = new THREE.PointLight(0xff7a2a, 55, 32, 1.9);
fireLight.position.set(0, 1.45, 0);
fireLight.castShadow = true;
fireLight.shadow.mapSize.set(1024, 1024);
fireLight.shadow.camera.near = 0.3;
fireLight.shadow.camera.far = 35;
fireLight.shadow.bias = -0.005;
fireLight.shadow.normalBias = 0.02;
scene.add(fireLight);

/* Ground */
const groundGeo = new THREE.PlaneGeometry(160, 160, 58, 58);
groundGeo.rotateX(-Math.PI / 2);
const gp = groundGeo.attributes.position;
const gColors = new Float32Array(gp.count * 3);
const cGrass1 = new THREE.Color(0x18301d);
const cGrass2 = new THREE.Color(0x274a2b);
const cDirt = new THREE.Color(0x3b2c1c);
const cFar = new THREE.Color(0x101f18);
const gCol = new THREE.Color();
for (let i = 0; i < gp.count; i++) {
  const x = gp.getX(i), z = gp.getZ(i);
  gp.setY(i, groundHeight(x, z));
  const r = Math.hypot(x, z);
  if (r < 6.5) {
    gCol.copy(cDirt).lerp(cGrass1, THREE.MathUtils.smoothstep(r, 3.2, 6.5));
  } else {
    const v = Math.sin(x * 0.8) * Math.cos(z * 0.7) * 0.5 + 0.5;
    gCol.copy(cGrass1).lerp(cGrass2, v);
    if (r > 40) gCol.lerp(cFar, THREE.MathUtils.smoothstep(r, 40, 75));
  }
  gCol.multiplyScalar(0.85 + hash(Math.round(x * 2), Math.round(z * 2)) * 0.3);
  gColors[i * 3] = gCol.r; gColors[i * 3 + 1] = gCol.g; gColors[i * 3 + 2] = gCol.b;
}
groundGeo.setAttribute('color', new THREE.BufferAttribute(gColors, 3));
groundGeo.computeVertexNormals();
const ground = new THREE.Mesh(groundGeo, new THREE.MeshStandardMaterial({
  vertexColors: true, roughness: 1, metalness: 0, flatShading: true
}));
ground.receiveShadow = true;
scene.add(ground);

const dirtDisc = new THREE.Mesh(
  new THREE.CircleGeometry(3.6, 36),
  new THREE.MeshStandardMaterial({ color: 0x2e2116, roughness: 1 })
);
dirtDisc.rotation.x = -Math.PI / 2;
dirtDisc.position.y = 0.025;
dirtDisc.receiveShadow = true;
scene.add(dirtDisc);

const ashDisc = new THREE.Mesh(
  new THREE.CircleGeometry(1.9, 28),
  new THREE.MeshStandardMaterial({ color: 0x1c1713, roughness: 1 })
);
ashDisc.rotation.x = -Math.PI / 2;
ashDisc.position.y = 0.045;
ashDisc.receiveShadow = true;
scene.add(ashDisc);

/* Rocks + stone ring */
const rockGeo = new THREE.DodecahedronGeometry(0.6, 0);
for (let i = 0; i < 12; i++) {
  const a = (i / 12) * Math.PI * 2 + rand(-0.08, 0.08);
  const mat = new THREE.MeshStandardMaterial({ color: 0x6b7280, roughness: 0.95, flatShading: true });
  mat.color.offsetHSL(0, 0, rand(-0.05, 0.05));
  const stone = new THREE.Mesh(new THREE.DodecahedronGeometry(0.32, 0), mat);
  stone.position.set(Math.cos(a) * 1.55, 0.16, Math.sin(a) * 1.55);
  stone.scale.set(rand(0.8, 1.3), rand(0.55, 0.85), rand(0.8, 1.3));
  stone.rotation.set(rand(0, 3), rand(0, 3), rand(0, 3));
  stone.castShadow = true; stone.receiveShadow = true;
  scene.add(stone);
}
for (let i = 0; i < 18; i++) {
  const a = rand(0, Math.PI * 2);
  const r = rand(4.5, 32);
  const x = Math.cos(a) * r, z = Math.sin(a) * r;
  const mat = new THREE.MeshStandardMaterial({ color: 0x5f6a72, roughness: 0.95, flatShading: true });
  mat.color.offsetHSL(rand(-0.02, 0.02), 0, rand(-0.04, 0.04));
  const rock = new THREE.Mesh(rockGeo, mat);
  const s = rand(0.35, 1.25);
  rock.position.set(x, groundHeight(x, z) + 0.08, z);
  rock.scale.set(s, s * rand(0.55, 0.85), s);
  rock.rotation.set(rand(0, 3), rand(0, 3), rand(0, 3));
  rock.castShadow = true; rock.receiveShadow = true;
  scene.add(rock);
}

/* Logs */
const logGeo = new THREE.CylinderGeometry(0.34, 0.34, 2.3, 8);
logGeo.rotateZ(Math.PI / 2);
const barkMat = new THREE.MeshStandardMaterial({ color: 0x5a3d28, roughness: 0.95, flatShading: true });
const endMat = new THREE.MeshStandardMaterial({ color: 0xc7a06b, roughness: 0.9, flatShading: true });
const logMats = [barkMat, endMat, endMat];

[0.6, 2.4, 4.3].forEach(function (a) {
  const bench = new THREE.Mesh(logGeo, logMats);
  bench.position.set(Math.cos(a) * 4.0, groundHeight(Math.cos(a) * 4.0, Math.sin(a) * 4.0) + 0.34, Math.sin(a) * 4.0);
  bench.rotation.y = Math.PI / 2 - a;
  bench.castShadow = true; bench.receiveShadow = true;
  scene.add(bench);
});
/* Log stack */
for (let i = 0; i < 3; i++) {
  const log = new THREE.Mesh(logGeo, logMats);
  const a = 0.4;
  const offset = (i - 1) * 0.62;
  const x = 5.4 + Math.cos(a + Math.PI / 2) * offset;
  const z = -2.0 + Math.sin(a + Math.PI / 2) * offset;
  log.position.set(x, (i === 2 ? 0.95 : 0.34) + groundHeight(x, z), z);
  log.rotation.y = a;
  log.castShadow = true; log.receiveShadow = true;
  scene.add(log);
}
/* Fallen logs */
for (let i = 0; i < 4; i++) {
  const a = rand(0, Math.PI * 2);
  const r = rand(8, 25);
  const x = Math.cos(a) * r, z = Math.sin(a) * r;
  const log = new THREE.Mesh(logGeo, logMats);
  log.position.set(x, groundHeight(x, z) + 0.34, z);
  log.rotation.y = rand(0, Math.PI * 2);
  log.scale.x = rand(0.7, 1.2);
  log.castShadow = true; log.receiveShadow = true;
  scene.add(log);
}

/* Teepee firewood */
for (let i = 0; i < 7; i++) {
  const a = (i / 7) * Math.PI * 2;
  const base = new THREE.Vector3(Math.cos(a) * 0.62, 0.08, Math.sin(a) * 0.62);
  const top = new THREE.Vector3(Math.cos(a) * 0.05, 1.25, Math.sin(a) * 0.05);
  const dir = top.clone().sub(base);
  const len = dir.length();
  const stick = new THREE.Mesh(new THREE.CylinderGeometry(0.07, 0.09, len, 6), barkMat);
  stick.position.copy(base).add(top).multiplyScalar(0.5);
  stick.quaternion.setFromUnitVectors(new THREE.Vector3(0, 1, 0), dir.normalize());
  stick.castShadow = true; stick.receiveShadow = true;
  scene.add(stick);
}

/* Glowing ember bed */
const emberMat = new THREE.MeshStandardMaterial({ color: 0x331100, emissive: 0xff4400, emissiveIntensity: 2, roughness: 0.8, flatShading: true });
for (let i = 0; i < 11; i++) {
  const a = rand(0, Math.PI * 2), r = rand(0.05, 0.72);
  const ember = new THREE.Mesh(new THREE.IcosahedronGeometry(rand(0.11, 0.22), 0), emberMat);
  ember.position.set(Math.cos(a) * r, 0.16, Math.sin(a) * r);
  ember.rotation.set(rand(0, 3), rand(0, 3), rand(0, 3));
  scene.add(ember);
}

/* Marshmallow roasting sticks */
function addRoastStick(from, to) {
  const dir = to.clone().sub(from);
  const len = dir.length();
  const stick = new THREE.Mesh(new THREE.CylinderGeometry(0.018, 0.018, len, 5), barkMat);
  stick.position.copy(from).add(to).multiplyScalar(0.5);
  stick.quaternion.setFromUnitVectors(new THREE.Vector3(0, 1, 0), dir.clone().normalize());
  stick.castShadow = true;
  scene.add(stick);
  const mallow = new THREE.Mesh(
    new THREE.CapsuleGeometry(0.085, 0.13, 4, 8),
    new THREE.MeshStandardMaterial({ color: 0xf5ead6, roughness: 0.85 })
  );
  mallow.position.copy(to).add(dir.clone().normalize().multiplyScalar(0.09));
  mallow.quaternion.copy(stick.quaternion);
  mallow.castShadow = true;
  scene.add(mallow);
}
addRoastStick(new THREE.Vector3(2.6, 0.3, 1.8), new THREE.Vector3(0.45, 1.0, 0.7));
addRoastStick(new THREE.Vector3(-1.9, 0.3, 2.6), new THREE.Vector3(-0.35, 0.95, 0.8));

/* Trees — instanced pines */
const treeCount = 90;
const trunkGeo = new THREE.CylinderGeometry(0.18, 0.3, 1.7, 5);
trunkGeo.translate(0, 0.85, 0);
const coneGeo1 = new THREE.ConeGeometry(1.6, 2.7, 6);
coneGeo1.translate(0, 2.25, 0);
const coneGeo2 = new THREE.ConeGeometry(1.2, 2.2, 6);
coneGeo2.translate(0, 3.65, 0);
const coneGeo3 = new THREE.ConeGeometry(0.78, 1.8, 6);
coneGeo3.translate(0, 4.85, 0);
const trunkMesh = new THREE.InstancedMesh(trunkGeo, new THREE.MeshStandardMaterial({ roughness: 1, flatShading: true }), treeCount);
const coneMesh1 = new THREE.InstancedMesh(coneGeo1, new THREE.MeshStandardMaterial({ roughness: 1, flatShading: true }), treeCount);
const coneMesh2 = new THREE.InstancedMesh(coneGeo2, new THREE.MeshStandardMaterial({ roughness: 1, flatShading: true }), treeCount);
const coneMesh3 = new THREE.InstancedMesh(coneGeo3, new THREE.MeshStandardMaterial({ roughness: 1, flatShading: true }), treeCount);
const dummy = new THREE.Object3D();
const tmpColor = new THREE.Color();
for (let i = 0; i < treeCount; i++) {
  const a = rand(0, Math.PI * 2);
  const r = Math.random() < 0.62 ? rand(12.5, 30) : rand(28, 62);
  const x = Math.cos(a) * r, z = Math.sin(a) * r;
  const s = rand(0.75, 1.65) + (r > 30 ? 0.25 : 0);
  dummy.position.set(x, groundHeight(x, z) - 0.05, z);
  dummy.rotation.set(0, rand(0, Math.PI * 2), 0);
  dummy.scale.set(s, s * rand(0.9, 1.2), s);
  dummy.updateMatrix();
  trunkMesh.setMatrixAt(i, dummy.matrix);
  coneMesh1.setMatrixAt(i, dummy.matrix);
  coneMesh2.setMatrixAt(i, dummy.matrix);
  coneMesh3.setMatrixAt(i, dummy.matrix);
  tmpColor.setHSL(rand(0.31, 0.38), rand(0.32, 0.5), rand(0.08, 0.15));
  coneMesh1.setColorAt(i, tmpColor);
  tmpColor.offsetHSL(0, 0, rand(-0.02, 0.02));
  coneMesh2.setColorAt(i, tmpColor);
  tmpColor.offsetHSL(0, 0, rand(-0.02, 0.03));
  coneMesh3.setColorAt(i, tmpColor);
  tmpColor.setHSL(0.07, rand(0.3, 0.45), rand(0.1, 0.16));
  trunkMesh.setColorAt(i, tmpColor);
}
[trunkMesh, coneMesh1, coneMesh2, coneMesh3].forEach(function (m) {
  m.castShadow = true; m.receiveShadow = true; m.frustumCulled = false;
  m.instanceColor.needsUpdate = true;
  scene.add(m);
});

/* Grass tufts */
const grassCount = 150;
const grassMesh = new THREE.InstancedMesh(
  new THREE.ConeGeometry(0.13, 0.48, 4),
  new THREE.MeshStandardMaterial({ roughness: 1, flatShading: true }),
  grassCount
);
for (let i = 0; i < grassCount; i++) {
  const a = rand(0, Math.PI * 2);
  const r = 3.6 + Math.pow(Math.random(), 0.7) * 15;
  const x = Math.cos(a) * r, z = Math.sin(a) * r;
  const s = rand(0.7, 1.7);
  dummy.position.set(x, groundHeight(x, z) + 0.2, z);
  dummy.rotation.set(rand(-0.12, 0.12), rand(0, Math.PI * 2), rand(-0.12, 0.12));
  dummy.scale.set(s, s, s);
  dummy.updateMatrix();
  grassMesh.setMatrixAt(i, dummy.matrix);
  tmpColor.setHSL(0.32, rand(0.35, 0.55), rand(0.1, 0.2));
  grassMesh.setColorAt(i, tmpColor);
}
grassMesh.receiveShadow = true;
grassMesh.frustumCulled = false;
grassMesh.instanceColor.needsUpdate = true;
scene.add(grassMesh);

/* Mushrooms */
for (let i = 0; i < 6; i++) {
  const a = rand(0, Math.PI * 2);
  const r = rand(6, 16);
  const x = Math.cos(a) * r, z = Math.sin(a) * r;
  const y = groundHeight(x, z);
  const stem = new THREE.Mesh(new THREE.CylinderGeometry(0.05, 0.07, 0.28, 5), new THREE.MeshStandardMaterial({ color: 0xd8cbb0, roughness: 1 }));
  stem.position.set(x, y + 0.14, z);
  const cap = new THREE.Mesh(new THREE.ConeGeometry(0.2, 0.18, 6), new THREE.MeshStandardMaterial({ color: 0x8a4b3a, roughness: 1, flatShading: true }));
  cap.position.set(x, y + 0.36, z);
  stem.castShadow = true; cap.castShadow = true;
  scene.add(stem); scene.add(cap);
}

/* Flames */
const flames = [];
const flameDefs = [
  { r: 0.95, h: 2.15, y: 1.25, x: 0, z: 0, color: 0xff5600, opacity: 0.68, speed: 9, phase: 0, spin: 0.5 },
  { r: 0.68, h: 1.75, y: 1.15, x: 0, z: 0, color: 0xff8b00, opacity: 0.85, speed: 11, phase: 1.7, spin: -0.7 },
  { r: 0.42, h: 1.25, y: 0.95, x: 0, z: 0, color: 0xffc233, opacity: 0.95, speed: 13, phase: 3.1, spin: 0.9 },
  { r: 0.22, h: 0.75, y: 0.72, x: 0, z: 0, color: 0xfff3a6, opacity: 1.0, speed: 15, phase: 4.4, spin: -1.1 },
  { r: 0.3, h: 1.05, y: 0.95, x: 0.38, z: 0.12, color: 0xff7600, opacity: 0.8, speed: 10, phase: 2.2, spin: 0.6 },
  { r: 0.26, h: 0.95, y: 0.9, x: -0.34, z: -0.1, color: 0xff8b00, opacity: 0.8, speed: 12, phase: 5.2, spin: -0.5 }
];
flameDefs.forEach(function (d) {
  const geo = new THREE.ConeGeometry(d.r, d.h, 7);
  const mat = new THREE.MeshBasicMaterial({
    color: d.color, transparent: true, opacity: d.opacity,
    blending: THREE.AdditiveBlending, depthWrite: false, side: THREE.DoubleSide, toneMapped: false
  });
  const mesh = new THREE.Mesh(geo, mat);
  mesh.position.set(d.x, d.y, d.z);
  mesh.userData = { baseX: d.x, baseZ: d.z, baseSY: 1, speed: d.speed, phase: d.phase, spin: d.spin };
  flames.push(mesh);
  scene.add(mesh);
});

/* Fire glow sprite */
const glow = new THREE.Sprite(new THREE.SpriteMaterial({
  map: softTex, color: 0xff7a1a, transparent: true, opacity: 0.5,
  blending: THREE.AdditiveBlending, depthWrite: false, toneMapped: false
}));
glow.position.set(0, 1.2, 0);
glow.scale.set(5.4, 5.4, 1);
scene.add(glow);

/* Sparks particle system */
const sparkCount = 150;
const sparkPos = new Float32Array(sparkCount * 3);
const sparkCol = new Float32Array(sparkCount * 3);
const sparkVel = [];
const sparkLife = new Float32Array(sparkCount);
const sparkMax = new Float32Array(sparkCount);
function resetSpark(i, randomLife) {
  sparkPos[i * 3] = rand(-0.45, 0.45);
  sparkPos[i * 3 + 1] = rand(0.55, 0.95);
  sparkPos[i * 3 + 2] = rand(-0.45, 0.45);
  sparkVel[i] = new THREE.Vector3(rand(-0.25, 0.25), rand(1.3, 2.9), rand(-0.25, 0.25));
  sparkMax[i] = rand(1.2, 3.4);
  sparkLife[i] = randomLife ? rand(0.1, sparkMax[i]) : sparkMax[i];
}
for (let i = 0; i < sparkCount; i++) resetSpark(i, true);
const sparkGeo = new THREE.BufferGeometry();
sparkGeo.setAttribute('position', new THREE.BufferAttribute(sparkPos, 3));
sparkGeo.setAttribute('color', new THREE.BufferAttribute(sparkCol, 3));
const sparks = new THREE.Points(sparkGeo, new THREE.PointsMaterial({
  size: 0.14, map: softTex, vertexColors: true, transparent: true,
  depthWrite: false, blending: THREE.AdditiveBlending, toneMapped: false
}));
sparks.frustumCulled = false;
scene.add(sparks);
const hotCol = new THREE.Color(1, 0.88, 0.45);
const coolCol = new THREE.Color(1, 0.28, 0.04);
function updateSparks(dt, t) {
  for (let i = 0; i < sparkCount; i++) {
    sparkLife[i] -= dt;
    if (sparkLife[i] <= 0) resetSpark(i, false);
    const v = sparkVel[i];
    v.x += Math.sin(t * 3 + i) * 0.12 * dt + 0.18 * dt;
    v.y -= 0.12 * dt;
    sparkPos[i * 3] += v.x * dt;
    sparkPos[i * 3 + 1] += v.y * dt;
    sparkPos[i * 3 + 2] += v.z * dt;
    const f = THREE.MathUtils.clamp(sparkLife[i] / sparkMax[i], 0, 1);
    tmpColor.copy(coolCol).lerp(hotCol, f).multiplyScalar(f);
    sparkCol[i * 3] = tmpColor.r; sparkCol[i * 3 + 1] = tmpColor.g; sparkCol[i * 3 + 2] = tmpColor.b;
  }
  sparkGeo.attributes.position.needsUpdate = true;
  sparkGeo.attributes.color.needsUpdate = true;
}

/* Gentle smoke */
const smokeCount = 22;
const smokePos = new Float32Array(smokeCount * 3);
const smokeLife = new Float32Array(smokeCount);
for (let i = 0; i < smokeCount; i++) {
  smokePos[i * 3] = rand(-0.3, 0.3);
  smokePos[i * 3 + 1] = rand(0.8, 5.5);
  smokePos[i * 3 + 2] = rand(-0.3, 0.3);
  smokeLife[i] = rand(1, 6);
}
const smokeGeo = new THREE.BufferGeometry();
smokeGeo.setAttribute('position', new THREE.BufferAttribute(smokePos, 3));
const smoke = new THREE.Points(smokeGeo, new THREE.PointsMaterial({
  size: 1.7, map: softTex, color: 0x9db2c8, transparent: true, opacity: 0.07, depthWrite: false
}));
smoke.frustumCulled = false;
scene.add(smoke);
function updateSmoke(dt) {
  for (let i = 0; i < smokeCount; i++) {
    smokeLife[i] -= dt;
    if (smokeLife[i] <= 0) {
      smokePos[i * 3] = rand(-0.3, 0.3);
      smokePos[i * 3 + 1] = rand(0.9, 1.4);
      smokePos[i * 3 + 2] = rand(-0.3, 0.3);
      smokeLife[i] = rand(3, 6);
    }
    smokePos[i * 3] += 0.28 * dt;
    smokePos[i * 3 + 1] += 0.5 * dt;
    smokePos[i * 3 + 2] += Math.sin(i * 2.1) * 0.05 * dt;
  }
  smokeGeo.attributes.position.needsUpdate = true;
}

/* Fireflies */
const flyCount = 24;
const flyPos = new Float32Array(flyCount * 3);
const flyBase = [];
const flyPhase = [];
for (let i = 0; i < flyCount; i++) {
  const a = rand(0, Math.PI * 2), r = rand(5, 20);
  const x = Math.cos(a) * r, z = Math.sin(a) * r;
  flyBase.push(new THREE.Vector3(x, groundHeight(x, z) + rand(0.5, 2.4), z));
  flyPhase.push(rand(0, Math.PI * 2));
}
const flyGeo = new THREE.BufferGeometry();
flyGeo.setAttribute('position', new THREE.BufferAttribute(flyPos, 3));
const fireflies = new THREE.Points(flyGeo, new THREE.PointsMaterial({
  size: 0.18, map: softTex, color: 0xaaff88, transparent: true, opacity: 0.65,
  depthWrite: false, blending: THREE.AdditiveBlending, toneMapped: false
}));
fireflies.frustumCulled = false;
scene.add(fireflies);
function updateFireflies(t) {
  for (let i = 0; i < flyCount; i++) {
    const b = flyBase[i], p = flyPhase[i];
    flyPos[i * 3] = b.x + Math.sin(t * 0.4 + p) * 1.1;
    flyPos[i * 3 + 1] = b.y + Math.sin(t * 0.7 + p * 1.7) * 0.45;
    flyPos[i * 3 + 2] = b.z + Math.cos(t * 0.35 + p) * 1.1;
  }
  flyGeo.attributes.position.needsUpdate = true;
  fireflies.material.opacity = 0.5 + Math.sin(t * 2) * 0.22;
}

/* Controls — limited so the camera stays above ground */
const controls = new OrbitControls(camera, renderer.domElement);
controls.target.set(0, 1.1, 0);
controls.enableDamping = true;
controls.dampingFactor = 0.06;
controls.enablePan = false;
controls.minDistance = 4.5;
controls.maxDistance = 32;
controls.minPolarAngle = 0.18;
controls.maxPolarAngle = Math.PI * 0.49;
controls.autoRotate = true;
controls.autoRotateSpeed = 0.55;

/* UI buttons */
let autoOrbit = true;
let idleTimer = null;
const orbitBtn = document.getElementById('orbitBtn');
const sparksBtn = document.getElementById('sparksBtn');
const resetBtn = document.getElementById('resetBtn');
orbitBtn.addEventListener('click', function () {
  autoOrbit = !autoOrbit;
  controls.autoRotate = autoOrbit;
  orbitBtn.classList.toggle('active', autoOrbit);
});
sparksBtn.addEventListener('click', function () {
  sparks.visible = !sparks.visible;
  smoke.visible = sparks.visible;
  sparksBtn.classList.toggle('active', sparks.visible);
});
resetBtn.addEventListener('click', function () {
  camera.position.set(10.5, 5.5, 12.5);
  controls.target.set(0, 1.1, 0);
});
controls.addEventListener('start', function () {
  controls.autoRotate = false;
  if (idleTimer) clearTimeout(idleTimer);
});
controls.addEventListener('end', function () {
  idleTimer = setTimeout(function () {
    if (autoOrbit) controls.autoRotate = true;
  }, 3500);
});

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

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

  fireLight.intensity = 52 + Math.sin(t * 11) * 6 + Math.sin(t * 23 + 1.3) * 4 + Math.sin(t * 5.7) * 3 + (Math.random() - 0.5) * 4;
  fireLight.position.x = Math.sin(t * 6.3) * 0.1;
  fireLight.position.z = Math.cos(t * 5.1) * 0.1;

  flames.forEach(function (f) {
    const d = f.userData;
    f.scale.y = 1 + Math.sin(t * d.speed + d.phase) * 0.2 + Math.sin(t * d.speed * 2.17 + d.phase * 2.0) * 0.06;
    f.scale.x = 1 + Math.sin(t * d.speed * 0.66 + d.phase) * 0.1;
    f.scale.z = f.scale.x;
    f.rotation.y = t * d.spin + d.phase;
    f.rotation.z = Math.sin(t * d.speed * 0.55 + d.phase) * 0.09;
    f.position.x = d.baseX + Math.sin(t * 7 + d.phase) * 0.03;
    f.position.z = d.baseZ + Math.cos(t * 6 + d.phase) * 0.03;
  });

  const gs = 5.3 + Math.sin(t * 9) * 0.35 + Math.sin(t * 17) * 0.2;
  glow.scale.set(gs, gs, 1);
  glow.material.opacity = 0.46 + Math.sin(t * 8) * 0.07;
  emberMat.emissiveIntensity = 1.9 + Math.sin(t * 3) * 0.45 + Math.sin(t * 6.5) * 0.2;

  starMat.opacity = 0.78 + Math.sin(t * 0.7) * 0.14;
  moonGlow.material.opacity = 0.3 + Math.sin(t * 0.5) * 0.05;

  if (sparks.visible) updateSparks(dt, t);
  updateSmoke(dt);
  updateFireflies(t);

  controls.update();
  renderer.render(scene, camera);
}
renderer.setAnimationLoop(animate);
</script>
</body>
</html>
Reasoning trace (13,512 tokens)
Designing a single-file Three Threejs scene with import map, low-poly assets, animated fire, particles, fog, and constrained OrbitControls.Extending the scene with instanced low-poly trees, rocks, logs, and star dome while handling resize.Adding campfire geometry, flickering point light, particle sparks, and camera controls with UI overlay.Switching star and spark rendering to canvas-generated circular sprites and adding low-poly terrain, foliage, and props with instanced meshes.Adding layered animated flame cones, additive glow sprite, and particle systems for sparks and fireflies.Finalizing camera framing, shadow settings, ground noise, and deterministic flame geometry jitter.Switching from per-vertex hash jitter to static low-poly cone geometry and adding canvas-based glow and spark textures.Implementing deterministic ground height and color with vertex colors, plus moon glow and log bench placement.Deriving the teepee log orientation and aligning roasting stick and grass tuft instances.Adding flame, ember, spark, smoke, and firefly particle systems with blending and animation.