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: 6.6 s
Cost: $0.0038
Output tokens: 2,428
Spent thinking: 487 tokens
Speed: 462.2 tok/s
Console errors: 0

First token after: 1.4 s
First visible text after: 2.2 s
Prompt tokens: 592
Code size: 6.3 KB
Finish reason: stop
Served by: Google
Model id: google/gemini-3.1-flash-lite
Reasoning sent: {"effort":"medium"}
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 · 155 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: #050505; font-family: sans-serif; }
        #overlay {
            position: absolute; top: 0; left: 0; width: 100%; height: 100%;
            display: flex; justify-content: center; align-items: center;
            color: white; background: rgba(0,0,0,0.5); cursor: pointer;
            z-index: 10; font-size: 1.2rem; text-transform: uppercase; letter-spacing: 2px;
        }
    </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 scene, camera, renderer, controls;
        let fireLight, flames, sparks;
        let start = false;

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

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

            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 = new OrbitControls(camera, renderer.domElement);
            controls.maxPolarAngle = Math.PI / 2 - 0.1;
            controls.enableDamping = true;

            const ambient = new THREE.AmbientLight(0x202040, 0.5);
            scene.add(ambient);

            fireLight = new THREE.PointLight(0xff6600, 2, 20);
            fireLight.position.set(0, 0.5, 0);
            fireLight.castShadow = true;
            scene.add(fireLight);

            // Ground
            const ground = new THREE.Mesh(
                new THREE.CircleGeometry(30, 32),
                new THREE.MeshStandardMaterial({ color: 0x1a2410 })
            );
            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() * 20;
                const x = Math.cos(angle) * dist;
                const z = Math.sin(angle) * dist;
                createTree(x, z);
            }

            // Campfire
            const logGeo = new THREE.CylinderGeometry(0.2, 0.2, 1.5, 6);
            const logMat = new THREE.MeshStandardMaterial({ color: 0x4a3020 });
            for(let i=0; i<4; i++){
                const log = new THREE.Mesh(logGeo, logMat);
                log.position.set(Math.cos(i*Math.PI/2)*0.5, 0.2, Math.sin(i*Math.PI/2)*0.5);
                log.rotation.z = Math.PI/2;
                log.rotation.y = i*Math.PI/2;
                log.castShadow = true;
                scene.add(log);
            }

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

            // Sparks
            const count = 100;
            const sparkGeo = new THREE.BufferGeometry();
            const pos = new Float32Array(count * 3);
            for(let i=0; i<count*3; i++) pos[i] = (Math.random() - 0.5) * 0.5;
            sparkGeo.setAttribute('position', new THREE.BufferAttribute(pos, 3));
            sparks = new THREE.Points(sparkGeo, new THREE.PointsMaterial({ color: 0xffcc00, size: 0.1 }));
            scene.add(sparks);

            // Stars
            const starGeo = new THREE.BufferGeometry();
            const starPos = [];
            for(let i=0; i<1000; 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 stars = new THREE.Points(starGeo, new THREE.PointsMaterial({ color: 0xffffff, size: 0.2 }));
            scene.add(stars);

            window.addEventListener('resize', onResize);
            document.addEventListener('keydown', () => start = true);
            document.getElementById('overlay').addEventListener('click', () => {
                start = true;
                document.getElementById('overlay').style.display = 'none';
            });

            animate();
        }

        function createTree(x, z) {
            const group = new THREE.Group();
            const trunk = new THREE.Mesh(new THREE.CylinderGeometry(0.2, 0.3, 2), new THREE.MeshStandardMaterial({ color: 0x3d2b1f }));
            trunk.position.y = 1;
            group.add(trunk);
            const leaves = new THREE.Mesh(new THREE.ConeGeometry(1.5, 3, 4), new THREE.MeshStandardMaterial({ color: 0x0f2a05 }));
            leaves.position.y = 3.5;
            group.add(leaves);
            group.position.set(x, 0, z);
            group.castShadow = true;
            scene.add(group);
        }

        function onResize() {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth, window.innerHeight);
        }

        function animate(t) {
            requestAnimationFrame(animate);
            if(start) {
                const time = t * 0.005;
                fireLight.intensity = 2 + Math.sin(time * 5) * 0.5;
                flames.scale.set(1 + Math.sin(time) * 0.1, 1 + Math.cos(time * 2) * 0.2, 1 + Math.sin(time) * 0.1);
                
                sparks.position.y = (t * 0.001) % 5;
            }
            controls.update();
            renderer.render(scene, camera);
        }

        init();
    </script>
</body>
</html>

Reasoning trace (487 tokens)

**Building the Scene**

I'm currently focused on constructing the foundational elements for the low-poly, nighttime forest clearing in Three.js. This includes populating the scene with the ground, rocks, and logs, and I've begun placing over 30 trees to establish the forest environment. My next steps involve bringing the campfire to life with animated flames and realistic lighting.