Gemini 3.1 Flash Lite

by GoogleReasoningClean

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

How it went

Total time: 16.1 s
Cost: $0.0082
Output tokens: 5,382
Spent thinking: 2,920 tokens
Speed: 361.2 tok/s
Console errors: 0

First token after: 1.2 s
First visible text after: 10.4 s
Prompt tokens: 592
Code size: 7.0 KB
Finish reason: stop
Served by: Google
Model id: google/gemini-3.1-flash-lite
Reasoning sent: {"effort":"high"}
Max output: 65,536 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 · 205 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 Night</title>
    <style>
        body { margin: 0; overflow: hidden; background-color: #050510; font-family: sans-serif; }
        #overlay {
            position: absolute; top: 0; left: 0; width: 100%; height: 100%;
            display: flex; flex-direction: column; justify-content: center; align-items: center;
            color: white; background: rgba(0,0,0,0.6); z-index: 10; cursor: pointer;
        }
        canvas { display: block; }
    </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="overlay">
    <h1>Campfire Night</h1>
    <p>Click or press any key to start exploration</p>
</div>

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

    let started = false;
    const overlay = document.getElementById('overlay');
    
    // Scene setup
    const scene = new THREE.Scene();
    scene.background = new THREE.Color(0x050510);
    scene.fog = new THREE.Fog(0x050510, 5, 40);

    const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    camera.position.set(10, 5, 10);

    const renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.shadowMap.enabled = true;
    renderer.shadowMap.type = THREE.PCFSoftShadowMap;
    document.body.appendChild(renderer.domElement);

    // Controls
    const controls = new OrbitControls(camera, renderer.domElement);
    controls.enabled = false; // Disabled until interaction
    controls.minPolarAngle = 0.5;
    controls.maxPolarAngle = Math.PI / 2 - 0.1;

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

    const moonLight = new THREE.DirectionalLight(0xaaaaff, 0.3);
    moonLight.position.set(20, 20, 20);
    scene.add(moonLight);

    const fireLight = new THREE.PointLight(0xff6600, 2, 15);
    fireLight.position.set(0, 0.5, 0);
    fireLight.castShadow = true;
    fireLight.shadow.mapSize.set(512, 512);
    scene.add(fireLight);

    // Ground
    const groundGeo = new THREE.CircleGeometry(50, 32);
    const groundMat = new THREE.MeshLambertMaterial({ color: 0x1a2010 });
    const ground = new THREE.Mesh(groundGeo, groundMat);
    ground.rotation.x = -Math.PI / 2;
    ground.receiveShadow = true;
    scene.add(ground);

    // Trees
    function createTree() {
        const group = new THREE.Group();
        const trunk = new THREE.Mesh(
            new THREE.CylinderGeometry(0.2, 0.3, 1, 6),
            new THREE.MeshLambertMaterial({ color: 0x4b3621 })
        );
        trunk.position.y = 0.5;
        trunk.castShadow = true;
        group.add(trunk);

        const leaves = new THREE.Mesh(
            new THREE.ConeGeometry(1.2, 2, 6),
            new THREE.MeshLambertMaterial({ color: 0x1a331a })
        );
        leaves.position.y = 2;
        leaves.castShadow = true;
        group.add(leaves);

        return group;
    }

    for (let i = 0; i < 40; i++) {
        const angle = Math.random() * Math.PI * 2;
        const dist = 8 + Math.random() * 30;
        const tree = createTree();
        tree.position.set(Math.cos(angle) * dist, 0, Math.sin(angle) * dist);
        scene.add(tree);
    }

    // Campfire
    const logs = new THREE.Group();
    const logGeo = new THREE.CylinderGeometry(0.15, 0.15, 1.5, 6);
    const logMat = new THREE.MeshLambertMaterial({ color: 0x3d2b1f });
    for(let i=0; i<4; i++){
        const log = new THREE.Mesh(logGeo, logMat);
        log.rotation.z = Math.PI/2 + (i%2 ? 0.3 : -0.3);
        log.rotation.y = (i * Math.PI)/4;
        log.position.y = 0.1;
        logs.add(log);
    }
    scene.add(logs);

    const flame1 = new THREE.Mesh(
        new THREE.ConeGeometry(0.5, 1, 4),
        new THREE.MeshBasicMaterial({ color: 0xffaa00, transparent: true, opacity: 0.6 })
    );
    flame1.position.y = 0.6;
    scene.add(flame1);

    const flame2 = new THREE.Mesh(
        new THREE.ConeGeometry(0.3, 0.7, 4),
        new THREE.MeshBasicMaterial({ color: 0xffffff, transparent: true, opacity: 0.8 })
    );
    flame2.position.y = 0.5;
    scene.add(flame2);

    // Sparks
    const sparkCount = 100;
    const sparkGeo = new THREE.BufferGeometry();
    const pos = new Float32Array(sparkCount * 3);
    for(let i=0; i<sparkCount*3; i+=3){
        pos[i] = (Math.random()-0.5) * 0.4;
        pos[i+1] = Math.random() * 0.5;
        pos[i+2] = (Math.random()-0.5) * 0.4;
    }
    sparkGeo.setAttribute('position', new THREE.BufferAttribute(pos, 3));
    const sparkMat = new THREE.PointsMaterial({ color: 0xffcc00, size: 0.05, transparent: true, opacity: 0.8 });
    const sparks = new THREE.Points(sparkGeo, sparkMat);
    scene.add(sparks);

    // Stars
    const starGeo = new THREE.BufferGeometry();
    const starPos = [];
    for(let i=0; i<500; i++){
        starPos.push((Math.random()-0.5)*200, Math.random()*100, (Math.random()-0.5)*200);
    }
    starGeo.setAttribute('position', new THREE.Float32BufferAttribute(starPos, 3));
    const starMat = new THREE.PointsMaterial({ color: 0xffffff, size: 0.1 });
    scene.add(new THREE.Points(starGeo, starMat));

    // Input handlers
    const start = () => {
        if(started) return;
        started = true;
        overlay.style.display = 'none';
        controls.enabled = true;
    };
    window.addEventListener('keydown', start);
    overlay.addEventListener('click', start);

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

    // Animation Loop
    let time = 0;
    function animate() {
        requestAnimationFrame(animate);
        time += 0.05;

        // Auto-rotate if not started
        if (!started) {
            camera.position.x = Math.cos(time * 0.1) * 15;
            camera.position.z = Math.sin(time * 0.1) * 15;
            camera.lookAt(0, 1, 0);
        } else {
            controls.update();
        }

        // Fire flicker
        fireLight.intensity = 1.5 + Math.sin(time * 5) * 0.5;
        flame1.scale.set(1 + Math.sin(time*10)*0.1, 1 + Math.cos(time*5)*0.2, 1 + Math.sin(time*10)*0.1);
        flame2.scale.set(1 + Math.cos(time*12)*0.1, 1 + Math.sin(time*7)*0.2, 1 + Math.cos(time*12)*0.1);

        // Spark movement
        const positions = sparks.geometry.attributes.position.array;
        for(let i=0; i<sparkCount*3; i+=3){
            positions[i+1] += 0.02;
            positions[i] += Math.sin(time + i) * 0.01;
            if(positions[i+1] > 2) positions[i+1] = 0;
        }
        sparks.geometry.attributes.position.needsUpdate = true;

        renderer.render(scene, camera);
    }
    animate();
