Nemotron 3 Super

by NVIDIAreasoning default1 console error

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

How it went

Total time: 23.1 s
Cost: $0.0015
Output tokens: 3,588
Spent thinking: 769 tokens
Speed: 160.6 tok/s
Console errors: 1

First token after: 759 ms
First visible text after: 8.5 s
Prompt tokens: 584
Code size: 8.8 KB
Finish reason: stop
Served by: DeepInfra
Model id: nvidia/nemotron-3-super-120b-a12b
Reasoning sent: model default
Max output: 16,384 tokens
Generated: Nov 13, 2026

Console errors

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

Unexpected number

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 · 269 lines

Download

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Low‑Poly Campfire Night</title>
<style>
  body { margin:0; overflow:hidden; background:#000; }
  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.fog = new THREE.FogExp2(0x000000, 0.002);

const camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 0.1, 500);
camera.position.set(0, 10, 30);

const renderer = new THREE.WebGLRenderer({ antialias:true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
renderer.shadowMap.enabled = true;
document.body.appendChild(renderer.domElement);

// ----- Lights -----
const hemiLight = new THREE.HemisphereLight(0x080820, 0x202030, 1.2);
scene.add(hemiLight);

const dirLight = new THREE.DirectionalLight(0xffffff, 0.8);
dirLight.position.set(50, 100, 30);
dirLight.castShadow = true;
dirLight.shadow.mapSize.set(2048,2048);
dirLight.shadow.camera.near = 0.5;
dirLight.shadow.camera.far = 200;
dirLight.shadow.camera.left = -100;
dirLight.shadow.camera.right = 100;
dirLight.shadow.camera.top = 100;
dirLight.shadow.camera.bottom = -100;
scene.add(dirLight);

// Fire point light (flicker)
const fireLight = new THREE.PointLight(0xff6600, 2, 30, 2);
fireLight.position.set(0, 2, 0);
fireLight.castShadow = true;
scene.add(fireLight);

// ----- Sky & Stars -----
const starCount = 3000;
const starPositions = new Float32Array(starCount * 3);
for (let i=0; i<starCount; i++) {
  const phi = Math.acos(2*Math.random()-1);
  const theta = 2*Math.PI*Math.random();
  const r = 200 + Math.random()*50;
  starPositions[i*3]   = r*Math.sin(phi)*Math.cos(theta);
  starPositions[i*3+1] = r*Math.sin(phi)*Math.sin(theta);
  starPositions[i*3+2] = r*Math.cos(phi);
}
const starGeometry = new THREE.BufferGeometry();
starGeometry.setAttribute('position', new THREE.BufferAttribute(starPositions, 3));
const starMaterial = new THREE.PointsMaterial({ color:0xffffff, size:0.5 });
const stars = new THREE.Points(starGeometry, starMaterial);
scene.add(stars);

// Moon
const moonGeo = new THREE.SphereGeometry(5, 16, 16);
const moonMat = new THREE.MeshStandardMaterial({ color:0xf0f0ff, emissive:0x404060, emissiveIntensity:0.5 });
const moon = new THREE.Mesh(moonGeo, moonMat);
moon.position.set(-40, 80, -20);
scene.add(moon);

// ----- Ground -----
const groundGeo = new THREE.PlaneGeometry(200,200);
const groundMat = new THREE.MeshStandardMaterial({ color:0x2b5d2b });
const ground = new THREE.Mesh(groundGeo, groundMat);
ground.rotation.x = -Math.PI/2;
ground.receiveShadow = true;
scene.add(ground);

// ----- Helper to create low‑poly objects -----
function createRock() {
  const size = 0.5 + Math.random()*1.5;
  const geo = new THREE.BoxGeometry(size, size*0.6, size);
  const mat = new THREE.MeshStandardMaterial({ color:0x555555 });
  const mesh = new THREE.Mesh(geo, mat);
  mesh.position.y = size/2;
  mesh.castShadow = true;
  mesh.receiveShadow = true;
  return mesh;
}
function createLog() {
  const radius = 0.2 + Math.random()*0.3;
  const height = 0.8 + Math.random()*1.2;
  const geo = new THREE.CylinderGeometry(radius, radius, height, 6);
  const mat = new THREE.MeshStandardMaterial({ color:0x8b5a2b });
  const mesh = new THREE.Mesh(geo, mat);
  mesh.rotation.z = Math.PI/2;
  mesh.position.y = height/2;
  mesh.castShadow = true;
  mesh.receiveShadow = true;
  return mesh;
}
function createTree() {
  const group = new THREE.Group();
  const trunkHeight = 1 + Math.random()*2;
  const trunkRadius = 0.15 + Math.random()*0.1;
  const trunkGeo = new THREE.CylinderGeometry(trunkRadius, trunkRadius, trunkHeight, 6);
  const trunkMat = new THREE.MeshStandardMaterial({ color:0x5d4037 });
  const trunk = new THREE.Mesh(trunkGeo, trunkMat);
  trunk.position.y = trunkHeight/2;
  trunk.castShadow = true;
  trunk.receiveShadow = true;
  group.add(trunk);
  const foliageHeight = trunkHeight*0.8;
  const foliageRadius = trunkRadius*3;
  const foliageGeo = new THREE.ConeGeometry(foliageRadius, foliageHeight, 6);
  const foliageMat = new THREE.MeshStandardMaterial({ color:0x2e7d32 });
  const foliage = new THREE.Mesh(foliageGeo, foliageMat);
  foliage.position.y = trunkHeight + foliageHeight/2;
  foliage.castShadow = true;
  foliage.receiveShadow = true;
  group.add(foliage);
  return group;
}

// ----- Place rocks, logs, trees -----
const clearingRadius = 25;
const scatterRadius = 80;
function placeObject(obj, minDist, maxDist) {
  let pos;
  do {
    const angle = Math.random()*Math.PI*2;
    const radius = minDist + Math.random()*(maxDist-minDist);
    pos = new THREE.Vector3(
      Math.cos(angle)*radius,
      0,
      Math.sin(angle)*radius
    );
  } while (pos.length() < clearingRadius); // avoid fire area
  obj.position.copy(pos);
  obj.position.y = 0; // ground level
  scene.add(obj);
}

// Rocks
for(let i=0;i<8;i++) placeObject(createRock(), 5, scatterRadius);
// Logs
for(let i=0;i<6;i++) placeObject(createLog(), 5, scatterRadius);
// Trees
for(let i=0;i<30;i++) {
  const tree = createTree();
  const scale = 0.7 + Math.random()*0.6;
  tree.scale.set(scale, scale, scale);
  placeObject(tree, clearingRadius+5, scatterRadius);
}

// ----- Campfire -----
const fireGroup = new THREE.Group();
scene.add(fireGroup);

// Base
const baseGeo = new THREE.CylinderGeometry(1.5, 1.5, 0.3, 6);
const baseMat = new THREE.MeshStandardMaterial({ color:0x111111 });
const base = new THREE.Mesh(baseGeo, baseMat);
base.position.y = 0.15;
base.castShadow = true;
base.receiveShadow = true;
fireGroup.add(base);

// Flames (simple animated cones)
const flameCount = 5;
const flames = [];
for(let i=0;i<flameCount;i++) {
  const height = 0.8 + Math.random()*0.6;
  const radius = 0.4 + Math.random()*0.2;
  const geo = new THREE.ConeGeometry(radius, height, 4);
  const mat = new THREE.MeshStandardMaterial({ color:0xff4500, emissive:0xff4500, emissiveIntensity:1.5, transparent:true, opacity0.8 });
  const mesh = new THREE.Mesh(geo, mat);
  mesh.position.y = 0.3 + height/2;
  mesh.rotation.y = Math.random()*Math.PI*2;
  mesh.castShadow = false;
  fireGroup.add(mesh);
  flames.push({mesh, baseHeight: height, baseRadius: radius, offset: Math.random()*10});
}

// Sparks particle system
const sparkCount = 80;
const sparkPositions = new Float32Array(sparkCount*3);
const sparkVelocities = new Float32Array(sparkCount*3);
for(let i=0;i<sparkCount;i++) {
  sparkPositions[i*3]   = (Math.random()-0.5)*0.5;
  sparkPositions[i*3+1] = 0.2 + Math.random()*0.3;
  sparkPositions[i*3+2] = (Math.random()-0.5)*0.5;
  sparkVelocities[i*3]   = (Math.random()-0.5)*0.02;
  sparkVelocities[i*3+1] = 0.02 + Math.random()*0.03;
  sparkVelocities[i*3+2] = (Math.random()-0.5)*0.02;
}
const sparkGeo = new THREE.BufferGeometry();
sparkGeo.setAttribute('position', new THREE.BufferAttribute(sparkPositions, 3));
const sparkMat = new THREE.PointsMaterial({ color:0xffdd44, size:0.08, transparent:true, opacity0.9 });
const sparks = new THREE.Points(sparkGeo, sparkMat);
fireGroup.add(sparks);

// ----- Controls -----
const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.minDistance = 5;
controls.maxDistance = 120;
controls.minPolarAngle = 0.1; // avoid looking underground
controls.maxPolarAngle = Math.PI/2 - 0.05;

// ----- Resize handler -----
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 elapsed = clock.getElapsedTime();

  // Fire light flicker
  fireLight.intensity = 1.5 + 0.5*Math.sin(elapsed*3);
  fireLight.color.setHSL(0.05, 0.8, 0.4 + 0.2*Math.sin(elapsed*2));

  // Animate flames
  flames.forEach((f,i) => {
    const scale = 0.8 + 0.2*Math.sin(elapsed*2 + i);
    f.mesh.scale.set(scale, scale*1.2, scale);
    f.mesh.position.y = 0.3 + f.baseHeight/2 * scale;
  });

  // Update sparks
  const posAttr = sparkGeo.attributes.position;
  for(let i=0;i<sparkCount;i++) {
    let x = posAttr.getX(i) + sparkVelocities[i*3];
    let y = posAttr.getY(i) + sparkVelocities[i*3+1];
    let z = posAttr.getZ(i) + sparkVelocities[i*3+2];
    if(y > 3) { // respawn
      x = (Math.random()-0.5)*0.5;
      y = 0.2 + Math.random()*0.3;
      z = (Math.random()-0.5)*0.5;
    }
    posAttr.setXYZ(i, x, y, z);
  }
  posAttr.needsUpdate = true;

  controls.update();
  renderer.render(scene, camera);
}
animate();
</script>
</body>
</html>

Reasoning trace (769 tokens)

We need to output a single HTML file with Three.js scene. Use import map as specified. Must be self-contained. Use OrbitControls from three/addons. We'll need to load them via import statements (type="module").

We must ensure script type="module". We'll need to import Three from "three" and OrbitControls from "three/addons/controls/OrbitControls.js".

Implement scene: ground plane (low-poly? simple plane). Rocks and logs as simple boxes/cone. Trees as low-poly (trunk cylinder + cone top). Place trees randomly around a radius, avoid fire area.

Campfire: base as a dark cylinder, flames as animated geometry (maybe using a cone with shader? Simpler: use a few overlapping cones with additive blending and animate scale/opacity). Use a point light with flicker (random intensity). Also add particle system for sparks: use Points with random positions and velocities, update each frame.

Sky: use a sphere or just set background color dark and add stars as points (or use a texture? We'll create a simple star field using Points geometry with many vertices). Moon: a sphere with emissive material.

Fog: use THREE.FogExp2 or Fog.

OrbitControls: set minPolarAngle, maxPolarAngle to keep above ground.

Make renderer size to window, handle resize.

All in one HTML.

Need to ensure no external requests beyond CDN. Use import map.

We'll embed the import map script tag before the module script.

Let's craft code.

Implementation details:

- Use <script type="importmap">... </script>

- Then <script type="module"> main code.

Inside module:

import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

Set up scene, camera, renderer.

Add fog: scene.fog = new THREE.FogExp2(0x000000, 0.002); // dark.

Add stars: generate random positions in a sphere radius 200, create Points with small white color.

Add moon: sphere at position (0, 150, -100) maybe, with emissive.

Ground: plane geometry 200x200, rotated -Math.PI/2, material MeshStandardColor? Actually need to receive shadows. Use MeshStandardMaterial with color dark green.

Add rocks: create few boxes with random scale, position.

Add logs: cylinder geometry.

Add trees: function createTree() returns group with trunk (cylinder) and foliage (cone). Random scale.

Place trees in clearing: define clearing radius maybe 30, place trees outside that radius up to e.g., 80 radius.

Fire: base: cylinder (dark). Flames: create a group of several cones (maybe 5) stacked, each with varying height and scale, animated via sine.

Use point light: position at fire base + some height, color orange, intensity 2, distance, decay. Add flicker by varying intensity each frame.

Particle sparks: create BufferGeometry with N particles (say 80). Assign random positions near fire base, random velocities upward. Update each frame: add velocity to position, reset if too high.

Add shadows: renderer.shadowMap.enabled = true; cast/receive.

Set objects to castShadow true, receiveShadow true for ground, rocks, logs, trees trunk maybe.

Controls: enable damping.

Add event listener for resize.

Add animation loop.

Ok.

Let's write code.

Be careful: using import map, the path for OrbitControls: "three/addons/controls/OrbitControls.js".

Now produce final HTML.