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

First token after: 939 ms
First visible text after: 939 ms
Prompt tokens: 448
Code size: 5.2 KB
Finish reason: stop
Served by: Google
Model id: google/gemini-3.1-flash-lite
Reasoning sent: {"effort":"low"}
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 · 137 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, html { margin: 0; padding: 0; overflow: hidden; background-color: #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: 1.5rem; pointer-events: none;
            background: rgba(0,0,0,0.3); 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 move mouse to interact with the fish</div>
    <script type="module">
        import * as THREE from 'three';

        // --- Setup Scene ---
        const scene = new THREE.Scene();
        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        const renderer = new THREE.WebGLRenderer({ antialias: true });
        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.setClearColor(0x001a33);
        document.body.appendChild(renderer.domElement);

        camera.position.z = 10;

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

        // Create Fish Class
        class Fish {
            constructor() {
                this.mesh = new THREE.Group();
                
                // Body
                const bodyGeom = new THREE.SphereGeometry(0.3, 16, 16);
                const bodyMat = new THREE.MeshPhongMaterial({ color: Math.random() * 0xffffff });
                const body = new THREE.Mesh(bodyGeom, bodyMat);
                body.scale.set(1.5, 1, 0.5);
                this.mesh.add(body);

                // Tail
                const tailGeom = new THREE.ConeGeometry(0.2, 0.4, 4);
                const tail = new THREE.Mesh(tailGeom, bodyMat);
                tail.position.x = -0.5;
                tail.rotation.z = Math.PI / 2;
                this.mesh.add(tail);

                this.mesh.position.set(
                    (Math.random() - 0.5) * 15,
                    (Math.random() - 0.5) * 8,
                    (Math.random() - 0.5) * 5
                );
                
                this.velocity = new THREE.Vector3(Math.random() - 0.5, Math.random() - 0.5, 0).normalize().multiplyScalar(0.05);
                this.targetPos = new THREE.Vector3().copy(this.mesh.position);
                scene.add(this.mesh);
            }

            update(mouse) {
                // Flee logic
                const dist = this.mesh.position.distanceTo(mouse);
                if (dist < 3) {
                    const fleeDir = this.mesh.position.clone().sub(mouse).normalize().multiplyScalar(0.15);
                    this.velocity.add(fleeDir);
                }

                // Normal swim logic
                this.velocity.add(new THREE.Vector3(Math.random() - 0.5, Math.random() - 0.5, 0).multiplyScalar(0.005));
                this.velocity.clampLength(0.02, 0.1);
                
                // Boundary check
                if (Math.abs(this.mesh.position.x) > 10) this.velocity.x *= -1;
                if (Math.abs(this.mesh.position.y) > 6) this.velocity.y *= -1;

                this.mesh.position.add(this.velocity);
                this.mesh.lookAt(this.mesh.position.clone().add(this.velocity));
            }
        }

        const fishArray = Array.from({ length: 15 }, () => new Fish());

        // Interaction
        const mouse = new THREE.Vector3(0, 0, 0);
        const raycaster = new THREE.Raycaster();
        let autoPlay = true;

        window.addEventListener('mousemove', (e) => {
            autoPlay = false;
            document.getElementById('overlay').style.display = 'none';
            const vec = new THREE.Vector3((e.clientX / window.innerWidth) * 2 - 1, -(e.clientY / window.innerHeight) * 2 + 1, 0.5);
            vec.unproject(camera);
            vec.sub(camera.position).normalize();
            const distance = -camera.position.z / vec.z;
            mouse.copy(camera.position).add(vec.multiplyScalar(distance));
        });

        // Animation Loop
        let time = 0;
        function animate() {
            requestAnimationFrame(animate);
            
            if (autoPlay) {
                time += 0.02;
                mouse.x = Math.sin(time) * 5;
                mouse.y = Math.cos(time * 0.7) * 3;
            }

            fishArray.forEach(f => f.update(mouse));
            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>