GPT-5 Nano

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>3D Aquarium with Fish That Flee the Mouse</title>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <!-- Import map for Three.js 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>
  <style>
    :root {
      --bg: #0b1e2b;
      --panel: rgba(255,255,255,.15);
    }
    html, body {
      height: 100%;
      margin: 0;
      background: radial-gradient(circle at 20% 0%, #102a45 0%, #0b1e2b 60%, #0b1e2b 100%);
      font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial;
      overflow: hidden;
      color: #e6f0ff;
    }
    #stage {
      position: relative;
      width: 100%;
      height: 100%;
    }
    #canvasWrap {
      position: absolute;
      inset: 0;
    }
    canvas {
      display: block;
      width: 100%;
      height: 100%;
    }
    /* Overlay that tells user how to start (semi-transparent so you can see the scene behind) */
    #overlay {
      position: absolute;
      left: 0; right: 0; top: 0; bottom: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 20px;
      background: rgba(2, 10, 25, 0.25);
      color: #e8f2ff;
      font-size: clamp(16px, 2.2vw, 28px);
      pointer-events: auto;
      z-index: 2;
      user-select: none;
    }
    #overlay .card {
      background: linear-gradient(135deg, rgba(15,30,60,.9), rgba(15,60,90,.9));
      border: 1px solid rgba(120, 180, 255, 0.25);
      border-radius: 14px;
      padding: 28px 34px;
      box-shadow: 0 20px 50px rgba(0,0,0,.25);
      max-width: 90vw;
    }
    #overlay h1 {
      margin: 0 0 8px 0;
      font-size: 1.6em;
      letter-spacing: .5px;
    }
    #overlay p {
      margin: 0;
      opacity: .95;
    }
    /* Responsive tweak: on very small screens keep overlay readable */
    @media (max-width: 600px) {
      #overlay .card { padding: 22px; }
      #overlay h1 { font-size: 1.4em; }
    }
  </style>
