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

Nemotron 3 Ultra (free)

by NVIDIAReasoningClean
Open in new window

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

How it went

Total time
1 min 17 s
Cost
$0
Output tokens
6,627
Spent thinking
320 tokens
Speed
87 tok/s
Console errors
0
First token after
810 ms
First visible text after
10.3 s
Prompt tokens
584
Code size
21.0 KB
Finish reason
stop
Served by
Nvidia
Model id
nvidia/nemotron-3-ultra-550b-a55b:free
Reasoning sent
{"effort":"high"}
Max output
32,000 tokens
Generated
Nov 9, 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 · 555 lines

Download
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Low-Poly Campfire Scene</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { overflow: hidden; background: #000; }
        canvas { display: block; }
        #startOverlay {
            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(0,0,0,0.85); color: #fff;
            display: flex; flex-direction: column; align-items: center; justify-content: center;
            font-family: system-ui, sans-serif; z-index: 100; text-align: center;
            pointer-events: none;
        }
        #startOverlay h1 { font-size: 2.5rem; margin-bottom: 1rem; text-shadow: 0 0 20px #ff6b00; }
        #startOverlay p { font-size: 1.2rem; opacity: 0.8; animation: pulse 2s infinite; }
        @keyframes pulse { 0%,100%{opacity:0.6} 50%{opacity:1} }
        .hidden { display: none !important; }
    </style>
