Nemotron 3 Super

We need to produce a self-contained HTML page with Three.js, using import map for three module and addons.

Requirement: a 3D aquarium with fish that swim away when mouse moves near them.

We need to load three via import map. Use type="module" script.

We'll create a simple aquarium: water plane, maybe a box with texture? No external images allowed except CDN allowed? Only allowed imports are three and addons. No external images allowed, but we can use built-in geometry and basic materials. Could also use procedural textures? Simpler: use a blue plane for water, a sand bottom, some simple fish geometry (maybe using BoxGeometry or custom shape). Fish should be objects with position and velocity; they swim around randomly, but when mouse comes near, they flee away from mouse (increase velocity opposite direction).

We need to handle mouse movement: get normalized device coordinates from mouse, raycast onto a plane representing water surface? Actually we want distance in 3D world; easier: compute mouse position in world using raycaster intersecting with a plane at y=0 (water surface). Or simply map mouse to xz-plane using camera.

Simplify: Use an orthographic camera? Use perspective. We'll set camera looking down slightly.

Implement: On mousemove, update mouse vector (normalized -1 to 1). Use raycaster.setFromCamera(mouse, camera); raycaster.ray.origin and direction; intersect with a plane (new THREE.Plane(new THREE.Vector3(0,1,0), 0)) (i.e., y=0). Get point. Then for each fish, compute distance to that point; if less than threshold (say 2 units), set fish's target velocity away from point (i.e., direction = fish.position - point, normalize, multiply by some speed). Else, fish have some random wandering behavior.

We'll need to animate: requestAnimationFrame loop updating fish positions.

We'll also need to render scene.

Make sure page adapts: use window.innerWidth/height.

We need to show something on first paint: the aquarium with fish visible.

Let's code.

We'll create a simple fish geometry: maybe a cone for body and a tail? Could use a simple Mesh with a custom shape using THREE.ConeGeometry for body and a thin box for tail. Or just use a Sphere stretched? Let's make a simple fish using a combination: body = CylinderGeometry (top radius small, bottom radius larger?) Actually fish shape approximated by a "lens": use a SphereGeometry scaled.

Simpler: use a Mesh with a custom shape using THREE.Shape? Might be too heavy.

We'll use a simple fish made of a BoxGeometry (length along x, height y, width z) and rotate to look like fish. Or we can use a ConeGeometry for nose and a sphere for body.

Given limited time, we can use a simple "fish" as a Sprite with a texture? Not allowed external images. Could use a Mesh with a basic shape like a TetrahedronGeometry (looks like a fish?). Not ideal.

Better: Use a custom geometry using THREE.ExtrudeGeometry with a simple fish silhouette shape defined via Shape. We can define a simple fish outline using a few points.

Given time constraints, we can approximate fish as a sphere with a tail cone.

Implementation: fish group: body = new THREE.Mesh(new THREE.SphereGeometry(0.5, 16, 16), new THREE.MeshPhongMaterial({color: 0xFF6600})); tail = new THREE.Mesh(new THREE.ConeGeometry(0.3, 0.8, 8), new THREE.MeshPhongMaterial({color: 0xFF6600})); tail.position.set(-0.7,0,0); tail.rotation.y = Math.PI/2; group.add(body,tail);

We'll randomize colors.

We'll have maybe 20 fish.

Add lighting: ambient light and directional light from above.

Add a simple floor plane: a large plane with a sand color.

Add water plane: maybe a transparent blue plane slightly above floor? Or we can just have blue tint via clear color and fog.

Simpler: set scene background to a light blue, add fog.

Add a plane for ground with a sandy color.

Implement mouse tracking: we need to update mouse variable on mousemove.

We'll also need to handle resize.

We'll implement in a module script: <script type="module"> ... </script>

We need to include import map in head.

We'll write code accordingly.

Check for errors: Ensure we import * as THREE from 'three'; and addons like maybe we don't need any.

We need to use raycaster from three.

Let's craft final HTML.

We'll also include a "Click or press a key to start" message? Not required because it's interactive but not a game; but requirement says for games need start message. This is not a game; it's interactive demo. So we can skip.

But we still need to show something on first paint: the aquarium with fish visible.

Make sure to render immediately.

Let's craft final HTML.

Potential issues: The import map must be placed before the script that uses imports.

We'll write:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3D Aquarium</title>
<style>
  body{margin:0;overflow:hidden;background:#111;}
  canvas{display:block;}
</style>
</head>
<body>
<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';

const scene = new THREE.Scene();
scene.background = new THREE.Color(0x87CEEB); // sky blue
scene.fog = new THREE.FogExp2(0x87CEEB, 0.02);

const camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 0.1, 100);
camera.position.set(0, 8, 15);
camera.lookAt(0,0,0);

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

// lights
const hemiLight = new THREE.HemisphereLight(0xffffff, 0x444444, 1.2);
hemiLight.position.set(0, 20, 0);
scene.add(hemiLight);
const dirLight = new THREE.DirectionalLight(0xffffff, 1);
dirLight.position.set(-3, 15, -5);
scene.add(dirLight);

// ground
const groundGeo = new THREE.PlaneGeometry(200, 200);
const groundMat = new THREE.MeshPhongMaterial({color: 0x8B4513}); // saddle brown
const ground = new THREE.Mesh(groundGeo, groundMat);
ground.rotation.x = -Math.PI/2;
ground.position.y = -0.5; // slightly below water
scene.add(ground);

