gpt-oss-120b

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3D Aquarium Demo</title>
<style>
  body,html{margin:0;height:100%;overflow:hidden;background:#001e3c;font-family:sans-serif}
  #overlay{
    position:absolute;top:0;left:0;width:100%;height:100%;
    display:flex;align-items:center;justify-content:center;
    background:rgba(0,0,0,0.6);color:#fff;font-size:1.5rem;
    cursor:pointer;z-index:2;
  }
</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">Click or press any key to start</div>
<script type="module">
import * as THREE from "three";
import { OrbitControls } from "three/addons/controls/OrbitControls.js";

let scene, camera, renderer, controls;
let fishes = [];
const fishCount = 30;
let mouse = new THREE.Vector2(-1000, -1000);
let started = false;

init();
function init() {
  scene = new THREE.Scene();
  scene.fog = new THREE.FogExp2(0x001e3c, 0.02);

  camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 200);
  camera.position.set(0, 5, 20);

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

  controls = new OrbitControls(camera, renderer.domElement);
  controls.enableDamping = true;

  // Light
  const ambient = new THREE.AmbientLight(0x404080, 2);
  scene.add(ambient);
  const dirLight = new THREE.DirectionalLight(0xffffff, 1);
  dirLight.position.set(5,10,7);
  scene.add(dirLight);

  // Aquarium walls (simple box)
  const geo = new THREE.BoxGeometry(40, 20, 30);
  const mat = new THREE.MeshPhysicalMaterial({
    side: THREE.BackSide,
    color: 0x003366,
    transmission: 0.9,
    thickness: 1,
    clearcoat: 1,
    clearcoatRoughness: 0.2,
    reflectivity: 0.9
  });
  const tank = new THREE.Mesh(geo, mat);
  scene.add(tank);

  // Fish prototype
  const fishGeo = new THREE.ConeGeometry(0.3, 1, 8);
  const fishMat = new THREE.MeshStandardMaterial({ color: 0xff6600, flatShading:true });

  for (let i = 0; i < fishCount; i++) {
    const fish = new THREE.Mesh(fishGeo, fishMat);
    fish.position.set(
      (Math.random() - 0.5) * 30,
      (Math.random() - 0.5) * 12 + 2,
      (Math.random() - 0.5) * 20
    );
    fish.rotation.y = Math.random() * Math.PI * 2;
    fish.userData = {
      velocity: new THREE.Vector3(
        (Math.random() - 0.5) * 0.05,
        (Math.random() - 0.5) * 0.02,
        (Math.random() - 0.5) * 0.05
      )
    };
    scene.add(fish);
    fishes.push(fish);
  }

  window.addEventListener('resize', onWindowResize);
  renderer.domElement.addEventListener('mousemove', onMouseMove);
  document.getElementById('overlay').addEventListener('click', start);
  document.addEventListener('keydown', start);
}

function start(){
  if(started) return;
  started = true;
  document.getElementById('overlay').remove();
  animate();
}

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

function onMouseMove(event){
  const rect = renderer.domElement.getBoundingClientRect();
  mouse.x = ((event.clientX - rect.left) / rect.width) * 2 - 1;
  mouse.y = -((event.clientY - rect.top) / rect.height) * 2 + 1;
  // Convert to world coordinates near camera plane
  const vec = new THREE.Vector3(mouse.x, mouse.y, 0.5).unproject(camera);
  mouseWorld = vec;
}

function animate(){
  requestAnimationFrame(animate);
  controls.update();

  fishes.forEach(fish=>{
    // simple wandering
    fish.position.add(fish.userData.velocity);
    // keep inside tank
    const limit = {x:19, y:9, z:14};
    ['x','y','z'].forEach(ax=>{
      if(Math.abs(fish.position[ax])>limit[ax]){
        fish.position[ax] = THREE.MathUtils.clamp(fish.position[ax], -limit[ax], limit[ax]);
        fish.userData.velocity[ax] = -fish.userData.velocity[ax];
      }
    });
    // mouse avoidance
    if(mouseWorld){
      const dist = fish.position.distanceTo(mouseWorld);
      if(dist < 3){
        const away = new THREE.Vector3().subVectors(fish.position, mouseWorld).normalize().multiplyScalar(0.02);
        fish.userData.velocity.add(away);
      }
    }
    // limit speed
    fish.userData.velocity.clampLength(0.01, 0.07);
    // orient to velocity
    const dir = fish.userData.velocity.clone().normalize();
    fish.rotation.y = Math.atan2(dir.x, dir.z);
  });

  renderer.render(scene, camera);
}
</script>
</body>
</html>