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.2 s
Cost: $0.0018
Output tokens: 1,140
Spent thinking: 0 tokens
Speed: 385.2 tok/s
Console errors: 0

First token after: 266 ms
First visible text after: 266 ms
Prompt tokens: 448
Code size: 3.6 KB
Finish reason: stop
Served by: Google
Model id: google/gemini-3.1-flash-lite
Reasoning sent: {"effort":"minimal"}
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 · 86 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; }
        #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>
    <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="ui"><h1>3D Aquarium</h1><p>Move your mouse to scare the fish!</p></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);
        document.body.appendChild(renderer.domElement);

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

        camera.position.z = 10;
        const mouse = new THREE.Vector2(100, 100);
        const raycaster = new THREE.Raycaster();

        const fishList = [];
        for (let i = 0; i < 15; i++) {
            const group = new THREE.Group();
            const body = new THREE.Mesh(
                new THREE.BoxGeometry(0.8, 0.4, 0.2),
                new THREE.MeshStandardMaterial({ color: Math.random() * 0xffffff })
            );
            group.add(body);
            group.position.set(Math.random()*10-5, Math.random()*10-5, Math.random()*5-2);
            group.userData = { vel: new THREE.Vector3(Math.random()-0.5, Math.random()-0.5, 0), angle: 0 };
            scene.add(group);
            fishList.push(group);
        }

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

        function animate() {
            requestAnimationFrame(animate);
            const time = Date.now() * 0.002;

            fishList.forEach(f => {
                raycaster.setFromCamera(mouse, camera);
                const pos = new THREE.Vector3().copy(f.position).project(camera);
                const dist = f.position.distanceTo(new THREE.Vector3(mouse.x * 15, mouse.y * 10, 0));

                if (dist < 3) {
                    const flee = new THREE.Vector3().subVectors(f.position, new THREE.Vector3(mouse.x * 15, mouse.y * 10, 0)).normalize();
                    f.userData.vel.add(flee.multiplyScalar(0.05));
                }

                f.userData.vel.multiplyScalar(0.95);
                f.position.add(f.userData.vel);

                if (f.position.x > 8 || f.position.x < -8) f.userData.vel.x *= -1;
                if (f.position.y > 5 || f.position.y < -5) f.userData.vel.y *= -1;

                f.rotation.y = Math.atan2(f.userData.vel.x, 0.1) + Math.PI/2;
            });

            renderer.render(scene, camera);
        }
        animate();

        window.addEventListener('resize', () => {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth, window.innerHeight);
        });
    </script>
</body>
</html>