</head>
<body>
  <div id="stage">
    <div id="canvasWrap"></div>
    <div id="overlay" aria-label="Start overlay" role="button" tabindex="0">
      <div class="card">
        <h1>Click or press a key to start</h1>
        <p>The fish swim in a blue 3D aquarium. Move your mouse near them to scare them away.</p>
        <p>(This demo starts in auto-play; your first interaction will kick off keyboard events.)</p>
      </div>
    </div>
  </div>

  <script type="module">
    // Import Three.js from the import map
    import * as THREE from 'three';
    // No extra controls; a lightweight, self-contained demo

    // Scene setup
    let scene, camera, renderer;
    let fishList = [];
    let raycaster = new THREE.Raycaster();
    let mouseClient = { x: 0, y: 0 };
    let mouseWorld = new THREE.Vector3(0, 0, 0);
    let started = false;
    let haveFocus = false;

    // Aquarium dimensions
    const tankW = 60;
    const tankH = 40;
    const tankD = 60;

    // Helpers
    function clamp(v, a, b) { return Math.max(a, Math.min(b, v)); }

    // Init function
    function init() {
      const container = document.getElementById('canvasWrap');
      // Renderer
      renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
      renderer.setSize(window.innerWidth, window.innerHeight);
      renderer.setPixelRatio(window.devicePixelRatio);
      renderer.setClearColor(0x0b1e2b, 1);
      container.appendChild(renderer.domElement);

      // Scene
      scene = new THREE.Scene();

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

      // Lighting
      const ambient = new THREE.AmbientLight(0xffffff, 0.65);
      scene.add(ambient);
      const dir = new THREE.DirectionalLight(0xffffff, 0.9);
      dir.position.set(5, 15, 20);
      scene.add(dir);

      // Subtle background fog for depth
      scene.fog = new THREE.FogExp2(0x0b2d5a, 0.012);

      // Tank outline (wireframe) to show boundaries
      const tankGeo = new THREE.BoxGeometry(tankW, tankH, tankD);
      const tankEdges = new THREE.EdgesGeometry(tankGeo);
      const tankMat = new THREE.LineBasicMaterial({ color: 0x66ccff, transparent: true, opacity: 0.8 });
      const tankBox = new THREE.LineSegments(tankEdges, tankMat);
      // Slightly offset so the box is visible in front of the camera
      tankBox.position.set(0, 0, 0);
      scene.add(tankBox);

      // Water-like subtle shader (simple plane with blue tint) - optional glow
      // We'll skip a full water surface to keep it lightweight.

      // Create fish population
      const count = 26;
      for (let i = 0; i < count; i++) {
        const f = createFish();
        // Randomize initial position inside tank bounds
        f.pos.set(
          (Math.random() - 0.5) * (tankW - 4),
          (Math.random() - 0.5) * (tankH - 4),
          (Math.random() - 0.5) * (tankD - 4)
        );
        f.mesh.position.copy(f.pos);
        // Random initial velocity
        f.vel.set(
          (Math.random() - 0.5),
          (Math.random() - 0.5),
          (Math.random() - 0.5)
        ).normalize().multiplyScalar(0.4);
        // Orient to face forward initially
        setFishYaw(f, f.vel);
        fishList.push(f);
        scene.add(f.mesh);
      }

      // Interactions
      window.addEventListener('resize', onResize, { passive: true });
      window.addEventListener('mousemove', onMouseMove, { passive: true });

      // Start on overlay interaction
      const overlay = document.getElementById('overlay');
      overlay.addEventListener('mousedown', startInteraction, { once: true });
      overlay.addEventListener('touchstart', startInteraction, { once: true });

      // Keyboard events will be enabled after first click
    }

    // Create a single fish (grouped mesh for body + tail)
    function createFish() {
      const g = new THREE.Group();

      // Materials
      const bodyMat = new THREE.MeshStandardMaterial({ color: 0xffa500, flatShading: true });
      const eyeMat = new THREE.MeshStandardMaterial({ color: 0x111111 });

      // Body (elongated along X axis; we orient the mesh so forward is +X later)
      const bodyGeo = new THREE.BoxGeometry(2.2, 1.0, 0.9);
      const body = new THREE.Mesh(bodyGeo, bodyMat);
      // Rotate 90 degrees so forward is along +X
      body.rotation.y = Math.PI / 2;
      g.add(body);

      // Tail at the -X end (left side from its local forward)
      const tailGeo = new THREE.ConeGeometry(0.6, 1.2, 8);
      const tail = new THREE.Mesh(tailGeo, bodyMat);
      tail.rotation.z = 0;
      tail.rotation.y = Math.PI;
      tail.position.x = -1.25;
      tail.position.y = 0;
      tail.position.z = 0;
      // Tail attaches to the body
      g.add(tail);

      // Eye at the +X end (head)
      const eye = new THREE.Mesh(new THREE.SphereGeometry(0.15, 8, 8), eyeMat);
      eye.position.x = 1.15;
      eye.position.y = 0.25;
      eye.position.z = 0.25;
      g.add(eye);

      // Velocity and state
      const f = {
        mesh: g,
        pos: new THREE.Vector3(),
        vel: new THREE.Vector3(),
        maxSpeed: 0.9
      };

      // Small random orientation of the whole group is handled by velocity heading
      // Return the fish object
      return f;
    }

    // Update yaw/orientation to face velocity direction (assuming forward along +X)
    function setFishYaw(f, vel) {
      const dir = vel.clone().normalize();
      // If velocity is tiny, skip
      if (dir.lengthSq() < 1e-6) return;
      // We want the fish nose (+X) to align with velocity.
      // Compute yaw so that +X aligns with velocity: yaw = atan2(dir.z, dir.x) - but since forward is +X, we adjust:
      // yaw about Y to align +X with velocity projection onto XZ plane
      const yaw = Math.atan2(dir.z, dir.x);
      f.mesh.rotation.y = yaw;
    }

    // Mouse move handler: update 2D coords
    function onMouseMove(e) {
      const rect = renderer.domElement.getBoundingClientRect();
      mouseClient.x = e.clientX - rect.left;
      mouseClient.y = e.clientY - rect.top;
    }

    // Start interaction (click or touch)
    function startInteraction() {
      if (started) return;
      started = true;
      haveFocus = true;
      const overlay = document.getElementById('overlay');
      overlay.style.display = 'none';
      // Enable keyboard input after user interaction, to satisfy iframe focus rule
      window.addEventListener('keydown', onKeyDown, { once: false });
    }

    function onKeyDown(e) {
      // If user presses any key after starting, just ensure we are in started state
    }

    // Resize handler
    function onResize() {
      const w = window.innerWidth;
      const h = window.innerHeight;
      camera.aspect = w / h;
      camera.updateProjectionMatrix();
      renderer.setSize(w, h);
    }

    // Compute a world point from the mouse by intersecting a plane at z=0 (tank center plane)
    function getMouseWorldPoint() {
      // Mouse in NDC
      const rect = renderer.domElement.getBoundingClientRect();
      const ndcX = ((mouseClient.x) / rect.width) * 2 - 1;
      const ndcY = -((mouseClient.y) / rect.height) * 2 + 1;

      // Ray from camera through mouse
      const mouseNDC = new THREE.Vector2(ndcX, ndcY);
      raycaster.setFromCamera(mouseNDC, camera);

      // Intersect with plane z = 0 (tank center plane)
      const planeZ = 0;
      const dir = raycaster.ray.direction;
      const orig = raycaster.ray.origin;
      // If the ray is parallel to the plane (dir.z ~ 0), fallback to origin
      if (Math.abs(dir.z) < 1e-6) {
        return new THREE.Vector3(orig.x, orig.y, planeZ);
      }
      const t = (planeZ - orig.z) / dir.z;
      const p = raycaster.ray.origin.clone().add(dir.clone().multiplyScalar(t));

      // Clamp into tank bounds
      p.x = clamp(p.x, -tankW/2 + 1, tankW/2 - 1);
      p.y = clamp(p.y, -tankH/2 + 1, tankH/2 - 1);
      p.z = clamp(p.z, -tankD/2 + 1, tankD/2 - 1);
      return p;
    }

    // Animation loop
    let lastTime = performance.now();
    function animate(now) {
      requestAnimationFrame(animate);
      const dt = Math.min(0.033, (now - lastTime) / 1000);
      lastTime = now;

      // If not started yet, still render the scene so overlay looks nice
      // But do not update fish
      if (started) {
        // Update mouse world point every frame
        mouseWorld = getMouseWorldPoint();

        // Update fish
        for (let i = 0; i < fishList.length; i++) {
          const f = fishList[i];
          // Basic wandering
          f.vel.add(new THREE.Vector3(
            (Math.random() - 0.5) * 0.04,
            (Math.random() - 0.5) * 0.04,
            (Math.random() - 0.5) * 0.04
          ));

          // Attraction/repulsion from mouse point
          const toMouse = new THREE.Vector3().subVectors(f.pos, mouseWorld);
          const dist = toMouse.length();
          const influenceRadius = 12;
          if (dist < influenceRadius && dist > 0.0001) {
            toMouse.normalize();
            const strength = (influenceRadius - dist) * 0.07;
            f.vel.add(toMouse.multiplyScalar(strength));
          }

          // Limit speed
          if (f.vel.length() > f.maxSpeed) f.vel.setLength(f.maxSpeed);

          // Integrate
          f.pos.add(f.vel);

          // Boundaries (inside tank)
          const hx = tankW/2 - 1;
          const hy = tankH/2 - 1;
          const hz = tankD/2 - 1;
          if (f.pos.x > hx) { f.pos.x = hx; f.vel.x *= -1; }
          if (f.pos.x < -hx) { f.pos.x = -hx; f.vel.x *= -1; }
          if (f.pos.y > hy) { f.pos.y = hy; f.vel.y *= -1; }
          if (f.pos.y < -hy) { f.pos.y = -hy; f.vel.y *= -1; }
          if (f.pos.z > hz) { f.pos.z = hz; f.vel.z *= -1; }
          if (f.pos.z < -hz) { f.pos.z = -hz; f.vel.z *= -1; }

          // Update orientation to face velocity
          setFishYaw(f, f.vel);

          // Apply position
          f.mesh.position.copy(f.pos);
        }
      }

      // Render
      renderer.render(scene, camera);
    }

    // Kickoff
    init();
    animate(performance.now());
  </script>
</body>
</html>