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: 5.3 s
Cost: $0.0027
Output tokens: 1,758
Spent thinking: 538 tokens
Speed: 436.9 tok/s
Console errors: 0

First token after: 1.3 s
First visible text after: 2.5 s
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":"medium"}
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 · 107 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 Interactive Aquarium</title>
    <style>
        body { margin: 0; overflow: hidden; background: #001a33; font-family: sans-serif; }
        #instructions {
            position: absolute;
            top: 20px;
            width: 100%;
            text-align: center;
            color: white;
            pointer-events: none;
            text-shadow: 0 0 5px black;
            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="instructions">Move your mouse to scatter the fish!</div>
    <script type="module">
        import * as THREE from 'three';

        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(0x002244);
        document.body.appendChild(renderer.domElement);

        const light = new THREE.PointLight(0xffffff, 100);
        light.position.set(5, 5, 5);
        scene.add(light);
        scene.add(new THREE.AmbientLight(0x404040, 5));

        camera.position.z = 10;

        // Mouse tracking
        const mouse = new THREE.Vector3(0, 0, 0);
        window.addEventListener('mousemove', (e) => {
            mouse.x = (e.clientX / window.innerWidth) * 2 - 1;
            mouse.y = -(e.clientY / window.innerHeight) * 2 + 1;
            const vector = new THREE.Vector3(mouse.x, mouse.y, 0.5);
            vector.unproject(camera);
            const dir = vector.sub(camera.position).normalize();
            const distance = -camera.position.z / dir.z;
            mouse.copy(camera.position).add(dir.multiplyScalar(distance));
        });

        class Fish {
            constructor() {
                this.mesh = new THREE.Group();
                const body = new THREE.Mesh(
                    new THREE.ConeGeometry(0.2, 0.5, 8),
                    new THREE.MeshStandardMaterial({ color: Math.random() * 0xffffff })
                );
                body.rotation.x = Math.PI / 2;
                this.mesh.add(body);
                
                this.velocity = new THREE.Vector3((Math.random()-0.5)*0.1, (Math.random()-0.5)*0.1, 0);
                this.mesh.position.set((Math.random()-0.5)*15, (Math.random()-0.5)*10, 0);
                scene.add(this.mesh);
            }

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

                // Wander
                this.velocity.add(new THREE.Vector3((Math.random()-0.5)*0.01, (Math.random()-0.5)*0.01, 0));
                this.velocity.clampLength(0, 0.2);
                this.mesh.position.add(this.velocity);
                this.mesh.lookAt(this.mesh.position.clone().add(this.velocity));

                // Bounds
                if (Math.abs(this.mesh.position.x) > 10) this.velocity.x *= -1;
                if (Math.abs(this.mesh.position.y) > 7) this.velocity.y *= -1;
            }
        }

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

        function animate() {
            requestAnimationFrame(animate);
            fishList.forEach(f => f.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>

Reasoning trace (538 tokens)

**Designing Ocean Depths**

I'm currently envisioning the core scene setup. The plan is for a minimalist blue backdrop to establish the underwater environment. This forms the foundational canvas for the interactive elements I'll introduce next.

**Visualizing Aquarium Elements**

I'm now focusing on the aquarium's construction. I'm picturing a tinted box acting as the container. Within it, simple geometric shapes will represent fish, moving randomly. My current thinking involves their dynamic response to cursor proximity, accelerating away when approached, while maintaining autonomous movement when unobserved.