Nemotron 3 Nano Omni (free)
by NVIDIAReasoning1 console error
Running live in a sandboxed frame. Click inside it before using the keyboard.
How it went
- Total time
- 20.7 s
- Cost
- $0
- Output tokens
- 2,235
- Spent thinking
- 0 tokens
- Speed
- 111.3 tok/s
- Console errors
- 1
- First token after
- 642 ms
- First visible text after
- 642 ms
- Prompt tokens
- 584
- Code size
- 6.8 KB
- Finish reason
- stop
- Served by
- Nvidia
- Model id
nvidia/nemotron-3-nano-omni-30b-a3b-reasoning:free- Reasoning sent
{"effort":"none"}- 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.
particleMat is not defined
What it was asked
The prompt
Build a low-poly 3D scene of a campfire in a forest clearing at night, with Three.js in a single HTML file. Load Three.js only through this import map (do not use any other URL or version): <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> Requirements: - A ground with a few low-poly rocks and logs around a campfire in the center. - At least 30 low-poly trees placed randomly around the clearing (not on the fire). - The campfire has animated flames and a warm point light that flickers and casts shadows. - Sparks rising from the fire as a simple particle system. - A dark night sky with stars and a moon, plus fog that fades the distant trees. - OrbitControls to look around, with limits so the camera stays above the ground. - The renderer fills the window and handles resizing correctly.
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 · 223 lines
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Low-Poly Campfire Scene</title>
<style>
body { margin: 0; overflow: hidden; font-family: sans-serif; background: #000; }
#info {
position: absolute; top: 10px; left: 10px; color: white; background: rgba(0,0,0,0.5);
padding: 8px; border-radius: 4px; pointer-events: none;
}
</style>
</head>
<body>
<div id="info">Click or press a key to start</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';
// Scene setup
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x000011);
scene.fog = new THREE.FogExp2(0x000011, 0.0005);
// Camera and renderer
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.dampingFactor = 0.05;
controls.minDistance = 5;
controls.maxDistance = 30;
controls.minPolarAngle = Math.PI / 4;
controls.maxPolarAngle = Math.PI - Math.PI / 4;
// Resize handler
window.addEventListener('resize', () => {
const width = window.innerWidth;
const height = window.innerHeight;
renderer.setSize(width, height);
camera.aspect = width / height;
camera.updateProjectionMatrix();
});
// Lighting
const ambientLight = new THREE.AmbientLight(0x404040, 0.5);
scene.add(ambientLight);
const fireLight = new THREE.PointLight(0xffaa00, 1, 100);
fireLight.position.set(0, 3, 0);
scene.add(fireLight);
// Ground
const groundGeo = new THREE.PlaneGeometry(100, 100);
const groundMat = new THREE.MeshStandardMaterial({ color: 0x228B22 });
const ground = new THREE.Mesh(groundGeo, groundMat);
ground.rotation.x = -Math.PI / 2;
scene.add(ground);
// Campfire base
const fireBaseGeo = new THREE.CylinderGeometry(0.5, 0.5, 1, 16);
const fireBaseMat = new THREE.MeshStandardMaterial({ color: 0x222222 });
const fireBase = new THREE.Mesh(fireBaseGeo, fireBaseMat);
fireBase.position.y = 0.5;
scene.add(fireBase);
// Rocks
const rockGeo = new THREE.IcosahedronGeometry(0.8, 4);
const rockMat = new THREE.MeshStandardMaterial({ color: 0x888888 });
for (let i = 0; i < 5; i++) {
const rock = new THREE.Mesh(rockGeo, rockMat);
rock.position.set(
(Math.random() - 0.5) * 20,
0.5,
(Math.random() - 0.5) * 20
);
scene.add(rock);
}
// Logs
const logGeo = new THREE.CylinderGeometry(0.3, 0.1, 2, 8);
const logMat = new THREE.MeshStandardMaterial({ color: 0x5c4033 });
for (let i = 0; i < 8; i++) {
const log = new THREE.Mesh(logGeo, logMat);
log.rotation.x = Math.PI / 2;
log.position.set(
(Math.random() - 0.5) * 15,
1,
(Math.random() - 0.5) * 15
);
scene.add(log);
}
// Trees
const treeGeo = new THREE.ConeGeometry(0.3, 0.6, 4);
const treeMat = new THREE.MeshStandardMaterial({ color: 0x0b6623 });
const trunkGeo = new THREE.CylinderGeometry(0.07, 0.07, 0.6, 4);
const trunkMat = new THREE.MeshStandardMaterial({ color: 0x8b5a2b });
function createTree() {
const crown = new THREE.Mesh(treeGeo, treeMat);
crown.position.y = 0.3;
const trunk = new THREE.Mesh(trunkGeo, trunkMat);
trunk.position.y = 0.3;
const group = new THREE.Group();
group.add(crown, trunk);
return group;
}
for (let i = 0; i < 30; i++) {
const tree = createTree();
tree.position.set(
(Math.random() - 0.5) * 80,
0,
(Math.random() - 0.5) * 80
);
// Avoid placing too close to fire
if (Math.abs(tree.position.x) < 5 || Math.abs(tree.position.z) < 5) continue;
scene.add(tree);
}
// Fire flames (simple animated quads)
const flameGeo = new THREE.PlaneGeometry(0.8, 0.5);
const flameMat = new THREE.MeshBasicMaterial({ color: 0xffaa00, transparent: true, opacity: 0.8 });
const flames = [];
for (let i = 0; i < 6; i++) {
const flame = new THREE.Mesh(flameGeo, flameMat);
flame.rotation.x = -Math.PI / 2;
flame.position.y = 1.5;
flame.position.x = (i - 2.5) * 0.4;
flame.scale.set(1 + Math.random() * 0.2, 1, 1);
scene.add(flame);
flames.push(flame);
}
// Sparks (particle system)
const particlesCount = 100;
const particlesGeo = new THREE.BufferGeometry();
const particlesPos = new Float32Array(particlesCount * 3);
const particlesVel = new Float32Array(particlesCount * 3);
const particleSize = new Float32Array(particlesCount);
for (let i = 0; i < particlesCount; i++) {
const i3 = i * 3;
particlesPos[i3] = 0;
particlesPos[i3 + 1] = 0.5;
particlesPos[i3 + 2] = 0;
particlesVel[i3] = (Math.random() - 0.5) * 0.02;
particlesVel[i3 + 1] = Math.random() * 0.05 + 0.01;
particlesVel[i3 + 2] = (Math.random() - 0.5) * 0.02;
particleSize[i] = 0.05 + Math.random() * 0.05;
}
const particlesMat = new THREE.PointsMaterial({
color: 0xffaa00,
size: 0.05,
sizeAttenuation: true,
transparent: true,
opacity: 0.8
});
const particleSystem = new THREE.Points(particlesGeo, particleMat);
scene.add(particleSystem);
particlesGeo.setAttribute('position', new THREE.BufferAttribute(particlesPos, 3));
particlesGeo.setAttribute('size', new THREE.BufferAttribute(particleSize, 1));
// Animation loop
let time = 0;
function animate() {
requestAnimationFrame(animate);
time += 0.01;
// Animate flames
flames.forEach(flame => {
flame.scale.y = 0.5 + Math.sin(time + flame.position.x * 0.3) * 0.3;
});
// Animate sparks
for (let i = 0; i < particlesCount; i++) {
const i3 = i * 3;
particlesPos[i3] += particlesVel[i3];
particlesPos[i3 + 1] += particlesVel[i3 + 1];
particlesPos[i3 + 2] += particlesVel[i3 + 2];
// Reset if too high
if (particlesPos[i3 + 1] > 2) {
particlesPos[i3] = (Math.random() - 0.5) * 2;
particlesPos[i3 + 2] = (Math.random() - 0.5) * 2;
particlesPos[i3 + 1] = 0.5;
particlesVel[i3] = (Math.random() - 0.5) * 0.02;
particlesVel[i3 + 1] = Math.random() * 0.05 + 0.01;
particlesVel[i3 + 2] = (Math.random() - 0.5) * 0.02;
}
}
particleSystem.geometry.attributes.position.needsUpdate = true;
controls.update();
renderer.render(scene, camera);
}
animate();
// Start prompt
document.addEventListener('click', () => {
document.getElementById('info').style.display = 'none';
});
document.addEventListener('keydown', () => {
document.getElementById('info').style.display = 'none';
});
</script>
</body>
</html>