North Mini Code (free)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Interactive 3D Aquarium</title>
    <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>
    <style>
        body, html { margin:0; padding:0; width:100%; height:100%; overflow:hidden; background:#000; font-family:sans-serif; }
        canvas { display:block; }
        #overlay { position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.3); color:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; pointer-events:none; z-index:5; transition:opacity 0.5s; }
        #overlay p { font-size:1.5em; margin:0.5em; text-align:center; max-width:80%; }
        #overlay button { padding:0.8em 1.5em; font-size:1.2em; background:#fff; color:#000; border:none; border-radius:8px; cursor:pointer; }
        #overlay button:hover { background:#ddd; }
        /* Small screens */
        @media (max-width: 600px) {
            #overlay p { font-size:1.2em; }
            #overlay button { font-size:1em; padding:0.6em 1.2em; }
        }
    </style>
</head>
<body>
<div id="overlay">
    <p>Move the mouse near the fish to see them swim away!</p>
    <button id="startBtn">Click or press any key to start</button>
</div>

<script type="module">
    import { Scene } from 'three';
    import { Box, CanvasTexture, Color, DirectionalLight, Fog, HemisphereLight, MathUtils, PerspectiveCamera, Raycaster, Scene, Vector2, Vector3, WebGLRenderer } from 'three';
    import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
    import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';

    const raycaster = new Raycaster();
    const mouse = new Vector2();
    let camera, scene, renderer, controls;
    const fishList = [];
    let animationId;
    let started = false;

    function init() {
        // Hide overlay after start
        const overlay = document.getElementById('overlay');
        overlay.style.opacity = '0';
        document.getElementById('startBtn').remove();

        camera = new PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        scene = new Scene();
        scene.fog = new Fog('#0a0a0a', 50, 200);

        const heLight = new HemisphereLight(0xffffff, 0x444444, 2);
        heLight.position.set(0, 20, 0);
        scene.add(heLight);

        const dirLight = new DirectionalLight(0xffffff, 3);
        dirLight.position.set(10, 10, 5);
        scene.add(dirLight);

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

        controls = new OrbitControls(camera, renderer.domElement);
        controls.enableZoom = false;
        controls.enablePan = false;
        // Auto rotate when not interacting
        controls.autoRotate = true;
        controls.autoRotateSpeed = 0.5;

        // Lighting for aquarium
        const ambient = new Color(0x4d4d4d);
        scene.background = new Color(0x001122);
        const water = new Color(0x000811);
        // Floor
        const floorGeo = new Box(100, 0.5, 100);
        const floorMat = new MeshStandardMaterial({ color: 0x112233, roughness: 0.9 });
        const floor = new Mesh(floorGeo, floorMat);
        floor.position.y = -5;
        scene.add(floor);

        // Load fish models
        const loader = new GLTFLoader();
        const fishPositions = [
            new Vector3(10, 2, 10),
            new Vector3(-5, 3, 8),
            new Vector3(0, 1, -5),
            new Vector3(15, 4, -2),
            new Vector3(-8, 2, -12)
        ];

        fishPositions.forEach((pos, i) => {
            loader.load('https://cdn.jsdelivr.net/npm/three@0.170.0/examples/models/gltf/Fish.glb', (gltf) => {
                const fish = gltf.scene;
                fish.scale.setScalar(0.5);
                fish.position.copy(pos);
                // Random swimming direction
                fish.userData.swimDir = new Vector3(Math.random() - 0.5, 0, Math.random() - 0.5).normalize();
                fish.userData.swimSpeed = 0.02 + Math.random() * 0.03;
                scene.add(fish);
                fishList.push(fish);
            });
        });

        camera.position.set(0, 10, 30);
        camera.lookAt(0, 0, 0);

        animate();

        // Event listeners
        window.addEventListener('resize', onWindowResize);
        document.addEventListener('mousemove', onMouseMove);
        document.addEventListener('click', startDemo);
        document.addEventListener('keydown', startDemo);
    }

    function startDemo() {
        if (!started) {
            started = true;
            const overlay = document.getElementById('overlay');
            overlay.style.pointerEvents = 'none';
            overlay.style.opacity = '0';
            // Wait a frame for fade
            setTimeout(() => overlay.style.display = 'none', 500);
        }
    }

    function onMouseMove(event) {
        if (!started) return;
        mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
        mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
    }

    function onWindowResize() {
        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();
        renderer.setSize(window.innerWidth, window.innerHeight);
    }

    function animate() {
        animationId = requestAnimationFrame(animate);

        // Update raycaster
        raycaster.setFromCamera(mouse, camera);

        // Move fish
        fishList.forEach(fish => {
            // Swim forward
            const move = fish.userData.swimDir.clone().multiplyScalar(fish.userData.swimSpeed);
            fish.position.add(move);
            fish.rotation.y = Math.atan2(fish.userData.swimDir.x, fish.userData.swimDir.z);

            // Check for wall collisions and bounce
            const radius = 1;
            if (fish.position.x > 25 - radius || fish.position.x < -25 + radius) {
                fish.userData.swimDir.x *= -0.8;
                fish.userData.swimDir.normalize();
            }
            if (fish.position.z > 25 - radius || fish.position.z < -25 + radius) {
                fish.userData.swimDir.z *= -0.8;
                fish.userData.swimDir.normalize();
            }

            // Ray check for mouse proximity
            const v = new Vector3().copy(fish.position).project(camera);
            v.x = (v.x * 0.5 + 0.5) * window.innerWidth;
            v.y = (1 - (v.y * 0.5 + 0.5)) * window.innerHeight;

            const intersect = raycaster.intersectObject(fish);
            if (intersect.length > 0 && intersect[0].distance < 5) {
                // Swim away from mouse
                const awayDir = new Vector3().subVectors(fish.position, new Vector3(mouse.x, mouse.y, 0.5)).normalize();
                fish.userData.swimDir.copy(awayDir);
                fish.userData.swimSpeed *= 1.5; // speed up
                // Reset speed after 2 seconds
                setTimeout(() => fish.userData.swimSpeed = 0.02 + Math.random() * 0.03, 2000);
            }
        });

        controls.update();
        renderer.render(scene, camera);
    }

    // Start on any key/click
    function startDemoOnInteract() {
        startDemo();
    }

    init();
</script>
</body>
</html>