// water plane (optional)
const waterGeo = new THREE.PlaneGeometry(200, 200);
const waterMat = new THREE.MeshPhongMaterial({color: 0x1E90FF, transparent:true, opacity:0.3});
const water = new THREE.Mesh(waterGeo, waterMat);
water.rotation.x = -Math.PI/2;
water.position.y = 0; // at y=0
scene.add(water);

// fish creation
class Fish {
  constructor() {
    const group = new THREE.Group();
    // body
    const bodyGeo = new THREE.SphereGeometry(0.4, 12, 12);
    const bodyMat = new THREE.MeshPhongMaterial({color: Math.random()*0xffffff});
    const body = new THREE.Mesh(bodyGeo, bodyMat);
    body.scale.set(1, 0.6, 0.8); // elongate
    group.add(body);
    // tail
    const tailGeo = new THREE.ConeGeometry(0.2, 0.6, 8);
    const tailMat = new THREE.MeshPhongMaterial({color: bodyMat.color});
    const tail = new THREE.Mesh(tailGeo, tailMat);
    tail.position.set(-0.5, 0, 0);
    tail.rotation.y = Math.PI/2;
    group.add(tail);
    // fins (optional)
    // add to scene
    scene.add(group);
    this.object = group;
    this.position = new THREE.Vector3(
      (Math.random()-0.5)*80,
      Math.random()*5 + 0.5,
      (Math.random()-0.5)*80
    );
    this.object.position.copy(this.position);
    // velocity
    this.velocity = new THREE.Vector3(
      (Math.random()-0.5)*0.05,
      (Math.random()-0.5)*0.02,
      (Math.random()-0.5)*0.05
    );
    this.maxSpeed = 0.08;
    this.fleeSpeed = 0.2;
  }
  update(mouseWorld) {
    // random wandering
    if (Math.random() < 0.02) {
      this.velocity.set(
        (Math.random()-0.5)*0.05,
        (Math.random()-0.5)*0.02,
        (Math.random()-0.5)*0.05
      );
    }
    // flee if mouse near
    if (mouseWorld) {
      const d = this.position.distanceTo(mouseWorld);
      if (d < 3.0) {
        // direction away from mouse
        const away = new THREE.Vector3().subVectors(this.position, mouseWorld).normalize();
        // blend velocity towards away
        this.velocity.lerp(away.multiplyScalar(this.fleeSpeed), 0.1);
        // limit speed
        if (this.velocity.length() > this.maxSpeed * 2) this.velocity.setLength(this.maxSpeed * 2);
      } else {
        // slow down towards normal wandering
        if (this.velocity.length() > this.maxSpeed) {
          this.velocity.setLength(this.maxSpeed);
        }
      }
    } else {
      // limit speed
      if (this.velocity.length() > this.maxSpeed) {
        this.velocity.setLength(this.maxSpeed);
      }
    }
    this.position.add(this.velocity);
    this.object.position.copy(this.position);
    // slight turning based on velocity direction
    if (this.velocity.length() > 0.001) {
      const angle = Math.atan2(this.velocity.x, this.velocity.z);
      this.object.rotation.y = angle + Math.PI/2; // adjust for model orientation
    }
    // bounce off walls
    const halfSize = 40;
    if (this.position.x < -halfSize) { this.position.x = -halfSize; this.velocity.x *= -0.5; }
    if (this.position.x >  halfSize) { this.position.x =  halfSize; this.velocity.x *= -0.5; }
    if (this.position.z < -halfSize) { this.position.z = -halfSize; this.velocity.z *= -0.5; }
    if (this.position.z >  halfSize) { this.position.z =  halfSize; this.velocity.z *= -0.5; }
    // keep fish near surface
    if (this.position.y < 0.2) { this.position.y = 0.2; this.velocity.y = Math.abs(this.velocity.y)*0.5; }
    if (this.position.y > 6) { this.position.y = 6; this.velocity.y = -Math.abs(this.velocity.y)*0.5; }
  }
}

// create fish
const fishCount = 20;
const fishes = [];
for (let i=0; i<fishCount; i++) {
  fishes.push(new Fish());
}

// mouse handling
const mouse = new THREE.Vector2();
const raycaster = new THREE.Raycaster();
const plane = new THREE.Plane(new THREE.Vector3(0,1,0), 0); // y=0
const intersectPoint = new THREE.Vector3();
let mouseWorld = null;

function onMouseMove(event) {
  mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
  mouse.y = - (event.clientY / window.innerHeight) * 2 + 1;
  raycaster.setFromCamera(mouse, camera);
  // intersect with plane
  raycaster.ray.intersectPlane(plane, intersectPoint);
  mouseWorld = intersectPoint.clone();
}
window.addEventListener('mousemove', onMouseMove);
window.addEventListener('pointermove', onMouseMove); // for touch?

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

// animation
const clock = new THREE.Clock();
function animate() {
  requestAnimationFrame(animate);
  const delta = clock.getDelta();
  // update fishes
  for (const f of fishes) {
    f.update(mouseWorld);
  }
  renderer.render(scene, camera);
}
animate();
</script>
</body>
</html>

Check for any errors: we used OrbitControls import but never used; we can remove to simplify. Let's remove the import.

Also need to ensure we didn't use any disallowed features: we used requestAnimationFrame, addEventListener, etc. No localStorage.

We used three module import.

All good.

Now produce final answer in a fenced code block with html.

We need to ensure no extra text before or after. Provide exactly one code block.

Let's output.