</script>
</body>
</html>

Reasoning trace (2,920 tokens)

**Building Scene Elements**

I'm currently focused on constructing the foundational elements for our night forest campfire scene. My immediate steps involve setting up the ground plane and beginning the detailed work on the campfire itself, specifically the logs, rocks, and the initial animation of the flame.

**Illuminating the Forest**

I'm now integrating lighting and atmospheric effects. My focus is on establishing a point light source for the campfire, ensuring realistic shadows, and beginning the implementation of a particle system for dynamic sparks. I'm also preparing to scatter the low-poly trees and define the dark night sky with celestial elements.

**Generating Procedural Assets**

I'm working on procedural generation for scene elements. My focus is on creating a `createTree` function using simple cone and cylinder geometries, and I'm developing a `createFire` function to manage the core flame and sparks. I'm also outlining the animation loop to handle dynamic effects like flickering and scaling.

**Animating Fire Elements**

I'm now refining the fire's visual dynamics. My current work involves animating the point light intensity for flickering and implementing the particle system for sparks, focusing on their upward movement and reset logic to maintain continuous effect. I'm also ensuring the logs and rocks are positioned correctly.

**Refining Fire Dynamics**

I'm now fine-tuning the campfire's visual and interactive elements. My immediate focus is on adjusting the fire's color palette for more realistic embers, establishing the ground plane with appropriate textures, and ensuring the shadow casting is optimized. I'm also integrating subtle camera movement for an engaging demo.

**Directing Camera View**

I'm now adjusting the camera's initial perspective to ensure the campfire is immediately visible upon loading. My focus is on resolving the "first paint" issue by orienting the camera directly towards the core scene element. I'm also considering how to implement the moon.

**Optimizing Spark Animation**

I'm focusing on the efficient animation of sparks. My current work involves setting up a `Points` object and animating its vertex positions in the `animate` loop, incorporating turbulence for a natural feel. I'm also planning the reusable `createTree` function and how to integrate the moon.

**Enhancing Fire Visuals**

I'm refining the visual fidelity of the campfire and its environment. My immediate steps include implementing the spark particle system using a `Points` object and animating their movement. I'm also considering the best approach for shadow rendering with `PointLight` given performance constraints and how to position the moon.

**Implementing Shadow Effects**

I'm focusing on enhancing realism by ensuring the campfire casts shadows onto the surrounding trees. My immediate steps involve enabling shadow casting on the point light source. I'm also refining the spark animation logic and considering a simple UI overlay for scene initiation.

**Animating Camera Movement**

I'm implementing a self-playing camera animation that will rotate around the scene until user interaction. My focus is on ensuring the campfire remains the central visual element during this rotation. I'm also planning the initial visual representation of the flame.

**Optimizing Shadow Rendering**

I'm tackling the performance implications of point light shadows. I'll be focusing on optimizing the rendering process by limiting shadow recipients, particularly disabling shadows for particles, and ensuring the overall scene remains performant despite these enhancements. I'm also preparing a "Click to start" overlay and planning tree placement.

**Finalizing Scene Elements**

I'm now conducting final checks and addressing last-minute details. This includes confirming viewport constraints, adjusting camera angles for optimal ground visibility, and ensuring the campfire's flame animation is implemented using nested cones. I'm also verifying shadow map settings and the overall performance.