Models 44

Nemotron 3 Ultra (free)

by NVIDIAReasoning1 console error
Open in new window

Running live in a sandboxed frame. Click inside it before using the keyboard.

How it went

Total time
1 min 56 s
Cost
$0
Output tokens
7,954
Spent thinking
295 tokens
Speed
68.8 tok/s
Console errors
1
First token after
603 ms
First visible text after
5.6 s
Prompt tokens
448
Code size
21.4 KB
Finish reason
stop
Served by
Nvidia
Model id
nvidia/nemotron-3-ultra-550b-a55b:free
Reasoning sent
{"effort":"medium"}
Max output
32,000 tokens
Generated
Nov 9, 2026

Console errors

Caught in the first 3 seconds after load, in a sandboxed iframe like the one above.

THREE.ConvexGeometry is not a constructor

What it was asked

The prompt
“a 3D aquarium with Three.js where the fish swim away when I move the mouse near them (Load Three.js only through this import map: <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>)”
System prompt, sent with every prompt
You are generating a self-contained web demo. It will be rendered automatically in a sandboxed iframe and compared side by side with the output of other AI models given the exact same task.

Output rules:
- Reply with exactly ONE fenced code block containing the complete file: ```html (or ```svg when the task asks for an SVG). No text before or after the code block.
- Everything must be inline: CSS in <style>, JavaScript in <script>. No external files, images, fonts or network requests, except the CDN URLs explicitly allowed by the task.
- Do not use localStorage, sessionStorage, cookies, IndexedDB, alert(), confirm(), prompt() or window.open(): they are blocked in the sandbox and will throw.
- The page must look right in a 1280×800 viewport and adapt gracefully down to 375px wide. No horizontal scrollbar.
- Something meaningful must be visible on first paint: a screenshot is taken automatically about 3 seconds after load, without any interaction.
- Everything that makes the demo interesting must be visible within the first seconds: nothing hidden behind a high score, a later level or a long play session.
- Games must start in a self-playing demo mode (a simple AI plays) behind a "Click or press a key to start" message, so the game can be judged in action without playing.
- The iframe only receives keyboard events after the user clicks it: if the demo uses the keyboard, display a clear "Click or press a key to start" message.
- The code must run with zero errors in the console of the latest Chrome.

