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

First token after: 1.7 s
First visible text after: 1.7 s
Prompt tokens: 592
Code size: 4.8 KB
Finish reason: stop
Served by: Google
Model id: google/gemini-3.1-flash-lite
Reasoning sent: model default
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 · 115 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; }
        #ui { position: absolute; top: 20px; width: 100%; text-align: center; color: white; pointer-events: none; text-shadow: 1px 1px 2px black; }
        canvas { display: block; }
    </style>
</head>
<body>
    <div id="ui"><h1>Low-Poly Forest Night</h1><p>Click to start / Orbit Controls</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';

        const scene = new THREE.Scene();
        scene.background = new THREE.Color(0x020205);
        scene.fog = new THREE.FogExp2(0x020205, 0.05);

        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 100);
        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;
        controls.enableDamping = true;

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

        // Trees
        const createTree = (x, z) => {
            const group = new THREE.Group();
            const trunk = new THREE.Mesh(new THREE.CylinderGeometry(0.2, 0.3, 1), new THREE.MeshStandardMaterial({ color: 0x4d3319 }));
            trunk.position.y = 0.5;
            trunk.castShadow = true;
            group.add(trunk);
            const leaves = new THREE.Mesh(new THREE.ConeGeometry(1, 2, 5), new THREE.MeshStandardMaterial({ color: 0x0a2a0a }));
            leaves.position.y = 2;
            leaves.castShadow = true;
            group.add(leaves);
            group.position.set(x, 0, z);
            scene.add(group);
        };

        for (let i = 0; i < 40; i++) {
            let x, z;
            do { x = (Math.random() - 0.5) * 40; z = (Math.random() - 0.5) * 40; } while (Math.abs(x) < 5 && Math.abs(z) < 5);
            createTree(x, z);
        }

        // Fire
        const fireLight = new THREE.PointLight(0xff6600, 2, 15);
        fireLight.position.set(0, 0.8, 0);
        fireLight.castShadow = true;
        scene.add(fireLight);

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

        // Particles
        const particles = new THREE.BufferGeometry();
        const pCount = 50;
        const pos = new Float32Array(pCount * 3);
        for(let i=0; i<pCount*3; i++) pos[i] = (Math.random()-0.5)*0.2;
        particles.setAttribute('position', new THREE.BufferAttribute(pos, 3));
        const pMat = new THREE.PointsMaterial({ color: 0xffaa00, size: 0.05 });
        const pSystem = new THREE.Points(particles, pMat);
        scene.add(pSystem);

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

        function animate() {
            requestAnimationFrame(animate);
            const time = Date.now() * 0.005;
            fireLight.intensity = 2 + Math.sin(time) * 0.5;
            flame.scale.set(1 + Math.sin(time * 2) * 0.1, 1 + Math.cos(time * 3) * 0.2, 1 + Math.sin(time * 2) * 0.1);
            
            const p = pSystem.geometry.attributes.position.array;
            for(let i=0; i<pCount; i++) {
                p[i*3+1] += 0.02;
                if(p[i*3+1] > 2) p[i*3+1] = 0;
            }
            pSystem.geometry.attributes.position.needsUpdate = true;
            
            controls.update();
            renderer.render(scene, camera);
        }
        window.addEventListener('resize', () => {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth, window.innerHeight);
        });
        animate();
    </script>
</body>
</html>