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.2 s
Cost: $0.0026
Output tokens: 1,616
Spent thinking: 0 tokens
Speed: 430.1 tok/s
Console errors: 0

First token after: 467 ms
First visible text after: 467 ms
Prompt tokens: 592
Code size: 5.0 KB
Finish reason: stop
Served by: Google
Model id: google/gemini-3.1-flash-lite
Reasoning sent: {"effort":"none"}
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 · 121 lines

Download

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Low-Poly Campfire Night</title>
    <style>
        body { margin: 0; overflow: hidden; background: #050505; 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>
</head>
<body>
    <div id="overlay">Click or press any key to start</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';

        let started = false;
        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;

        // 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
        for(let i=0; i<40; i++) {
            const angle = Math.random() * Math.PI * 2;
            const dist = 6 + Math.random() * 12;
            const x = Math.cos(angle) * dist;
            const z = Math.sin(angle) * dist;
            const group = new THREE.Group();
            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.5, 2, 4), new THREE.MeshStandardMaterial({ color: 0x0a330a }));
            leaves.position.y = 1.2;
            group.add(trunk, leaves);
            group.position.set(x, 0.5, z);
            group.castShadow = true;
            scene.add(group);
        }

        // Fire
        const fireLight = new THREE.PointLight(0xffaa33, 2, 10);
        fireLight.position.set(0, 0.5, 0);
        fireLight.castShadow = true;
        scene.add(fireLight);

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

        // Particles
        const particles = new THREE.Points(
            new THREE.BufferGeometry().setAttribute('position', new THREE.Float32BufferAttribute(new Array(150).fill(0), 3)),
            new THREE.PointsMaterial({ color: 0xffcc00, size: 0.05, transparent: true })
        );
        scene.add(particles);

        // Environment
        const moon = new THREE.Mesh(new THREE.SphereGeometry(1), new THREE.MeshBasicMaterial({ color: 0xffffff }));
        moon.position.set(10, 15, -10);
        scene.add(moon);
        scene.add(new THREE.AmbientLight(0x111122, 0.5));

        // Start Logic
        const start = () => {
            if(started) return;
            document.getElementById('overlay').style.display = 'none';
            started = true;
        };
        window.addEventListener('keydown', start);
        window.addEventListener('click', start);

        function animate(t) {
            requestAnimationFrame(animate);
            if(started) {
                flame.scale.set(1 + Math.sin(t*0.02)*0.1, 1 + Math.cos(t*0.03)*0.2, 1 + Math.sin(t*0.02)*0.1);
                fireLight.intensity = 2 + Math.random();
                const pos = particles.geometry.attributes.position.array;
                for(let i=0; i<pos.length; i+=3) {
                    pos[i+1] += 0.02;
                    if(pos[i+1] > 2) pos[i+1] = 0;
                    pos[i] += (Math.random()-0.5)*0.01;
                    pos[i+2] += (Math.random()-0.5)*0.01;
                }
                particles.geometry.attributes.position.needsUpdate = true;
            } else {
                camera.position.x = Math.cos(t*0.0005) * 8;
                camera.position.z = Math.sin(t*0.0005) * 8;
                camera.lookAt(0,0,0);
            }
            renderer.render(scene, camera);
        }
        animate(0);

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