Code run-1.html · 599 lines

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>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>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { overflow: hidden; background: #0a1020; font-family: system-ui, sans-serif; }
#canvas-container { width: 100vw; height: 100vh; display: flex; align-items: center; justify-content: center; }
canvas { display: block; max-width: 100%; max-height: 100%; }
#ui {
  position: fixed; top: 20px; left: 50%; transform: translateX(-50%);
  color: #a8d0e6; text-align: center; pointer-events: none;
  text-shadow: 0 2px 8px rgba(0,0,0,0.8);
  z-index: 10;
}
#ui h1 { font-size: clamp(1.2rem, 3vw, 2rem); font-weight: 300; letter-spacing: 0.1em; margin-bottom: 0.3rem; }
#ui p { font-size: clamp(0.7rem, 1.8vw, 0.95rem); opacity: 0.7; }
@media (max-width: 600px) { #ui { top: 12px; } }
</style>
</head>
<body>
<div id="canvas-container"></div>
<div id="ui">
  <h1>Interactive Aquarium</h1>
  <p>Move your mouse near the fish to scare them</p>
</div>
<script type="module">
import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

// Scene setup
const container = document.getElementById('canvas-container');
const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.toneMappingExposure = 1.1;
container.appendChild(renderer.domElement);

const scene = new THREE.Scene();
scene.fog = new THREE.FogExp2(0x0a1020, 0.015);

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

const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.dampingFactor = 0.05;
controls.enablePan = true;
controls.minDistance = 5;
controls.maxDistance = 35;
controls.maxPolarAngle = Math.PI / 2 - 0.05;
controls.target.set(0, 1.5, 0);

// Tank dimensions
const TANK_W = 24, TANK_H = 12, TANK_D = 16;
const HALF_W = TANK_W / 2, HALF_H = TANK_H / 2, HALF_D = TANK_D / 2;
const INNER_W = TANK_W - 0.4, INNER_H = TANK_H - 0.2, INNER_D = TANK_D - 0.4;

// Materials
const glassMat = new THREE.MeshPhysicalMaterial({
  color: 0x88ccff, metalness: 0, roughness: 0, transmission: 0.98,
  thickness: 0.2, ior: 1.5, transparent: true, opacity: 0.3,
  side: THREE.DoubleSide, envMapIntensity: 0.5
});
const waterMat = new THREE.MeshPhysicalMaterial({
  color: 0x003355, metalness: 0, roughness: 0.1, transmission: 0.9,
  thickness: INNER_D, ior: 1.33, transparent: true, opacity: 0.4,
  envMapIntensity: 0.3
});
const gravelMat = new THREE.MeshStandardMaterial({ color: 0x3d2e24, roughness: 0.9, metalness: 0 });
const plantMat = new THREE.MeshStandardMaterial({ color: 0x1a5c2e, roughness: 0.8, metalness: 0, side: THREE.DoubleSide });
const rockMat = new THREE.MeshStandardMaterial({ color: 0x4a4a5a, roughness: 0.85, metalness: 0.1 });

// Tank glass walls
function createTank() {
  const group = new THREE.Group();
  const thickness = 0.2;
  // Back
  group.add(new THREE.Mesh(new THREE.BoxGeometry(TANK_W, TANK_H, thickness), glassMat)).position.z = -HALF_D;
  // Front
  group.add(new THREE.Mesh(new THREE.BoxGeometry(TANK_W, TANK_H, thickness), glassMat)).position.z = HALF_D;
  // Left
  group.add(new THREE.Mesh(new THREE.BoxGeometry(thickness, TANK_H, TANK_D), glassMat)).position.x = -HALF_W;
  // Right
  group.add(new THREE.Mesh(new THREE.BoxGeometry(thickness, TANK_H, TANK_D), glassMat)).position.x = HALF_W;
  // Bottom
  group.add(new THREE.Mesh(new THREE.BoxGeometry(TANK_W, thickness, TANK_D), glassMat)).position.y = -HALF_H;
  // Top rim
  const rimMat = new THREE.MeshStandardMaterial({ color: 0x1a1a2e, roughness: 0.3, metalness: 0.7 });
  group.add(new THREE.Mesh(new THREE.BoxGeometry(TANK_W + 0.4, 0.3, TANK_D + 0.4), rimMat)).position.y = HALF_H + 0.15;
  return group;
}

// Water volume
const waterGeo = new THREE.BoxGeometry(INNER_W, INNER_H - 0.5, INNER_D);
const waterMesh = new THREE.Mesh(waterGeo, waterMat);
waterMesh.position.y = -0.25;
scene.add(waterMesh);

// Gravel bottom
const gravelGeo = new THREE.BoxGeometry(INNER_W - 1, 0.5, INNER_D - 1);
const gravel = new THREE.Mesh(gravelGeo, gravelMat);
gravel.position.y = -HALF_H + 0.25 + 0.05;
gravel.receiveShadow = true;
scene.add(gravel);

// Decorations: plants
function createPlant(x, z, scale = 1) {
  const group = new THREE.Group();
  const stems = Math.floor(3 + Math.random() * 4) * scale;
  for (let i = 0; i < stems; i++) {
    const h = (1.5 + Math.random() * 2.5) * scale;
    const curve = new THREE.CatmullRomCurve3([
      new THREE.Vector3(0, 0, 0),
      new THREE.Vector3((Math.random() - 0.5) * 0.5, h * 0.3, (Math.random() - 0.5) * 0.5),
      new THREE.Vector3((Math.random() - 0.5) * 0.8, h * 0.7, (Math.random() - 0.5) * 0.8),
      new THREE.Vector3((Math.random() - 0.5) * 0.5, h, (Math.random() - 0.5) * 0.5)
    ]);
    const tubeGeo = new THREE.TubeGeometry(curve, 12, 0.04 * scale, 8, false);
    const stem = new THREE.Mesh(tubeGeo, plantMat);
    stem.position.set((Math.random() - 0.5) * 0.3, 0, (Math.random() - 0.5) * 0.3);
    group.add(stem);
    // Leaves
    for (let l = 0; l < 5; l++) {
      const leafGeo = new THREE.SphereGeometry(0.15 * scale, 6, 4);
      leafGeo.scale(1, 0.2, 0.6);
      const leaf = new THREE.Mesh(leafGeo, plantMat);
      leaf.position.set((Math.random() - 0.5) * 0.6, 0.3 + l * 0.3, (Math.random() - 0.5) * 0.6);
      leaf.rotation.set(Math.random() * 0.5, Math.random() * Math.PI, Math.random() * 0.5);
      group.add(leaf);
    }
  }
  group.position.set(x, -HALF_H + 0.5, z);
  return group;
}

// Decorations: rocks
function createRock(x, z, scale = 1) {
  const group = new THREE.Group();
  const verts = [];
  for (let i = 0; i < 12; i++) {
    const r = (0.5 + Math.random() * 0.5) * scale;
    const theta = Math.random() * Math.PI * 2;
    const phi = Math.acos(2 * Math.random() - 1);
    verts.push(new THREE.Vector3(
      r * Math.sin(phi) * Math.cos(theta),
      r * Math.sin(phi) * Math.sin(theta) * 0.6,
      r * Math.cos(phi)
    ));
  }
  const hull = new THREE.ConvexGeometry(verts);
  const rock = new THREE.Mesh(hull, rockMat);
  rock.position.y = 0.3 * scale;
  rock.castShadow = true;
  rock.receiveShadow = true;
  group.add(rock);
  group.position.set(x, -HALF_H + 0.5, z);
  return group;
}

// Add decorations
scene.add(createPlant(-8, -5, 1.2));
scene.add(createPlant(7, 4, 0.9));
scene.add(createPlant(-5, 6, 1.1));
scene.add(createPlant(9, -3, 0.8));
scene.add(createRock(-6, -6, 1.5));
scene.add(createRock(5, -7, 1.2));
scene.add(createRock(-9, 2, 1));
scene.add(createRock(8, 5, 1.3));
scene.add(createRock(0, -5, 0.8));

// Tank
scene.add(createTank());

// Lighting
const sunLight = new THREE.DirectionalLight(0xffffee, 2.5);
sunLight.position.set(15, 25, 10);
sunLight.castShadow = true;
sunLight.shadow.mapSize.set(2048, 2048);
sunLight.shadow.camera.near = 1;
sunLight.shadow.camera.far = 60;
sunLight.shadow.camera.left = -20;
sunLight.shadow.camera.right = 20;
sunLight.shadow.camera.top = 20;
sunLight.shadow.camera.bottom = -20;
sunLight.shadow.bias = -0.001;
scene.add(sunLight);

const ambient = new THREE.AmbientLight(0x446688, 1.5);
scene.add(ambient);

const causticLight = new THREE.PointLight(0x44aaff, 1, 30);
causticLight.position.set(0, 15, 0);
scene.add(causticLight);

// Fish class
class Fish {
  constructor(species) {
    this.species = species;
    this.size = species.size;
    this.speed = species.speed;
    this.turnSpeed = species.turnSpeed;
    this.color = species.color;
    this.pattern = species.pattern;
    
    // Position within tank bounds
    this.pos = new THREE.Vector3(
      (Math.random() - 0.5) * INNER_W * 0.8,
      (Math.random() - 0.5) * INNER_H * 0.6,
      (Math.random() - 0.5) * INNER_D * 0.8
    );
    this.vel = new THREE.Vector3();
    this.acc = new THREE.Vector3();
    this.targetDir = new THREE.Vector3(
      Math.random() - 0.5, Math.random() - 0.5, Math.random() - 0.5
    ).normalize();
    
    // Animation
    this.swimPhase = Math.random() * Math.PI * 2;
    this.swimSpeed = 1 + Math.random() * 0.5;
    this.bodySwing = 0;
    this.finPhase = Math.random() * Math.PI * 2;
    
    // Flee behavior
    this.fleeForce = new THREE.Vector3();
    this.fleeTimer = 0;
    
    this.mesh = this.createMesh();
    this.mesh.position.copy(this.pos);
    scene.add(this.mesh);
  }
  
  createMesh() {
    const group = new THREE.Group();
    const s = this.size;
    const bodyMat = new THREE.MeshStandardMaterial({
      color: this.color, roughness: 0.4, metalness: 0.2,
      envMapIntensity: 0.5
    });
    const finMat = new THREE.MeshStandardMaterial({
      color: this.color, roughness: 0.3, metalness: 0.1,
      transparent: true, opacity: 0.7, side: THREE.DoubleSide
    });
    
    // Body
    const bodyGeo = new THREE.SphereGeometry(1, 16, 12);
    bodyGeo.scale(s * 1.2, s * 0.6, s * 0.4);
    const body = new THREE.Mesh(bodyGeo, bodyMat);
    body.castShadow = true;
    group.add(body);
    
    // Tail fin
    const tailGeo = new THREE.ConeGeometry(s * 0.6, s * 0.7, 4, 1, true);
    tailGeo.rotateX(Math.PI / 2);
    tailGeo.translate(0, 0, -s * 1.1);
    const tail = new THREE.Mesh(tailGeo, finMat);
    group.add(tail);
    this.tail = tail;
    
    // Dorsal fin
    const dorsalGeo = new THREE.ConeGeometry(s * 0.4, s * 0.5, 3, 1, true);
    dorsalGeo.rotateX(-Math.PI / 2);
    dorsalGeo.translate(0, s * 0.5, -s * 0.2);
    const dorsal = new THREE.Mesh(dorsalGeo, finMat);
    group.add(dorsal);
    
    // Pectoral fins
    const pectoralGeo = new THREE.ConeGeometry(s * 0.35, s * 0.45, 3, 1, true);
    pectoralGeo.rotateZ(Math.PI / 2);
    const pectL = new THREE.Mesh(pectoralGeo, finMat);
    pectL.position.set(-s * 0.5, 0, s * 0.1);
    pectL.rotation.y = -0.3;
    group.add(pectL);
    this.pectL = pectL;
    
    const pectR = new THREE.Mesh(pectoralGeo, finMat);
    pectR.position.set(s * 0.5, 0, s * 0.1);
    pectR.rotation.y = 0.3;
    pectR.scale.x = -1;
    group.add(pectR);
    this.pectR = pectR;
    
    // Eyes
    const eyeGeo = new THREE.SphereGeometry(s * 0.12, 8, 6);
    const eyeMat = new THREE.MeshStandardMaterial({ color: 0x000000, roughness: 0.1, metalness: 0.9 });
    const eyeL = new THREE.Mesh(eyeGeo, eyeMat);
    eyeL.position.set(-s * 0.35, s * 0.15, s * 0.35);
    group.add(eyeL);
    const eyeR = new THREE.Mesh(eyeGeo, eyeMat);
    eyeR.position.set(s * 0.35, s * 0.15, s * 0.35);
    group.add(eyeR);
    
    // Pattern details
    if (this.pattern === 'stripes') {
      for (let i = 0; i < 4; i++) {
        const stripeGeo = new THREE.TorusGeometry(s * 0.55, s * 0.08, 4, 20);
        const stripeMat = new THREE.MeshStandardMaterial({ color: 0xffffff, roughness: 0.5 });
        const stripe = new THREE.Mesh(stripeGeo, stripeMat);
        stripe.rotation.x = Math.PI / 2;
        stripe.position.z = -s * 0.3 + i * s * 0.25;
        group.add(stripe);
      }
    } else if (this.pattern === 'spots') {
      for (let i = 0; i < 6; i++) {
        const spotGeo = new THREE.SphereGeometry(s * 0.1, 6, 4);
        spotGeo.scale(1, 0.5, 1);
        const spotMat = new THREE.MeshStandardMaterial({ color: 0xffffff });
        const spot = new THREE.Mesh(spotGeo, spotMat);
        spot.position.set(
          (Math.random() - 0.5) * s * 0.8,
          (Math.random() - 0.5) * s * 0.4,
          (Math.random() - 0.5) * s * 0.6 + s * 0.1
        );
        group.add(spot);
      }
    }
    
    return group;
  }
  
  update(dt, mousePos, allFish) {
    this.swimPhase += dt * this.swimSpeed * 5;
    this.finPhase += dt * 8;
    
    // Swimming animation
    this.bodySwing = Math.sin(this.swimPhase) * 0.15;
    this.mesh.rotation.y = Math.atan2(this.vel.x, this.vel.z) + this.bodySwing;
    this.tail.rotation.y = Math.sin(this.swimPhase) * 0.5;
    this.pectL.rotation.x = Math.sin(this.finPhase) * 0.3;
    this.pectR.rotation.x = -Math.sin(this.finPhase) * 0.3;
    
    // Reset acceleration
    this.acc.set(0, 0, 0);
    
    // Wandering behavior
    if (Math.random() < 0.01) {
      this.targetDir.set(
        Math.random() - 0.5, (Math.random() - 0.5) * 0.5, Math.random() - 0.5
      ).normalize();
    }
    
    // Steer towards target direction
    const desired = this.targetDir.clone().multiplyScalar(this.speed);
    const steer = desired.sub(this.vel).clampLength(0, this.turnSpeed * dt);
    this.acc.add(steer);
    
    // Boundary avoidance
    const margin = 2;
    const bounds = { x: HALF_W - margin, y: HALF_H - margin, z: HALF_D - margin };
    if (Math.abs(this.pos.x) > bounds.x) this.acc.x -= Math.sign(this.pos.x) * 2;
    if (Math.abs(this.pos.y) > bounds.y) this.acc.y -= Math.sign(this.pos.y) * 2;
    if (Math.abs(this.pos.z) > bounds.z) this.acc.z -= Math.sign(this.pos.z) * 2;
    
    // Separation from other fish
    for (const other of allFish) {
      if (other === this) continue;
      const diff = this.pos.clone().sub(other.pos);
      const dist = diff.length();
      if (dist < 1.5 && dist > 0) {
        this.acc.add(diff.normalize().multiplyScalar((1.5 - dist) * 2));
      }
    }
    
    // Flee from mouse
    if (mousePos) {
      const toMouse = this.pos.clone().sub(mousePos);
      const distMouse = toMouse.length();
      const fleeRadius = 4;
      if (distMouse < fleeRadius && distMouse > 0) {
        const force = (fleeRadius - distMouse) / fleeRadius * 15;
        this.acc.add(toMouse.normalize().multiplyScalar(force));
        this.fleeTimer = 0.5;
      }
    }
    this.fleeTimer = Math.max(0, this.fleeTimer - dt);
    
    // Physics integration
    this.vel.add(this.acc.clone().multiplyScalar(dt));
    this.vel.clampLength(0, this.speed * 1.5);
    this.pos.add(this.vel.clone().multiplyScalar(dt));
    
    // Update mesh position
    this.mesh.position.copy(this.pos);
  }
}

// Fish species
const speciesList = [
  { name: 'Neon Tetra', size: 0.35, speed: 2.5, turnSpeed: 4, color: 0x00ffff, pattern: 'stripes' },
  { name: 'Goldfish', size: 0.6, speed: 1.5, turnSpeed: 2.5, color: 0xffaa00, pattern: 'none' },
  { name: 'Angelfish', size: 0.55, speed: 1.8, turnSpeed: 3, color: 0xffffff, pattern: 'stripes' },
  { name: 'Guppy', size: 0.3, speed: 3, turnSpeed: 5, color: 0xff66aa, pattern: 'spots' },
  { name: 'Betta', size: 0.5, speed: 2, turnSpeed: 3.5, color: 0x6600ff, pattern: 'none' },
  { name: 'Discus', size: 0.65, speed: 1.2, turnSpeed: 2, color: 0x00ccaa, pattern: 'stripes' },
];

const fish = [];
const fishCount = 35;
for (let i = 0; i < fishCount; i++) {
  const sp = speciesList[Math.floor(Math.random() * speciesList.length)];
  fish.push(new Fish(sp));
}

// Mouse tracking in 3D
const mouse = new THREE.Vector2(-10, -10);
const raycaster = new THREE.Raycaster();
const waterPlane = new THREE.Plane(new THREE.Vector3(0, 0, 1), -HALF_D * 0.8); // Plane at front glass
let mouseWorldPos = null;

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

window.addEventListener('touchmove', (e) => {
  if (e.touches[0]) {
    mouse.x = (e.touches[0].clientX / window.innerWidth) * 2 - 1;
    mouse.y = -(e.touches[0].clientY / window.innerHeight) * 2 + 1;
  }
}, { passive: true });

// Caustics animation
const causticTexture = new THREE.DataTexture(
  new Uint8Array(128 * 128), 128, 128, THREE.RedFormat
);
function generateCaustics() {
  const data = causticTexture.image.data;
  const time = performance.now() * 0.001;
  for (let y = 0; y < 128; y++) {
    for (let x = 0; x < 128; x++) {
      const nx = x / 128 * 8, ny = y / 128 * 8;
      let v = 0;
      v += Math.sin(nx * 1.2 + time * 0.8) * Math.cos(ny * 1.1 + time * 0.6);
      v += Math.sin(nx * 0.7 - time * 0.5) * Math.cos(ny * 1.5 + time * 0.4);
      v += Math.sin((nx + ny) * 0.5 + time * 0.3) * 0.5;
      data[y * 128 + x] = Math.max(0, Math.min(255, (v * 0.5 + 0.5) * 255));
    }
  }
  causticTexture.needsUpdate = true;
}

// Water surface caustics projection
const causticLight2 = new THREE.SpotLight(0x44ffff, 2, 25, Math.PI / 4, 0.5, 1);
causticLight2.position.set(0, 14, 0);
causticLight2.target.position.set(0, -HALF_H + 0.5, 0);
causticLight2.castShadow = true;
causticLight2.shadow.mapSize.set(1024, 1024);
causticLight2.shadow.camera.near = 10;
causticLight2.shadow.camera.far = 25;
causticLight2.shadow.camera.fov = 60;
causticLight2.shadow.bias = -0.0005;
scene.add(causticLight2);
scene.add(causticLight2.target);

// Particles (floating debris)
const particleGeo = new THREE.BufferGeometry();
const particleCount = 300;
const positions = new Float32Array(particleCount * 3);
const sizes = new Float32Array(particleCount);
const speeds = new Float32Array(particleCount);
for (let i = 0; i < particleCount; i++) {
  positions[i * 3] = (Math.random() - 0.5) * INNER_W * 0.9;
  positions[i * 3 + 1] = (Math.random() - 0.5) * INNER_H * 0.9;
  positions[i * 3 + 2] = (Math.random() - 0.5) * INNER_D * 0.9;
  sizes[i] = Math.random() * 0.04 + 0.01;
  speeds[i] = Math.random() * 0.02 + 0.005;
}
particleGeo.setAttribute('position', new THREE.BufferAttribute(positions, 3));
particleGeo.setAttribute('size', new THREE.BufferAttribute(sizes, 1));
const particleMat = new THREE.PointsMaterial({
  color: 0xffffff, size: 0.05, transparent: true, opacity: 0.3,
  sizeAttenuation: true, depthWrite: false
});
const particles = new THREE.Points(particleGeo, particleMat);
scene.add(particles);

// Bubbles
const bubbleGeo = new THREE.BufferGeometry();
const bubbleCount = 50;
const bubblePositions = new Float32Array(bubbleCount * 3);
const bubbleSizes = new Float32Array(bubbleCount);
const bubbleSpeeds = new Float32Array(bubbleCount);
for (let i = 0; i < bubbleCount; i++) {
  bubblePositions[i * 3] = (Math.random() - 0.5) * INNER_W * 0.6;
  bubblePositions[i * 3 + 1] = -HALF_H + 1 + Math.random() * INNER_H * 0.8;
  bubblePositions[i * 3 + 2] = (Math.random() - 0.5) * INNER_D * 0.6;
  bubbleSizes[i] = Math.random() * 0.1 + 0.05;
  bubbleSpeeds[i] = Math.random() * 0.15 + 0.05;
}
bubbleGeo.setAttribute('position', new THREE.BufferAttribute(bubblePositions, 3));
bubbleGeo.setAttribute('size', new THREE.BufferAttribute(bubbleSizes, 1));
const bubbleMat = new THREE.PointsMaterial({
  color: 0xaaddff, transparent: true, opacity: 0.4,
  sizeAttenuation: true, depthWrite: false, blending: THREE.AdditiveBlending
});
const bubbles = new THREE.Points(bubbleGeo, bubbleMat);
scene.add(bubbles);

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

// Animation loop
let lastTime = performance.now();
function animate() {
  const now = performance.now();
  const dt = Math.min((now - lastTime) / 1000, 0.1);
  lastTime = now;
  
  controls.update();
  
  // Raycast mouse to water plane
  raycaster.setFromCamera(mouse, camera);
  const intersect = raycaster.ray.intersectPlane(waterPlane, new THREE.Vector3());
  if (intersect) {
    // Clamp to tank interior
    mouseWorldPos = intersect.clone();
    mouseWorldPos.x = THREE.MathUtils.clamp(mouseWorldPos.x, -INNER_W/2, INNER_W/2);
    mouseWorldPos.y = THREE.MathUtils.clamp(mouseWorldPos.y, -INNER_H/2, INNER_H/2);
    mouseWorldPos.z = THREE.MathUtils.clamp(mouseWorldPos.z, -INNER_D/2, INNER_D/2);
  } else {
    mouseWorldPos = null;
  }
  
  // Update fish
  for (const f of fish) {
    f.update(dt, mouseWorldPos, fish);
  }
  
  // Update particles
  const pPos = particles.geometry.attributes.position.array;
  const pSizes = particles.geometry.attributes.size.array;
  for (let i = 0; i < particleCount; i++) {
    pPos[i * 3 + 1] -= speeds[i] * dt * 60;
    if (pPos[i * 3 + 1] < -HALF_H + 0.5) {
      pPos[i * 3 + 1] = HALF_H - 0.5;
      pPos[i * 3] = (Math.random() - 0.5) * INNER_W * 0.9;
      pPos[i * 3 + 2] = (Math.random() - 0.5) * INNER_D * 0.9;
    }
    // Sway
    pPos[i * 3] += Math.sin(now * 0.001 + i) * 0.001;
    pPos[i * 3 + 2] += Math.cos(now * 0.001 + i) * 0.001;
  }
  particles.geometry.attributes.position.needsUpdate = true;
  
  // Update bubbles
  const bPos = bubbles.geometry.attributes.position.array;
  for (let i = 0; i < bubbleCount; i++) {
    bPos[i * 3 + 1] += bubbleSpeeds[i] * dt * 60;
    bPos[i * 3] += Math.sin(now * 0.002 + i * 10) * 0.002;
    bPos[i * 3 + 2] += Math.cos(now * 0.002 + i * 10) * 0.002;
    if (bPos[i * 3 + 1] > HALF_H - 1) {
      bPos[i * 3 + 1] = -HALF_H + 1;
      bPos[i * 3] = (Math.random() - 0.5) * INNER_W * 0.6;
      bPos[i * 3 + 2] = (Math.random() - 0.5) * INNER_D * 0.6;
    }
  }
  bubbles.geometry.attributes.position.needsUpdate = true;
  
  // Animate caustics
  generateCaustics();
  causticLight2.target.position.x = Math.sin(now * 0.0003) * 3;
  causticLight2.target.position.z = Math.cos(now * 0.0003) * 3;
  
  // Gentle camera auto-rotate when not interacting
  if (!controls.userRotate) {
    controls.target.x = Math.sin(now * 0.0001) * 1.5;
    controls.target.z = Math.cos(now * 0.0001) * 1.5;
  }
  
  renderer.render(scene, camera);
  requestAnimationFrame(animate);
}

animate();

// Handle interaction state for auto-rotate
let userInteracting = false;
controls.addEventListener('start', () => { userInteracting = true; });
controls.addEventListener('end', () => { userInteracting = false; });
</script>
</body>
</html>
Reasoning trace (295 tokens)
The user wants a 3D aquarium with Three.js where fish swim away when the mouse gets near them. I need to create a self-contained HTML file with inline CSS and JS.

Key requirements:
1. Load Three.js via the provided import map
2. Create a 3D aquarium scene
3. Fish that swim around
4. Fish swim away when mouse is near them
5. Must work in 1280x800 viewport and adapt to 375px wide
6. No horizontal scrollbar
7. Something meaningful visible on first paint
8. No external resources except the CDN URLs provided
7. No localStorage, sessionStorage, cookies, IndexedDB, alert(), confirm(), prompt(), window.open()

Let me plan:
- Create a scene with a tank (glass walls)
- Add water effect (maybe a subtle blue fog or shader)
- Create fish geometries (simple shapes or loaded models - but no external models, so procedural)
- Fish swimming behavior (boids-like or simple sine wave paths)
- Mouse tracking in 3D space (raycast from camera to get mouse position in tank)
- Fish flee behavior when mouse is close
- Lighting, camera controls (maybe OrbitControls for viewing)

Since we can't load external models, I'll create fish procedurally using simple geometries (cones, spheres, boxes combined).

Let me write the code.