Gemini 3.1 Flash Lite

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D Aquarium Demo</title>
    <style>
        body, html { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; background: #001; font-family: sans-serif; }
        canvas { display: block; }
        #overlay {
            position: absolute; top: 0; left: 0; width: 100%; height: 100%;
            display: flex; flex-direction: column; justify-content: center; align-items: center;
            background: rgba(0,0,0,0.5); color: white; cursor: pointer; 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">
        <h1>3D Aquarium</h1>
        <p>Click or press any key to start</p>
    </div>

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

        // --- Setup ---
        const scene = new THREE.Scene();
        scene.fog = new THREE.FogExp2(0x002244, 0.15);
        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(0x001122);
        document.body.appendChild(renderer.domElement);

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

        // --- Aquarium Bounds ---
        const boxGeo = new THREE.BoxGeometry(10, 6, 10);
        const boxMat = new THREE.MeshBasicMaterial({ color: 0x004466, transparent: true, opacity: 0.1, side: THREE.BackSide });
        const tank = new THREE.Mesh(boxGeo, boxMat);
        scene.add(tank);

        camera.position.z = 8;
        camera.position.y = 2;
        camera.lookAt(0, 0, 0);

        // --- Fish Class ---
        class Fish {
            constructor() {
                this.group = new THREE.Group();
                
                // Body
                const bodyGeo = new THREE.ConeGeometry(0.2, 0.6, 8);
                const bodyMat = new THREE.MeshPhongMaterial({ color: 0xffaa00 });
                this.body = new THREE.Mesh(bodyGeo, bodyMat);
                this.body.rotation.x = Math.PI / 2;
                this.group.add(this.body);

                // Tail
                const tailGeo = new THREE.PlaneGeometry(0.3, 0.3);
                const tailMat = new THREE.MeshPhongMaterial({ color: 0xffaa00, side: THREE.DoubleSide });
                this.tail = new THREE.Mesh(tailGeo, tailMat);
                this.tail.position.z = -0.4;
                this.group.add(this.tail);

                this.velocity = new THREE.Vector3(Math.random() - 0.5, Math.random() - 0.5, Math.random() - 0.5).normalize().multiplyScalar(0.05);
                this.group.position.set((Math.random() - 0.5) * 8, (Math.random() - 0.5) * 4, (Math.random() - 0.5) * 8);
                this.group.lookAt(this.group.position.clone().add(this.velocity));
                
                scene.add(this.group);
            }

            update(mousePos, scare) {
                // Random wander
                this.velocity.add(new THREE.Vector3(Math.random()-0.5, Math.random()-0.5, Math.random()-0.5).multiplyScalar(0.005));
                
                // Avoid mouse
                if (scare) {
                    const dir = this.group.position.clone().sub(mousePos);
                    const dist = dir.length();
                    if (dist < 2.5) {
                        dir.normalize().multiplyScalar(0.1);
                        this.velocity.add(dir);
                    }
                }

                // Speed limit
                if (this.velocity.length() > 0.1) this.velocity.normalize().multiplyScalar(0.1);

                this.group.position.add(this.velocity);
                
                // Boundaries
                if (Math.abs(this.group.position.x) > 4.5) this.velocity.x *= -1;
                if (Math.abs(this.group.position.y) > 2.5) this.velocity.y *= -1;
                if (Math.abs(this.group.position.z) > 4.5) this.velocity.z *= -1;

                this.group.lookAt(this.group.position.clone().add(this.velocity));

                // Wiggle
                this.tail.rotation.y = Math.sin(Date.now() * 0.02) * 0.5;
            }
        }

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

        // --- Interaction ---
        let mouse = new THREE.Vector3(0, 0, 0);
        let raycaster = new THREE.Raycaster();
        let mouseNDC = new THREE.Vector2(0, 0);
        let started = false;

        function updateMouse(x, y) {
            mouseNDC.x = (x / window.innerWidth) * 2 - 1;
            mouseNDC.y = -(y / window.innerHeight) * 2 + 1;
            raycaster.setFromCamera(mouseNDC, camera);
            // Project onto Z=0 plane
            const planeZ = new THREE.Plane(new THREE.Vector3(0, 0, 1), 0);
            raycaster.ray.intersectPlane(planeZ, mouse);
        }

        window.addEventListener('mousemove', (e) => updateMouse(e.clientX, e.clientY));
        window.addEventListener('keydown', () => { if (!started) start(); });
        window.addEventListener('mousedown', () => { if (!started) start(); });

        function start() {
            started = true;
            document.getElementById('overlay').style.display = 'none';
        }

        // --- Animation Loop ---
        let time = 0;
        function animate() {
            requestAnimationFrame(animate);

            time += 0.01;
            if (!started) {
                // Auto move mouse for demo
                const mX = Math.sin(time) * 4;
                const mY = Math.cos(time * 0.7) * 2;
                mouse.set(mX, mY, 0);
            }

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