Models 44

Nemotron 3 Nano Omni (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
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>