</head>
<body>
    <div id="startOverlay">
        <h1>Low-Poly Campfire</h1>
        <p>Click or press any key to start</p>
    </div>
    <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>
    <script type="module">
    import * as THREE from 'three';
    import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

    // Scene setup
    const scene = new THREE.Scene();
    scene.fog = new THREE.FogExp2(0x050510, 0.008);

    // Renderer
    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.2;
    document.body.appendChild(renderer.domElement);

    // Camera
    const camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 500);
    camera.position.set(0, 15, 25);

    // Controls
    const controls = new OrbitControls(camera, renderer.domElement);
    controls.enableDamping = true;
    controls.dampingFactor = 0.05;
    controls.minDistance = 5;
    controls.maxDistance = 60;
    controls.maxPolarAngle = Math.PI / 2 - 0.05; // Stay above ground
    controls.minPolarAngle = 0.15;
    controls.target.set(0, 2, 0);
    controls.update();

    // --- Ground ---
    const groundGeometry = new THREE.PlaneGeometry(200, 200, 50, 50);
    const groundMaterial = new THREE.MeshStandardMaterial({
        color: 0x1a1510,
        roughness: 0.9,
        metalness: 0.1,
        vertexColors: true
    });
    // Add vertex color variation
    const posAttr = groundGeometry.getAttribute('position');
    const colors = [];
    for (let i = 0; i < posAttr.count; i++) {
        const x = posAttr.getX(i);
        const z = posAttr.getZ(i);
        const noise = Math.sin(x * 0.1) * Math.cos(z * 0.1) * 0.05 + Math.random() * 0.03;
        const r = 0.1 + noise;
        const g = 0.08 + noise * 0.5;
        const b = 0.05 + noise * 0.3;
        colors.push(r, g, b);
    }
    groundGeometry.setAttribute('color', new THREE.Float32BufferAttribute(colors, 3));
    const ground = new THREE.Mesh(groundGeometry, groundMaterial);
    ground.rotation.x = -Math.PI / 2;
    ground.receiveShadow = true;
    scene.add(ground);

    // --- Low-poly Tree Generator ---
    function createTree(x, z, scale = 1) {
        const group = new THREE.Group();
        const trunkHeight = 1.5 + Math.random() * 1.5;
        const trunkRadius = 0.25 + Math.random() * 0.15;
        const foliageHeight = 2.5 + Math.random() * 2;
        const foliageRadius = 1.2 + Math.random() * 0.8;

        // Trunk - low poly cylinder
        const trunkGeo = new THREE.CylinderGeometry(trunkRadius * 0.7, trunkRadius, trunkHeight, 6, 1, false);
        const trunkMat = new THREE.MeshStandardMaterial({
            color: new THREE.Color().setHSL(0.08, 0.3, 0.15 + Math.random() * 0.1),
            roughness: 0.9, metalness: 0.1, flatShading: true
        });
        const trunk = new THREE.Mesh(trunkGeo, trunkMat);
        trunk.position.y = trunkHeight / 2;
        trunk.castShadow = true;
        trunk.receiveShadow = true;
        group.add(trunk);

        // Foliage layers (2-3 cones)
        const layers = 2 + Math.floor(Math.random() * 2);
        const foliageMat = new THREE.MeshStandardMaterial({
            color: new THREE.Color().setHSL(0.3, 0.4, 0.1 + Math.random() * 0.15),
            roughness: 0.8, metalness: 0, flatShading: true
        });

        for (let i = 0; i < layers; i++) {
            const layerHeight = foliageHeight / layers;
            const layerRadius = foliageRadius * (1 - i * 0.3);
            const coneGeo = new THREE.ConeGeometry(layerRadius, layerHeight, 6);
            const cone = new THREE.Mesh(coneGeo, foliageMat);
            cone.position.y = trunkHeight + layerHeight / 2 + i * layerHeight * 0.85;
            cone.castShadow = true;
            cone.receiveShadow = true;
            group.add(cone);
        }

        group.scale.setScalar(scale);
        group.position.set(x, 0, z);
        return group;
    }

    // --- Rocks ---
    function createRock(x, z, scale = 1) {
        const detail = Math.floor(Math.random() * 2); // 0 or 1 subdivision
        const geo = new THREE.IcosahedronGeometry(1, detail);
        // Randomize vertices for low-poly look
        const pos = geo.getAttribute('position');
        for (let i = 0; i < pos.count; i++) {
            const v = new THREE.Vector3().fromBufferAttribute(pos, i);
            v.multiplyScalar(0.7 + Math.random() * 0.6);
            pos.setXYZ(i, v.x, v.y, v.z);
        }
        geo.computeVertexNormals();

        const mat = new THREE.MeshStandardMaterial({
            color: new THREE.Color().setHSL(0.06, 0.1, 0.2 + Math.random() * 0.15),
            roughness: 0.9, metalness: 0, flatShading: true
        });
        const rock = new THREE.Mesh(geo, mat);
        rock.scale.setScalar(0.5 + Math.random() * 1.5);
        rock.scale.multiplyScalar(scale);
        rock.position.set(x, rock.scale.y / 2, z);
        rock.rotation.set(Math.random() * 0.5, Math.random() * Math.PI * 2, Math.random() * 0.5);
        rock.castShadow = true;
        rock.receiveShadow = true;
        return rock;
    }

    // --- Logs ---
    function createLog(x, z, rotY) {
        const geo = new THREE.CylinderGeometry(0.25, 0.3, 2.5, 6);
        const mat = new THREE.MeshStandardMaterial({
            color: 0x2a1a0a, roughness: 0.9, metalness: 0, flatShading: true
        });
        const log = new THREE.Mesh(geo, mat);
        log.position.set(x, 0.3, z);
        log.rotation.z = Math.PI / 2 + (Math.random() - 0.5) * 0.3;
        log.rotation.y = rotY + (Math.random() - 0.5) * 0.5;
        log.castShadow = true;
        log.receiveShadow = true;
        return log;
    }

    // --- Place Trees (30+, avoiding center fire area) ---
    const trees = [];
    const treeCount = 40;
    const clearingRadius = 8;
    for (let i = 0; i < treeCount; i++) {
        let x, z, dist;
        do {
            x = (Math.random() - 0.5) * 180;
            z = (Math.random() - 0.5) * 180;
            dist = Math.sqrt(x * x + z * z);
        } while (dist < clearingRadius || dist > 85);
        const tree = createTree(x, z, 0.8 + Math.random() * 0.6);
        scene.add(tree);
        trees.push(tree);
    }

    // --- Place Rocks around clearing ---
    for (let i = 0; i < 15; i++) {
        const angle = Math.random() * Math.PI * 2;
        const r = clearingRadius + 1 + Math.random() * 6;
        const rock = createRock(Math.cos(angle) * r, Math.sin(angle) * r, 0.7 + Math.random() * 0.6);
        scene.add(rock);
    }
    // Extra rocks scattered
    for (let i = 0; i < 10; i++) {
        const rock = createRock((Math.random()-0.5)*160, (Math.random()-0.5)*160, 0.5 + Math.random());
        scene.add(rock);
    }

    // --- Place Logs around fire ---
    for (let i = 0; i < 6; i++) {
        const angle = (i / 6) * Math.PI * 2 + (Math.random() - 0.5) * 0.5;
        const r = 2.5 + Math.random() * 1.5;
        const log = createLog(Math.cos(angle) * r, Math.sin(angle) * r, angle + Math.PI / 2);
        scene.add(log);
    }
    // Stacked logs in fire
    for (let i = 0; i < 4; i++) {
        const angle = (i / 4) * Math.PI * 2;
        const log = createLog(Math.cos(angle) * 0.6, Math.sin(angle) * 0.6, angle);
        log.position.y = 0.3;
        log.scale.y = 0.8;
        scene.add(log);
    }
    for (let i = 0; i < 3; i++) {
        const angle = (i / 3) * Math.PI * 2 + Math.PI / 6;
        const log = createLog(Math.cos(angle) * 0.4, Math.sin(angle) * 0.4, angle + Math.PI / 3);
        log.position.y = 0.9;
        log.scale.y = 0.6;
        scene.add(log);
    }

    // --- Campfire: Flames (Particle System) ---
    const flameCount = 120;
    const flameGeometry = new THREE.BufferGeometry();
    const flamePositions = new Float32Array(flameCount * 3);
    const flameSizes = new Float32Array(flameCount);
    const flameLife = new Float32Array(flameCount);
    const flameSpeed = new Float32Array(flameCount);
    const flameHue = new Float32Array(flameCount);

    for (let i = 0; i < flameCount; i++) {
        resetFlame(i);
    }

    function resetFlame(i) {
        const angle = Math.random() * Math.PI * 2;
        const r = Math.random() * 0.5;
        flamePositions[i * 3] = Math.cos(angle) * r;
        flamePositions[i * 3 + 1] = Math.random() * 0.3;
        flamePositions[i * 3 + 2] = Math.sin(angle) * r;
        flameSizes[i] = 0.3 + Math.random() * 0.5;
        flameLife[i] = Math.random();
        flameSpeed[i] = 0.008 + Math.random() * 0.012;
        flameHue[i] = 0.02 + Math.random() * 0.08; // Orange to yellow
    }

    flameGeometry.setAttribute('position', new THREE.BufferAttribute(flamePositions, 3));
    flameGeometry.setAttribute('size', new THREE.BufferAttribute(flameSizes, 1));
    flameGeometry.setAttribute('life', new THREE.BufferAttribute(flameLife, 1));
    flameGeometry.setAttribute('speed', new THREE.BufferAttribute(flameSpeed, 1));
    flameGeometry.setAttribute('hue', new THREE.BufferAttribute(flameHue, 1));

    const flameMaterial = new THREE.PointsMaterial({
        size: 1,
        vertexColors: true,
        transparent: true,
        opacity: 0.9,
        depthWrite: false,
        blending: THREE.AdditiveBlending,
        sizeAttenuation: true
    });

    // Custom shader for flame color by life
    flameMaterial.onBeforeCompile = (shader) => {
        shader.vertexShader = shader.vertexShader.replace(
            '#include <common>',
            `#include <common>
            attribute float life;
            attribute float hue;
            varying float vLife;
            varying float vHue;
            `
        ).replace(
            '#include <color_vertex>',
            `#include <color_vertex>
            vLife = life;
            vHue = hue;
            `
        );
        shader.fragmentShader = shader.fragmentShader.replace(
            '#include <common>',
            `#include <common>
            varying float vLife;
            varying float vHue;
            vec3 hsv2rgb(vec3 c) {
                vec4 K = vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0);
                vec3 p = abs(fract(c.xxx + K.xyz) * 6.0 - K.www);
                return c.z * mix(K.xxx, clamp(p - K.xxx, 0.0, 1.0), c.y);
            }
            `
        ).replace(
            'gl_FragColor = vec4( outgoingLight, diffuseColor.a );',
            `vec3 color = hsv2rgb(vec3(vHue, 0.9, 1.0));
            float alpha = (1.0 - vLife) * 0.8;
            gl_FragColor = vec4(color * outgoingLight, alpha);`
        );
    };

    const flames = new THREE.Points(flameGeometry, flameMaterial);
    flames.position.y = 0.5;
    scene.add(flames);

    // --- Campfire Light (Flickering Point Light) ---
    const fireLight = new THREE.PointLight(0xff4400, 1, 30, 2);
    fireLight.position.set(0, 2, 0);
    fireLight.castShadow = true;
    fireLight.shadow.mapSize.set(512, 512);
    fireLight.shadow.camera.near = 0.5;
    fireLight.shadow.camera.far = 30;
    fireLight.shadow.bias = -0.001;
    scene.add(fireLight);

    // Secondary warm ambient light from fire
    const fireLight2 = new THREE.PointLight(0xff6600, 0.5, 50, 2);
    fireLight2.position.set(0, 1, 0);
    scene.add(fireLight2);

    // --- Sparks Particle System ---
    const sparkCount = 80;
    const sparkGeometry = new THREE.BufferGeometry();
    const sparkPositions = new Float32Array(sparkCount * 3);
    const sparkVelocities = [];
    const sparkSizes = new Float32Array(sparkCount);
    const sparkLife = new Float32Array(sparkCount);
    const sparkMaxLife = new Float32Array(sparkCount);

    for (let i = 0; i < sparkCount; i++) {
        resetSpark(i, true);
    }

    function resetSpark(i, init = false) {
        const angle = Math.random() * Math.PI * 2;
        const r = Math.random() * 0.4;
        sparkPositions[i * 3] = Math.cos(angle) * r;
        sparkPositions[i * 3 + 1] = init ? Math.random() * 4 : 0.2;
        sparkPositions[i * 3 + 2] = Math.sin(angle) * r;

        const speed = 0.02 + Math.random() * 0.04;
        const dir = new THREE.Vector3(
            (Math.random() - 0.5) * 0.3,
            0.5 + Math.random() * 0.5,
            (Math.random() - 0.5) * 0.3
        ).normalize().multiplyScalar(speed);
        sparkVelocities[i] = dir;

        sparkSizes[i] = 0.04 + Math.random() * 0.06;
        sparkLife[i] = init ? Math.random() : 0;
        sparkMaxLife[i] = 0.5 + Math.random() * 1.5;
    }

    sparkGeometry.setAttribute('position', new THREE.BufferAttribute(sparkPositions, 3));
    sparkGeometry.setAttribute('size', new THREE.BufferAttribute(sparkSizes, 1));
    sparkGeometry.setAttribute('life', new THREE.BufferAttribute(sparkLife, 1));

    const sparkMaterial = new THREE.PointsMaterial({
        color: 0xffcc00,
        size: 1,
        vertexColors: false,
        transparent: true,
        opacity: 1,
        depthWrite: false,
        blending: THREE.AdditiveBlending,
        sizeAttenuation: true
    });
    sparkMaterial.onBeforeCompile = (shader) => {
        shader.vertexShader = shader.vertexShader.replace(
            '#include <common>',
            `#include <common>
            attribute float life;
            varying float vLife;
            `
        ).replace(
            '#include <color_vertex>',
            `#include <color_vertex>
            vLife = life;
            `
        );
        shader.fragmentShader = shader.fragmentShader.replace(
            '#include <common>',
            `#include <common>
            varying float vLife;
            `
        ).replace(
            'gl_FragColor = vec4( outgoingLight, diffuseColor.a );',
            `float alpha = 1.0 - smoothstep(0.0, 1.0, vLife);
            gl_FragColor = vec4(outgoingLight.rgb, alpha);`
        );
    };

    const sparks = new THREE.Points(sparkGeometry, sparkMaterial);
    sparks.position.y = 0.5;
    scene.add(sparks);

    // --- Stars ---
    const starCount = 2000;
    const starGeometry = new THREE.BufferGeometry();
    const starPositions = new Float32Array(starCount * 3);
    const starSizes = new Float32Array(starCount);
    const starColors = new Float32Array(starCount * 3);

    for (let i = 0; i < starCount; i++) {
        const radius = 100 + Math.random() * 50;
        const theta = Math.random() * Math.PI * 2;
        const phi = Math.acos(2 * Math.random() - 1);
        starPositions[i * 3] = radius * Math.sin(phi) * Math.cos(theta);
        starPositions[i * 3 + 1] = radius * Math.cos(phi) + 20; // Raise sky
        starPositions[i * 3 + 2] = radius * Math.sin(phi) * Math.sin(theta);
        starSizes[i] = 0.1 + Math.random() * 0.3;
        const temp = Math.random();
        if (temp < 0.6) { starColors[i*3]=1; starColors[i*3+1]=0.95; starColors[i*3+2]=0.9; }
        else if (temp < 0.9) { starColors[i*3]=1; starColors[i*3+1]=0.7; starColors[i*3+2]=0.5; }
        else { starColors[i*3]=0.6; starColors[i*3+1]=0.7; starColors[i*3+2]=1; }
    }

    starGeometry.setAttribute('position', new THREE.BufferAttribute(starPositions, 3));
    starGeometry.setAttribute('size', new THREE.BufferAttribute(starSizes, 1));
    starGeometry.setAttribute('color', new THREE.BufferAttribute(starColors, 3));

    const starMaterial = new THREE.PointsMaterial({
        size: 1, vertexColors: true, transparent: true, opacity: 0.9,
        depthWrite: false, blending: THREE.AdditiveBlending, sizeAttenuation: false
    });
    const stars = new THREE.Points(starGeometry, starMaterial);
    scene.add(stars);

    // --- Moon ---
    const moonGeo = new THREE.SphereGeometry(4, 16, 16);
    const moonMat = new THREE.MeshBasicMaterial({
        color: 0xfff5e0,
        transparent: true,
        opacity: 0.9
    });
    const moon = new THREE.Mesh(moonGeo, moonMat);
    moon.position.set(-40, 50, -60);
    scene.add(moon);

    // Moon glow
    const moonGlowGeo = new THREE.SphereGeometry(6, 16, 16);
    const moonGlowMat = new THREE.MeshBasicMaterial({
        color: 0xfff0d0, transparent: true, opacity: 0.05,
        depthWrite: false, blending: THREE.AdditiveBlending, side: THREE.BackSide
    });
    const moonGlow = new THREE.Mesh(moonGlowGeo, moonGlowMat);
    moonGlow.position.copy(moon.position);
    scene.add(moonGlow);

    // --- Ambient Light ---
    const ambientLight = new THREE.AmbientLight(0x101020, 0.5);
    scene.add(ambientLight);

    // --- Hemisphere Light for subtle sky/ground bounce ---
    const hemiLight = new THREE.HemisphereLight(0x000020, 0x1a1005, 0.3);
    scene.add(hemiLight);

    // --- Animation ---
    let time = 0;
    const startOverlay = document.getElementById('startOverlay');
    let started = false;

    function startExperience() {
        if (started) return;
        started = true;
        startOverlay.classList.add('hidden');
        animate();
    }

    window.addEventListener('click', startExperience);
    window.addEventListener('keydown', startExperience);
    renderer.domElement.addEventListener('click', startExperience);

    function animate() {
        requestAnimationFrame(animate);
        const dt = 1/60;
        time += dt;

        // Animate flames
        const flamePos = flameGeometry.attributes.position;
        const flameLifeAttr = flameGeometry.attributes.life;
        const flameSpeedAttr = flameGeometry.attributes.speed;
        const flameSizeAttr = flameGeometry.attributes.size;
        const flameHueAttr = flameGeometry.attributes.hue;

        for (let i = 0; i < flameCount; i++) {
            flameLifeAttr.array[i] += flameSpeedAttr.array[i] * (0.8 + Math.random() * 0.4);
            if (flameLifeAttr.array[i] > 1) {
                resetFlame(i);
            } else {
                // Rise and flicker
                flamePos.array[i*3 + 1] += flameSpeedAttr.array[i] * 1.5 * (1.2 - flameLifeAttr.array[i]);
                flamePos.array[i*3] += (Math.random() - 0.5) * 0.02 * flameLifeAttr.array[i];
                flamePos.array[i*3+2] += (Math.random() - 0.5) * 0.02 * flameLifeAttr.array[i];
            }
        }
        flamePos.needsUpdate = true;
        flameLifeAttr.needsUpdate = true;

        // Animate sparks
        const sparkPos = sparkGeometry.attributes.position;
        const sparkLifeAttr = sparkGeometry.attributes.life;
        for (let i = 0; i < sparkCount; i++) {
            sparkLifeAttr.array[i] += dt / sparkMaxLife[i];
            if (sparkLifeAttr.array[i] >= 1) {
                resetSpark(i);
            } else {
                const vel = sparkVelocities[i];
                sparkPos.array[i*3] += vel.x;
                sparkPos.array[i*3+1] += vel.y;
                sparkPos.array[i*3+2] += vel.z;
                vel.y -= 0.0008; // gravity
                vel.multiplyScalar(0.99); // air resistance
            }
        }
        sparkPos.needsUpdate = true;
        sparkLifeAttr.needsUpdate = true;

        // Flicker fire light
        const flicker = 0.8 + Math.sin(time * 8) * 0.1 + Math.sin(time * 13) * 0.08 + Math.random() * 0.1;
        fireLight.intensity = flicker * 1.2;
        fireLight.distance = 25 + Math.sin(time * 5) * 3;
        fireLight2.intensity = flicker * 0.6;

        // Subtle color shift
        const hueShift = Math.sin(time * 0.5) * 0.02;
        fireLight.color.setHSL(0.04 + hueShift, 1, 0.5);
        fireLight2.color.setHSL(0.06 + hueShift, 1, 0.6);

        // Rotate stars slowly
        stars.rotation.y += 0.00002;

        // Camera subtle drift
        camera.position.x += Math.sin(time * 0.15) * 0.001;
        camera.position.z += Math.cos(time * 0.13) * 0.001;

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

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

    // Initial render to show something before click
    renderer.render(scene, camera);
    </script>
</body>
</html>
Reasoning trace (320 tokens)
The user wants a low-poly 3D campfire scene in a forest clearing at night using Three.js. Let me break down the requirements:

1. Ground with low-poly rocks and logs around a central campfire
2. At least 30 low-poly trees placed randomly around the clearing (not on the fire)
3. Campfire with animated flames and warm point light that flickers and casts shadows
4. Sparks rising from fire as particle system
5. Dark night sky with stars and moon, plus fog
6. OrbitControls with limits (camera stays above ground)
7. Renderer fills window, handles resizing
8. Must be self-contained in single HTML file
9. Use the provided import map for Three.js

I'll create a complete HTML file with all the necessary components. Let me plan the structure:

- Import Three.js and OrbitControls via the import map
- Set up scene, camera, renderer
- Create ground plane with fog
- Create low-poly trees (simple cone + cylinder geometry)
- Create rocks (low-poly spheres/geometries)
- Create logs (cylinders)
- Campfire: particle system for flames, point light with flickering
- Sparks: another particle system
- Stars: points in a large sphere
- Moon: simple sphere with emissive material
- Fog: exponential fog
- OrbitControls with min/max polar angle to stay above ground
- Animation loop with flame animation, light flickering, spark updates
- Resize handler

Let me write the code now.