GPT-5 Nano

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Three.js Aquarium — Fish Swim Away from Mouse</title>
  <style>
    :root {
      --bg: #041021;
      --overlay: rgba(0,0,0,0.55);
      --text: #eaffff;
    }
    html, body {
      margin: 0;
      height: 100%;
      background: #0a1220;
      font-family: system-ui, -apple-system, "Segoe UI", Roboto;
      color: var(--text);
      overflow: hidden; /* no scrollbars on any viewport size */
    }
    /* Canvas fills the screen and scales gracefully */
    #scene {
      width: 100%;
      height: 100%;
      display: block;
      position: relative;
    }
    canvas {
      display: block;
      width: 100%;
      height: 100%;
    }

    /* Start overlay: clickable, covers the canvas until user starts */
    #overlay {
      position: absolute;
      left: 0; top: 0;
      width: 100%; height: 100%;
      display: flex; align-items: center; justify-content: center;
      text-align: center;
      background: var(--overlay);
      color: white;
      padding: 20px;
      box-sizing: border-box;
      cursor: pointer;
      user-select: none;
      z-index: 2;
    }
    #overlay .card {
      max-width: 700px;
      padding: 28px 34px;
      border-radius: 14px;
      background: rgba(0,0,0,0.25);
      backdrop-filter: blur(2px);
      border: 1px solid rgba(255,255,255,0.15);
    }
    #overlay h1 {
      margin: 0 0 8px 0;
      font-size: clamp(20px, 4vw, 32px);
      letter-spacing: 0.5px;
    }
    #overlay p {
      margin: 0;
      font-size: clamp(14px, 2.5vw, 18px);
      opacity: 0.95;
    }

    /* Small screens: scale text down a bit and keep it readable */
    @media (max-width: 600px) {
      #overlay .card { padding: 20px; }
      #overlay h1 { font-size: 20px; }
    }
  </style>

  <!-- Import map to load Three.js modules from the CDN as requested -->
  <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="scene">
    <canvas id="c"></canvas>

    <div id="overlay" aria-label="Start demo" title="Click or press any key to start">
      <div class="card">
        <h1>3D Aquarium</h1>
        <p>Move your mouse near the fish— they will swim away from you. Click or press any key to start the demo.</p>
      </div>
    </div>
  </div>

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

    // Scene setup
    const canvas = document.getElementById('c');
    const overlay = document.getElementById('overlay');
    const scene = new THREE.Scene();
    scene.fog = new THREE.FogExp2(0x0a1b2c, 0.08);

    // Camera
    const camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 1000);
    camera.position.set(0, 8, 22);
    camera.lookAt(0, 0, 0);

    // Renderer
    const renderer = new THREE.WebGLRenderer({ canvas, antialias: true, alpha: true });
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
    renderer.setClearColor(0x04152a, 1); // dark blue backdrop

    // Lighting
    const ambient = new THREE.AmbientLight(0xffffff, 0.6);
    scene.add(ambient);
    const sun = new THREE.DirectionalLight(0xffffff, 0.8);
    sun.position.set(-10, 15, 6);
    scene.add(sun);

    // Aquarium (tank) and water
    // A glass-ish tank box. Inside, fish swim.
    const tankGeom = new THREE.BoxGeometry(22, 10, 14);
    const tankMat = new THREE.MeshStandardMaterial({
      color: 0x6ec2ff,
      transparent: true,
      opacity: 0.25,
      side: THREE.BackSide,
      roughness: 0.25,
      metalness: 0.0
    });
    const tank = new THREE.Mesh(tankGeom, tankMat);
    tank.position.set(0, 0, 0);
    scene.add(tank);

    // A subtle water plane to imply depth
    const waterGeom = new THREE.PlaneGeometry(20, 12);
    const waterMat = new THREE.MeshStandardMaterial({
      color: 0x3cbcff, transparent: true, opacity: 0.15, side: THREE.DoubleSide
    });
    const waterPlane = new THREE.Mesh(waterGeom, waterMat);
    waterPlane.rotation.x = -Math.PI / 2;
    waterPlane.position.y = -1.0; // slightly below center
    scene.add(waterPlane);

    // Fish model factory
    const fishPalette = [0xffcc66, 0x6be7ff, 0xff6b6b, 0x9a7bff, 0x5cff9a, 0xffa3b1];
    function createFish(color) {
      const group = new THREE.Group();

      // Body (elongated box to hint fish shape)
      const bodyGeom = new THREE.BoxGeometry(0.95, 0.36, 0.22);
      const bodyMat = new THREE.MeshStandardMaterial({ color, roughness: 0.6, metalness: 0.0 });
      const body = new THREE.Mesh(bodyGeom, bodyMat);
      body.castShadow = true;
      body.receiveShadow = true;
      group.add(body);

      // Tail (cone) behind the body
      const tailGeom = new THREE.ConeGeometry(0.25, 0.28, 8);
      const tailMat = new THREE.MeshStandardMaterial({ color, roughness: 0.6, metalness: 0.0 });
      const tail = new THREE.Mesh(tailGeom, tailMat);
      tail.rotation.z = Math.PI; // flip so the point faces forward along +X
      tail.position.set(-0.58, 0.0, 0.0);
      tail.castShadow = true;
      tail.receiveShadow = true;
      group.add(tail);

      // Small dorsal fin
      const finGeom = new THREE.BoxGeometry(0.16, 0.18, 0.03);
      const finMat = new THREE.MeshStandardMaterial({ color, roughness: 0.6, metalness: 0.0 });
      const fin = new THREE.Mesh(finGeom, finMat);
      fin.position.set(0.28, 0.14, -0.12);
      fin.rotation.y = 0.5;
      group.add(fin);

      // Tail fin
      const tfinGeom = new THREE.BoxGeometry(0.23, 0.12, 0.04);
      const tfin = new THREE.Mesh(tfinGeom, finMat);
      tfin.position.set(-0.82, 0.0, 0.0);
      tfin.rotation.y = Math.PI;
      group.add(tfin);

      // Initial random position and velocity
      const posX = (Math.random() - 0.5) * 18;
      const posY = 1.5 + Math.random() * 5;
      const posZ = (Math.random() - 0.5) * 14;
      group.position.set(posX, posY, posZ);

      const velocity = new THREE.Vector3((Math.random() - 0.5) * 0.5, (Math.random() - 0.5) * 0.1, (Math.random() - 0.5) * 0.5);

      return { group, velocity, color };
    }

    // Create several fishes
    const fishes = [];
    const fishCount = 22;
    for (let i = 0; i < fishCount; i++) {
      const color = fishPalette[i % fishPalette.length];
      const f = createFish(color);
      fishes.push(f);
      scene.add(f.group);
      // Slight random orientation so they don't all face the same way at once
      f.group.rotation.y = Math.random() * Math.PI * 2;
    }

    // Interaction state
    let started = false;
    let lastTime = performance.now();
    // Mouse normalized device coordinates (-1..1). We only care after start.
    const mouse = new THREE.Vector2(0, 0);
    const raycaster = new THREE.Raycaster();
    const planeForRay = new THREE.Plane(new THREE.Vector3(0, 1, 0), 0); // reused; we'll change .constant per fish

    // Helper to start the demo
    function startDemo() {
      if (started) return;
      started = true;
      overlay.style.display = 'none';
      // Start the render loop
      lastTime = performance.now();
      requestAnimationFrame(loop);
    }

    // Overlay interaction: click or press to start
    overlay.addEventListener('pointerdown', startDemo, { passive: true });
    window.addEventListener('keydown', (e) => {
      // Start on any key if not started yet
      if (!started) startDemo();
    });

    // Track mouse but only influence after start
    window.addEventListener('mousemove', (e) => {
      if (!started) return;
      const rect = canvas.getBoundingClientRect();
      // Normalize to -1..1
      mouse.x = ((e.clientX - rect.left) / rect.width) * 2 - 1;
      mouse.y = -((e.clientY - rect.top) / rect.height) * 2 + 1;
    }, { passive: true });

    // Resize handling
    window.addEventListener('resize', () => {
      const w = window.innerWidth;
      const h = window.innerHeight;
      camera.aspect = w / h;
      camera.updateProjectionMatrix();
      renderer.setSize(w, h);
    }, { passive: true });

    // Animation loop
    function loop(now) {
      const dtMs = now - lastTime;
      const dt = Math.min(0.033, dtMs / 1000); // clamp dt for stability
      lastTime = now;

      // Gentle camera orbit to showcase the aquarium
      const t = now * 0.00012;
      camera.position.x = Math.cos(t) * 22;
      camera.position.z = Math.sin(t) * 22;
      camera.position.y = 9 + Math.sin(now * 0.0006) * 1.5;
      camera.lookAt(0, 0, 0);

      // Mouse influence: cast a ray from camera through mouse, compute plane at each fish's height
      raycaster.setFromCamera(mouse, camera);
      const ray = raycaster.ray;
      // Reusable plane point for distance computation
      // We reuse a single plane object and mutate its constant per fish
      for (let i = 0; i < fishes.length; i++) {
        const f = fishes[i];
        // Plane at the fish's current height
        planeForRay.normal.set(0, 1, 0);
        planeForRay.constant = -f.group.position.y;
        const planePoint = new THREE.Vector3();
        ray.intersectPlane(planeForRay, planePoint);

        const away = new THREE.Vector3().subVectors(f.group.position, planePoint);
        const dist = away.length();

        const repulseRadius = 2.0;
        if (dist > 0 && dist < repulseRadius) {
          const strength = 0.18 * (1 - dist / repulseRadius);
          away.normalize().multiplyScalar(strength * (dt * 60));
          f.velocity.add(away);
        }

        // Integrate velocity and keep inside tank boundaries
        f.velocity.y *= 0.98; // gentle damping
        f.group.position.addScaledVector(f.velocity, dt * 60);

        // Boundary walls (tank extents)
        const ext = { x: 10.5, y: 6.5, z: 7.5 };
        if (f.group.position.x > ext.x) { f.group.position.x = ext.x; f.velocity.x *= -1; }
        if (f.group.position.x < -ext.x) { f.group.position.x = -ext.x; f.velocity.x *= -1; }
        if (f.group.position.y > ext.y) { f.group.position.y = ext.y; f.velocity.y *= -1; }
        if (f.group.position.y < -ext.y) { f.group.position.y = -ext.y; f.velocity.y *= -1; }
        if (f.group.position.z > ext.z) { f.group.position.z = ext.z; f.velocity.z *= -1; }
        if (f.group.position.z < -ext.z) { f.group.position.z = -ext.z; f.velocity.z *= -1; }

        // Orientation: face movement direction in the XZ plane
        const v = f.velocity;
        const vLen = v.length();
        if (vLen > 0.0001) {
          const dir = new THREE.Vector3(v.x, 0, v.z).normalize();
          const yaw = Math.atan2(dir.z, dir.x);
          f.group.rotation.y = -yaw;
        }
      }

      renderer.render(scene, camera);
      requestAnimationFrame(loop);
    }

    // Start in a friendly "demo" mode only after user interaction
    // The loop runs after startDemo() is called by a click or key press.
  </script>
</body>
</html>