Interactive 3D aquariumOne-line
Nemotron 3.5 Lightning (free)
by NVIDIAReasoningClean
Running live in a sandboxed frame. Click inside it before using the keyboard.
How it went
- Total time
- 26.7 s
- Cost
- $0
- Output tokens
- 1,795
- Spent thinking
- 0 tokens
- Speed
- 68 tok/s
- Console errors
- 0
- First token after
- 277 ms
- First visible text after
- 277 ms
- Prompt tokens
- 448
- Code size
- 5.8 KB
- Finish reason
- stop
- Served by
- Nvidia
- Model id
nvidia/nemotron-3.5-lightning:free- Reasoning sent
{"effort":"none"}- Max output
- 32,000 tokens
- Generated
- Nov 9, 2026
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 · 179 lines
<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>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0">
<title>3D Aquarium</title>
<style>
* { margin:0; padding:0; box-sizing:border-box; }
html, body { width:100%; height:100%; overflow:hidden; font-family:sans-serif; background:#1a1a2e; }
#canvas { width:100%; height:100%; display:block; }
#ui { position:absolute; top:20px; left:20px; color:#fff; pointer-events:none; }
#start { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); color:#fff; background:#e91e63; padding:12px 24px; border:none; border-radius:4px; font-size:18px; cursor:pointer; display:none; }
#start.visible { display:block; }
.instructions { position:absolute; bottom:20px; left:50%; transform:translateX(-50%); color:#aaa; font-size:12px; }
</style>
</head>
<body>
<div id="ui">
<div id="start">Click or press a key to start</div>
<div class="instructions">Move mouse to chase fish</div>
</div>
<canvas id="canvas"></canvas>
<script type="module">
import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
// Scene setup
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x1a1a2e);
// Camera
const camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 5, 12);
camera.lookAt(0, 0, 0);
// Renderer
const renderer = new THREE.WebGLRenderer({ canvas: document.getElementById('canvas'), antialias:true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
// Controls (optional, can be used to navigate)
const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.dampingFactor = 0.05;
// Fish geometry and material
const fishGeometry = new THREE.ConeGeometry(0.2, 0.4, 8);
const fishMaterial = new THREE.MeshStandardMaterial({ color: 0xff6b6b, flatShading:true });
// School of fish
const fishCount = 30;
const fish = [];
const fishSpeed = [];
for (let i = 0; i < fishCount; i++) {
const fishMesh = new THREE.Mesh(fishGeometry, fishMaterial);
fishMesh.position.set(
(Math.random() - 0.5) * 20,
(Math.random() - 0.5) * 20,
(Math.random() - 0.5) * 20
);
fishMesh.rotation.z = Math.random() * Math.PI * 2;
fishMesh.scale.setScalar(0.5 + Math.random() * 0.5);
scene.add(fishMesh);
fish.push(fishMesh);
// Random initial speed vector
const angle = Math.random() * Math.PI * 2;
const speed = 0.05 + Math.random() * 0.05;
fishSpeed.push({ angle, speed });
}
// Light
const ambient = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(ambient);
const dirLight = new THREE.DirectionalLight(0xffffff, 0.8);
dirLight.position.set(5, 10, 7);
scene.add(dirLight);
// Mouse interaction
const mouse = { x: 0, y: 0, active: false };
const fishAvoidRadius = 3;
window.addEventListener('mousemove', (e) => {
const rect = renderer.domElement.getBoundingClientRect();
mouse.x = ((e.clientX - rect.left) / rect.width) * 2 - 1;
mouse.y = -((e.clientY - rect.top) / rect.height) * 2 + 1;
mouse.active = true;
});
window.addEventListener('keydown', () => {
document.getElementById('start').classList.add('visible');
});
// Initial pool of fish dispersion animation on start
function disperseFish() {
fish.forEach((f, i) => {
const target = new THREE.Vector3(
(Math.random() - 0.5) * 15,
(Math.random() - 0.5) * 15,
(Math.random() - 0.5) * 15
);
f.userData.target = target;
});
}
// Movement logic
function moveFish(dt) {
fish.forEach((f, i) => {
// Avoid mouse if active
if (mouse.active) {
const dist = f.position.distanceTo(new THREE.Vector3(mouse.x * fishAvoidRadius, mouse.y * fishAvoidRadius, 0));
if (dist < fishAvoidRadius && dist > 0) {
// Push fish away from mouse direction
const away = new THREE.Vector3();
away.subVectors(f.position, new THREE.Vector3(mouse.x * fishAvoidRadius, mouse.y * fishAvoidRadius, 0));
away.normalize();
away.multiplyScalar((fishAvoidRadius - dist) * 0.1);
f.position.add(away);
}
}
// Simple swimming behavior - move forward along z with some lateral drift
const speed = fishSpeed[i].speed;
const angle = fishSpeed[i].angle + (i * 0.2 + performance.now() * 0.001);
f.position.x += Math.cos(angle) * speed * dt;
f.position.y += Math.sin(angle) * speed * dt * 0.5;
f.position.z += Math.sin(angle * 0.7) * speed * dt * 0.3;
// Wrap around boundaries
if (f.position.x > 10) f.position.x = -10;
if (f.position.x < -10) f.position.x = 10;
if (f.position.y > 10) f.position.y = -10;
if (f.position.y < -10) f.position.y = 10;
if (f.position.z > 10) f.position.z = -10;
if (f.position.z < -10) f.position.z = 10;
// Point fish in direction of movement
f.lookAt(f.position.x + Math.cos(angle) * 0.5, f.position.y + Math.sin(angle) * 0.5, f.position.z);
});
}
// Animation loop
const clock = new THREE.Clock();
function animate() {
requestAnimationFrame(animate);
const dt = Math.min(clock.getDelta(), 0.1);
moveFish(dt);
controls.update();
renderer.render(scene, camera);
}
animate();
// Start UI
document.getElementById('start').addEventListener('click', () => {
document.getElementById('start').classList.remove('visible');
disperseFish();
});
// Handle resize
window.addEventListener('resize', () => {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
});
</script>
</body>
</html>