Interactive 3D aquariumOne-line

Gemini 3.1 Flash Lite

by GoogleReasoningClean

Open in new window

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

How it went

Total time: 3.4 s
Cost: $0.0020
Output tokens: 1,243
Spent thinking: 0 tokens
Speed: 430.4 tok/s
Console errors: 0

First token after: 520 ms
First visible text after: 520 ms
Prompt tokens: 448
Code size: 4.1 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

“a 3D aquarium with Three.js where the fish swim away when I move the mouse near them (Load Three.js only through this import map: <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>)”

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 · 117 lines

Download

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D Aquarium</title>
    <style>
        body { margin: 0; overflow: hidden; background: #001a33; 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; font-size: 24px; cursor: pointer; background: rgba(0,0,0,0.3);
            z-index: 10; text-align: center;
        }
        canvas { display: block; }
    </style>
</head>
<body>
    <div id="overlay">Click to start the Aquarium</div>

    <script type="importmap">
        {"imports":{"three":"https://cdn.jsdelivr.net/npm/three@0.170.0/build/three.module.js"}}
    </script>

    <script type="module">
        import * as THREE from 'three';

        let scene, camera, renderer, fishes = [];
        let mouse = new THREE.Vector2(-100, -100);
        let started = false;

        function init() {
            scene = new THREE.Scene();
            scene.background = new THREE.Color(0x001a33);
            camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
            camera.position.z = 15;

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

            const light = new THREE.DirectionalLight(0xffffff, 2);
            light.position.set(5, 5, 5);
            scene.add(light);
            scene.add(new THREE.AmbientLight(0x4477aa, 1));

            // Create fish
            for(let i=0; i<15; i++) createFish();

            window.addEventListener('mousemove', e => {
                mouse.x = (e.clientX / window.innerWidth) * 2 - 1;
                mouse.y = -(e.clientY / window.innerHeight) * 2 + 1;
            });

            animate();
        }

        function createFish() {
            const group = new THREE.Group();
            const body = new THREE.Mesh(
                new THREE.BoxGeometry(1, 0.6, 0.3),
                new THREE.MeshPhongMaterial({ color: Math.random() * 0xffffff })
            );
            group.add(body);
            group.position.set(Math.random()*20-10, Math.random()*10-5, Math.random()*10-5);
            group.userData = { vel: new THREE.Vector3(Math.random()*0.05, Math.random()*0.05, 0), angle: Math.random()*Math.PI*2 };
            scene.add(group);
            fishes.push(group);
        }

        function animate() {
            requestAnimationFrame(animate);
            
            const raycaster = new THREE.Raycaster();
            raycaster.setFromCamera(mouse, camera);

            fishes.forEach(f => {
                // Movement
                f.position.x += f.userData.vel.x;
                f.position.y += f.userData.vel.y;

                if(Math.abs(f.position.x) > 12) f.userData.vel.x *= -1;
                if(Math.abs(f.position.y) > 7) f.userData.vel.y *= -1;

                // Flee behavior
                const dist = f.position.distanceTo(new THREE.Vector3(mouse.x*15, mouse.y*10, 0));
                if(dist < 4) {
                    const flee = f.position.clone().sub(new THREE.Vector3(mouse.x*15, mouse.y*10, 0)).normalize().multiplyScalar(0.2);
                    f.userData.vel.add(flee);
                    f.userData.vel.clampLength(0, 0.3);
                }

                f.rotation.y = Math.atan2(f.userData.vel.x, -f.userData.vel.z);
            });

            renderer.render(scene, camera);
        }

        document.getElementById('overlay').addEventListener('click', function() {
            if(!started) {
                init();
                started = true;
                this.style.display = 'none';
            }
        });

        // Auto-demo mode
        setTimeout(() => {
            if(!started) {
                init();
                started = true;
                document.getElementById('overlay').style.display = 'none';
            }
        }, 2000);
    </script>
</body>
</html>