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: 4.4 s
Cost: $0.0026
Output tokens: 1,634
Spent thinking: 0 tokens
Speed: 432.1 tok/s
Console errors: 0

First token after: 667 ms
First visible text after: 667 ms
Prompt tokens: 592
Code size: 5.1 KB
Finish reason: stop
Served by: Google
Model id: google/gemini-3.1-flash-lite
Reasoning sent: {"effort":"minimal"}
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 · 122 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</title>
    <style>
        body { margin: 0; overflow: hidden; background: #050508; font-family: sans-serif; }
        #overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: white; background: rgba(0,0,0,0.4); cursor: pointer; z-index: 10; }
    </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">Click or press any key to start</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');
        const scene = new THREE.Scene();
        scene.background = new THREE.Color(0x050508);
        scene.fog = new THREE.FogExp2(0x050508, 0.08);

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

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

        const controls = new OrbitControls(camera, renderer.domElement);
        controls.minPolarAngle = 0.5;
        controls.maxPolarAngle = 1.4;

        // Lights
        const fireLight = new THREE.PointLight(0xff6600, 20, 15);
        fireLight.position.set(0, 0.8, 0);
        fireLight.castShadow = true;
        scene.add(fireLight);
        scene.add(new THREE.AmbientLight(0x111122, 0.5));

        // Ground
        const ground = new THREE.Mesh(
            new THREE.CircleGeometry(20, 32),
            new THREE.MeshStandardMaterial({ color: 0x1a261a })
        );
        ground.rotation.x = -Math.PI / 2;
        ground.receiveShadow = true;
        scene.add(ground);

        // Trees
        const treeGroup = new THREE.Group();
        for (let i = 0; i < 40; i++) {
            const angle = Math.random() * Math.PI * 2;
            const dist = 5 + Math.random() * 12;
            const x = Math.cos(angle) * dist;
            const z = Math.sin(angle) * dist;
            
            const trunk = new THREE.Mesh(new THREE.CylinderGeometry(0.2, 0.3, 1), new THREE.MeshStandardMaterial({ color: 0x3d2b1f }));
            const leaves = new THREE.Mesh(new THREE.ConeGeometry(1, 2, 6), new THREE.MeshStandardMaterial({ color: 0x0a2a0a }));
            leaves.position.y = 1.5;
            const tree = new THREE.Group();
            tree.add(trunk, leaves);
            tree.position.set(x, 0.5, z);
            tree.castShadow = true;
            treeGroup.add(tree);
        }
        scene.add(treeGroup);

        // Fire
        const flame = new THREE.Mesh(new THREE.ConeGeometry(0.3, 0.8, 4), new THREE.MeshBasicMaterial({ color: 0xff4400, transparent: true, opacity: 0.8 }));
        flame.position.y = 0.4;
        scene.add(flame);

        // Sparks
        const sparkCount = 50;
        const sparks = new THREE.Points(
            new THREE.BufferGeometry().setAttribute('position', new THREE.BufferAttribute(new Float32Array(sparkCount * 3), 3)),
            new THREE.PointsMaterial({ color: 0xffaa00, size: 0.05, transparent: true })
        );
        scene.add(sparks);

        // Moon
        const moon = new THREE.Mesh(new THREE.SphereGeometry(1, 16, 16), new THREE.MeshBasicMaterial({ color: 0xddddff }));
        moon.position.set(10, 15, -10);
        scene.add(moon);

        function animate(t) {
            requestAnimationFrame(animate);
            if (started) {
                flame.scale.set(1 + Math.sin(t / 100) * 0.2, 1 + Math.cos(t / 80) * 0.2, 1);
                fireLight.intensity = 15 + Math.sin(t / 50) * 5;
                
                const pos = sparks.geometry.attributes.position.array;
                for(let i=0; i<sparkCount; i++) {
                    pos[i*3+1] = (t / 500 + i) % 3;
                    pos[i*3] += (Math.random()-0.5) * 0.02;
                    pos[i*3+2] += (Math.random()-0.5) * 0.02;
                }
                sparks.geometry.attributes.position.needsUpdate = true;
                controls.autoRotate = true;
                controls.autoRotateSpeed = 0.5;
            }
            controls.update();
            renderer.render(scene, camera);
        }

        const start = () => { if(!started) { started = true; overlay.style.display = 'none'; } };
        window.addEventListener('keydown', start);
        window.addEventListener('mousedown', start);
        window.addEventListener('resize', () => {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth, window.innerHeight);
        });

        animate(0);
    </script>
</body>
</html>