Mistral Small 4

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>3D Aquarium with Interactive Fish</title>
  <style>
    body {
      margin: 0;
      overflow: hidden;
      background: linear-gradient(to bottom, #1a6fc9, #0d2b45);
      font-family: Arial, sans-serif;
    }
    #container {
      position: absolute;
      width: 100%;
      height: 100%;
    }
    #instructions {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: white;
      text-align: center;
      font-size: 24px;
      text-shadow: 2px 2px 4px rgba(0,0,0,0.7);
      pointer-events: none;
    }
    canvas {
      display: block;
    }
  </style>
</head>
<body>
  <div id="container"></div>
  <div id="instructions">Move your mouse near the fish to scare them away</div>

  <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>
  <script type="module">
    import * as THREE from 'three';
    import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
    import { Water } from 'three/addons/objects/Water.js';

    // Scene setup
    const scene = new THREE.Scene();
    scene.background = new THREE.Color(0x1a6fc9);

    const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    camera.position.set(0, 5, 15);

    const renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.shadowMap.enabled = true;
    document.getElementById('container').appendChild(renderer.domElement);

    // Controls
    const controls = new OrbitControls(camera, renderer.domElement);
    controls.enableDamping = true;
    controls.dampingFactor = 0.05;
    controls.screenSpacePanning = false;
    controls.maxPolarAngle = Math.PI * 0.9;
    controls.minDistance = 5;
    controls.maxDistance = 30;

    // Water
    const waterGeometry = new THREE.PlaneGeometry(100, 100);
    const water = new Water(waterGeometry, {
      textureWidth: 512,
      textureHeight: 512,
      waterNormals: new THREE.TextureLoader().load('https://threejs.org/examples/textures/waternormals.jpg', function(texture) {
        texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
      }),
      sunDirection: new THREE.Vector3(),
      sunColor: 0xffffff,
      waterColor: 0x001e3c,
      distortionScale: 3.7,
      fog: scene.fog !== undefined
    });
    water.rotation.x = -Math.PI / 2;
    water.position.y = -0.5;
    scene.add(water);

    // Lighting
    const ambientLight = new THREE.AmbientLight(0x404040);
    scene.add(ambientLight);

    const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
    directionalLight.position.set(10, 20, 10);
    directionalLight.castShadow = true;
    directionalLight.shadow.mapSize.width = 2048;
    directionalLight.shadow.mapSize.height = 2048;
    scene.add(directionalLight);

    // Fish parameters
    const fishCount = 20;
    const fishGroup = new THREE.Group();
    scene.add(fishGroup);

    // Fish materials
    const fishMaterials = [
      new THREE.MeshStandardMaterial({ color: 0xff6b6b, roughness: 0.3, metalness: 0.1 }),
      new THREE.MeshStandardMaterial({ color: 0x4ecdc4, roughness: 0.3, metalness: 0.1 }),
      new THREE.MeshStandardMaterial({ color: 0xffe66d, roughness: 0.3, metalness: 0.1 }),
      new THREE.MeshStandardMaterial({ color: 0xff8c42, roughness: 0.3, metalness: 0.1 }),
      new THREE.MeshStandardMaterial({ color: 0x6c5ce7, roughness: 0.3, metalness: 0.1 })
    ];

    // Create fish
    const fishMeshes = [];
    const fishTargets = [];
    const fishSpeeds = [];
    const fishScales = [];

    for (let i = 0; i < fishCount; i++) {
      // Fish body
      const fishBody = new THREE.Mesh(
        new THREE.ConeGeometry(0.5, 2, 8, 1, false, Math.PI),
        fishMaterials[i % fishMaterials.length]
      );
      fishBody.position.set(
        (Math.random() - 0.5) * 30,
        Math.random() * 5 - 2,
        (Math.random() - 0.5) * 30
      );
      fishBody.rotation.y = Math.PI;
      fishBody.castShadow = true;
      fishGroup.add(fishBody);

      // Fish tail
      const fishTail = new THREE.Mesh(
        new THREE.PlaneGeometry(1, 0.8),
        new THREE.MeshStandardMaterial({ color: 0xffffff, roughness: 0.7 })
      );
      fishTail.position.set(-1.2, 0, 0);
      fishBody.add(fishTail);

      fishMeshes.push(fishBody);
      fishTargets.push(new THREE.Vector3());
      fishSpeeds.push(Math.random() * 0.02 + 0.01);
      fishScales.push(Math.random() * 0.5 + 0.5);
      fishBody.scale.set(fishScales[i], fishScales[i], fishScales[i]);
    }

    // Mouse interaction
    const mouse = new THREE.Vector2();
    const raycaster = new THREE.Raycaster();
    const mouseMoveTarget = new THREE.Vector3();

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

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

      // Check for intersections with fish
      const intersects = raycaster.intersectObjects(fishMeshes);

      if (intersects.length > 0) {
        const targetFish = intersects[0].object;
        mouseMoveTarget.copy(targetFish.position);
        mouseMoveTarget.add(new THREE.Vector3(
          (Math.random() - 0.5) * 10,
          (Math.random() - 0.5) * 5,
          (Math.random() - 0.5) * 10
        ));
      }
    });

    // Animation
    function animate() {
      requestAnimationFrame(animate);

      // Update fish positions
      for (let i = 0; i < fishMeshes.length; i++) {
        const fish = fishMeshes[i];
        const target = fishTargets[i];
        const speed = fishSpeeds[i];

        // Simple fish movement
        target.x += (Math.random() - 0.5) * 0.02;
        target.y += (Math.random() - 0.5) * 0.01;
        target.z += (Math.random() - 0.5) * 0.02;

        // Keep fish within bounds
        if (target.x < -20) target.x = -20;
        if (target.x > 20) target.x = 20;
        if (target.y < -5) target.y = -5;
        if (target.y > 5) target.y = 5;
        if (target.z < -20) target.z = -20;
        if (target.z > 20) target.z = 20;

        // Move fish toward target
        fish.position.lerp(target, speed);

        // Fish tail movement
        fish.children[0].rotation.y = Math.sin(Date.now() * 0.002 * speed + i) * 0.5;

        // If mouse is near, move fish away
        if (mouseMoveTarget && fish.position.distanceTo(mouseMoveTarget) < 5) {
          const direction = fish.position.clone().sub(mouseMoveTarget).normalize();
          fish.position.add(direction.multiplyScalar(0.1));
        }
      }

      // Update water
      water.material.uniforms['time'].value += 0.01;

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

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

    // Start animation
    animate();
  </script>
</body>
</html>