npm - nova64 - Versions diffs - 0.2.5 → 0.2.7 - Mend

nova64 0.2.5 → 0.2.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (185) hide show

package/README.md +25 -8
package/bin/nova64.js +165 -0
package/dist/assets/console-CY_kygm3.js +14 -0
package/dist/assets/console-CY_kygm3.js.map +1 -0
package/dist/assets/main-l0sNRNKZ.js.map +1 -0
package/dist/assets/sky/studio/nx.png +0 -0
package/dist/assets/sky/studio/ny.png +0 -0
package/dist/assets/sky/studio/nz.png +0 -0
package/dist/assets/sky/studio/px.png +0 -0
package/dist/assets/sky/studio/py.png +0 -0
package/dist/assets/sky/studio/pz.png +0 -0
package/dist/assets/vanilla-Dcuy32gi.js +2 -0
package/dist/assets/vanilla-Dcuy32gi.js.map +1 -0
package/dist/console.html +899 -0
package/dist/docs/BENCHMARK.md +77 -0
package/dist/docs/CHEATSHEET.md +255 -0
package/dist/docs/EFFECTS_API_GUIDE.md +577 -0
package/dist/docs/EFFECTS_QUICK_REFERENCE.md +331 -0
package/dist/docs/FONT_CHARACTER_REFERENCE.md +219 -0
package/dist/docs/FREE_GLB_ASSETS.md +330 -0
package/dist/docs/FULLSCREEN_BUTTON_FEATURE.md +296 -0
package/dist/docs/GAMEPAD_SUPPORT.md +348 -0
package/dist/docs/GAME_IMPROVEMENTS.md +278 -0
package/dist/docs/GAME_QUALITY_STATUS.md +300 -0
package/dist/docs/MIGRATION_GUIDE.md +553 -0
package/dist/docs/NOVA64_3D_API.md +356 -0
package/dist/docs/NOVA64_API_REFERENCE.md +1406 -0
package/dist/docs/NOVA64_UI_API.md +503 -0
package/dist/docs/UI_SYSTEM_SUMMARY.md +445 -0
package/dist/docs/VOXEL_ENGINE_GUIDE.md +662 -0
package/dist/docs/VOXEL_QUICK_REFERENCE.md +386 -0
package/dist/docs/api-3d.html +750 -0
package/dist/docs/api-effects.html +385 -0
package/dist/docs/api-improvements.md +121 -0
package/dist/docs/api-skybox.html +407 -0
package/dist/docs/api-sprites.html +321 -0
package/dist/docs/api-voxel.html +337 -0
package/dist/docs/api.html +543 -0
package/dist/docs/assets.html +306 -0
package/dist/docs/audio.html +340 -0
package/dist/docs/blogs.html +286 -0
package/dist/docs/collision.html +316 -0
package/dist/docs/console.html +247 -0
package/dist/docs/editor.html +297 -0
package/dist/docs/font.html +247 -0
package/dist/docs/framebuffer.html +247 -0
package/dist/docs/fullscreen-button.html +297 -0
package/dist/docs/gpu-systems.html +247 -0
package/dist/docs/index.html +580 -0
package/dist/docs/input.html +491 -0
package/dist/docs/physics.html +311 -0
package/dist/docs/screens.html +311 -0
package/dist/docs/storage.html +311 -0
package/dist/docs/textinput.html +332 -0
package/dist/docs/ui.html +488 -0
package/dist/examples/3d-advanced/code.js +695 -0
package/dist/examples/adventure-comic-3d/code.js +342 -0
package/dist/examples/audio-lab/code.js +150 -0
package/dist/examples/boids-flocking/code.js +270 -0
package/dist/examples/crystal-cathedral-3d/code.js +706 -0
package/dist/examples/cyberpunk-city-3d/code.js +1383 -0
package/dist/examples/demoscene/README.md +192 -0
package/dist/examples/demoscene/code.js +1081 -0
package/dist/examples/demoscene/meta.json +21 -0
package/dist/examples/dungeon-crawler-3d/code.js +1117 -0
package/dist/examples/f-zero-nova-3d/code.js +865 -0
package/dist/examples/f-zero-nova-3d/code_old.js +1555 -0
package/dist/examples/fps-demo-3d/code.js +744 -0
package/dist/examples/game-of-life-3d/code.js +338 -0
package/dist/examples/generative-art/code.js +632 -0
package/dist/examples/hello-3d/code.js +325 -0
package/dist/examples/hello-skybox/code.js +183 -0
package/dist/examples/hello-world/code.js +19 -0
package/dist/examples/input-showcase/code.js +109 -0
package/dist/examples/instancing-demo/code.js +315 -0
package/dist/examples/minecraft-demo/code.js +387 -0
package/dist/examples/model-viewer-3d/code.js +114 -0
package/dist/examples/mystical-realm-3d/code.js +1203 -0
package/dist/examples/nature-explorer-3d/code.js +1318 -0
package/dist/examples/particles-demo/code.js +522 -0
package/dist/examples/pbr-showcase/code.js +140 -0
package/dist/examples/physics-demo-3d/code.js +948 -0
package/dist/examples/screen-demo/code.js +267 -0
package/dist/examples/shooter-demo-3d/code.js +1286 -0
package/dist/examples/space-combat-3d/IMPLEMENTATION_SUMMARY.md +109 -0
package/dist/examples/space-combat-3d/README.md +135 -0
package/dist/examples/space-combat-3d/code.js +1332 -0
package/dist/examples/space-harrier-3d/code.js +923 -0
package/dist/examples/star-fox-nova-3d/code.js +1116 -0
package/dist/examples/star-fox-nova-3d/code_backup.js +410 -0
package/dist/examples/star-fox-nova-3d/code_broken.js +1821 -0
package/dist/examples/storage-quest/code.js +209 -0
package/dist/examples/strider-demo-3d/IMPROVEMENT_OPTIONS.md +285 -0
package/dist/examples/strider-demo-3d/cache-test.html +132 -0
package/dist/examples/strider-demo-3d/code-fixed.js +582 -0
package/dist/examples/strider-demo-3d/code-old.js +1537 -0
package/dist/examples/strider-demo-3d/code.js +1462 -0
package/dist/examples/strider-demo-3d/code.js.bak2 +1169 -0
package/dist/examples/strider-demo-3d/fix-game.sh +53 -0
package/dist/examples/super-plumber-64/README.md +128 -0
package/dist/examples/super-plumber-64/code.js +1185 -0
package/dist/examples/super-plumber-64/index.html +88 -0
package/dist/examples/test-2d-overlay/code.js +32 -0
package/dist/examples/test-font/code.js +51 -0
package/dist/examples/test-minimal/code.js +21 -0
package/dist/examples/ui-demo/code.js +306 -0
package/dist/examples/wing-commander-space/README.md +180 -0
package/dist/examples/wing-commander-space/code.js +1285 -0
package/dist/examples/wizardry-3d/CHANGELOG.md +366 -0
package/dist/examples/wizardry-3d/code.js +3928 -0
package/dist/index.html +666 -0
package/dist/os9-shell/assets/index-DIHfrTaW.css +1 -0
package/dist/os9-shell/assets/index-KchE_ngx.js +483 -0
package/dist/os9-shell/assets/index-KchE_ngx.js.map +1 -0
package/dist/os9-shell/index.html +23 -0
package/dist/os9-shell/nova-icon.svg +12 -0
package/dist/runtime/api-2d.js +1158 -0
package/dist/runtime/api-3d/camera.js +73 -0
package/dist/runtime/api-3d/instancing.js +180 -0
package/dist/runtime/api-3d/lights.js +51 -0
package/dist/runtime/api-3d/materials.js +47 -0
package/dist/runtime/api-3d/models.js +84 -0
package/dist/runtime/api-3d/particles.js +296 -0
package/dist/runtime/api-3d/pbr.js +113 -0
package/dist/runtime/api-3d/primitives.js +304 -0
package/dist/runtime/api-3d/scene.js +169 -0
package/dist/runtime/api-3d/transforms.js +161 -0
package/dist/runtime/api-3d.js +166 -0
package/dist/runtime/api-effects.js +840 -0
package/dist/runtime/api-gameutils.js +476 -0
package/dist/runtime/api-generative.js +610 -0
package/dist/runtime/api-presets.js +85 -0
package/dist/runtime/api-skybox.js +232 -0
package/dist/runtime/api-sprites.js +100 -0
package/dist/runtime/api-voxel.js +712 -0
package/dist/runtime/api.js +201 -0
package/dist/runtime/assets.js +27 -0
package/dist/runtime/audio.js +114 -0
package/dist/runtime/collision.js +47 -0
package/dist/runtime/console.js +101 -0
package/dist/runtime/editor.js +233 -0
package/dist/runtime/font.js +233 -0
package/dist/runtime/framebuffer.js +28 -0
package/dist/runtime/fullscreen-button.js +185 -0
package/dist/runtime/gpu-canvas2d.js +47 -0
package/dist/runtime/gpu-threejs.js +643 -0
package/dist/runtime/gpu-webgl2.js +310 -0
package/dist/runtime/index.d.ts +682 -0
package/dist/runtime/index.js +22 -0
package/dist/runtime/input.js +225 -0
package/dist/runtime/logger.js +60 -0
package/dist/runtime/physics.js +101 -0
package/dist/runtime/screens.js +213 -0
package/dist/runtime/storage.js +38 -0
package/dist/runtime/store.js +151 -0
package/dist/runtime/textinput.js +68 -0
package/dist/runtime/ui/buttons.js +124 -0
package/dist/runtime/ui/panels.js +105 -0
package/dist/runtime/ui/text.js +86 -0
package/dist/runtime/ui/widgets.js +141 -0
package/dist/runtime/ui.js +111 -0
package/index.html +6 -1
package/package.json +9 -2
package/public/assets/sky/studio/nx.png +0 -0
package/public/assets/sky/studio/ny.png +0 -0
package/public/assets/sky/studio/nz.png +0 -0
package/public/assets/sky/studio/px.png +0 -0
package/public/assets/sky/studio/py.png +0 -0
package/public/assets/sky/studio/pz.png +0 -0
package/public/os9-shell/assets/index-KchE_ngx.js +483 -0
package/public/os9-shell/assets/index-KchE_ngx.js.map +1 -0
package/public/os9-shell/index.html +10 -1
package/runtime/api-2d.js +301 -21
package/runtime/api-3d/pbr.js +45 -1
package/runtime/api-3d.js +1 -0
package/runtime/api-effects.js +90 -3
package/runtime/api-gameutils.js +476 -0
package/runtime/api-generative.js +610 -0
package/runtime/api-skybox.js +54 -0
package/runtime/api-voxel.js +139 -28
package/runtime/gpu-threejs.js +13 -9
package/runtime/ui.js +2 -2
package/src/main.js +20 -0
package/public/os9-shell/assets/index-B1Uvacma.js +0 -32825
package/public/os9-shell/assets/index-B1Uvacma.js.map +0 -1

package/dist/docs/api-3d.html ADDED Viewed

@@ -0,0 +1,750 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>3D Graphics API - Nova64 Documentation</title>
+    <style>
+        :root {
+            --bg-primary: #0f1115;
+            --bg-secondary: #151822;
+            --bg-tertiary: #1a1d2e;
+            --text-primary: #dcdfe4;
+            --text-secondary: #99a1b3;
+            --accent-cyan: #00ffff;
+            --accent-magenta: #ff0080;
+            --accent-yellow: #ffff00;
+            --border: #2a324a;
+            --code-bg: #1a1d2e;
+        }
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            background: linear-gradient(135deg, var(--bg-primary) 0%, #1a1625 50%, var(--bg-primary) 100%);
+            background-attachment: fixed;
+            color: var(--text-primary);
+            line-height: 1.6;
+        }
+        .container {
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 20px;
+        }
+        header {
+            background: var(--bg-secondary);
+            border: 2px solid var(--accent-cyan);
+            border-radius: 12px;
+            padding: 30px;
+            margin-bottom: 30px;
+            box-shadow: 0 0 30px rgba(0, 255, 255, 0.3);
+        }
+        h1 {
+            color: var(--accent-cyan);
+            font-size: 2.5em;
+            text-shadow: 0 0 20px rgba(0, 255, 255, 0.6);
+            margin-bottom: 10px;
+        }
+        .back-link {
+            display: inline-block;
+            color: var(--accent-cyan);
+            text-decoration: none;
+            margin-bottom: 15px;
+            transition: color 0.3s ease;
+        }
+        .back-link:hover {
+            color: #33ffff;
+            text-decoration: underline;
+        }
+        .subtitle {
+            color: var(--text-secondary);
+            font-size: 1.1em;
+        }
+        section {
+            background: var(--bg-secondary);
+            border-left: 4px solid var(--accent-cyan);
+            padding: 25px;
+            margin-bottom: 30px;
+            border-radius: 8px;
+        }
+        h2 {
+            color: var(--accent-magenta);
+            font-size: 2em;
+            margin-bottom: 15px;
+            text-shadow: 0 0 10px rgba(255, 0, 128, 0.5);
+        }
+        h3 {
+            color: var(--accent-cyan);
+            font-size: 1.4em;
+            margin: 25px 0 15px 0;
+        }
+        .function {
+            background: var(--bg-tertiary);
+            border: 1px solid var(--border);
+            border-radius: 8px;
+            padding: 20px;
+            margin-bottom: 25px;
+        }
+        .function-sig {
+            font-family: 'Courier New', Courier, monospace;
+            font-size: 1.2em;
+            color: var(--accent-yellow);
+            margin-bottom: 15px;
+            padding: 10px;
+            background: var(--code-bg);
+            border-radius: 4px;
+            border-left: 3px solid var(--accent-yellow);
+        }
+        .param-list, .return-info {
+            margin: 15px 0;
+        }
+        .param {
+            padding: 8px 0;
+            border-bottom: 1px solid var(--border);
+        }
+        .param:last-child {
+            border-bottom: none;
+        }
+        .param-name {
+            color: var(--accent-cyan);
+            font-weight: bold;
+            font-family: 'Courier New', Courier, monospace;
+        }
+        .param-type {
+            color: var(--accent-magenta);
+            font-style: italic;
+            font-size: 0.9em;
+        }
+        .example {
+            background: var(--code-bg);
+            border: 1px solid var(--border);
+            border-radius: 8px;
+            padding: 20px;
+            margin: 15px 0;
+            overflow-x: auto;
+        }
+        .example-title {
+            color: var(--accent-yellow);
+            font-weight: bold;
+            margin-bottom: 10px;
+        }
+        pre {
+            margin: 0;
+            font-family: 'Courier New', Courier, monospace;
+            line-height: 1.5;
+        }
+        code {
+            color: var(--text-primary);
+        }
+        .note {
+            background: var(--bg-tertiary);
+            border-left: 4px solid var(--accent-yellow);
+            padding: 15px;
+            margin: 15px 0;
+            border-radius: 4px;
+        }
+        .note-title {
+            color: var(--accent-yellow);
+            font-weight: bold;
+            margin-bottom: 10px;
+        }
+        table {
+            width: 100%;
+            border-collapse: collapse;
+            margin: 15px 0;
+        }
+        th, td {
+            padding: 12px;
+            text-align: left;
+            border: 1px solid var(--border);
+        }
+        th {
+            background: var(--bg-tertiary);
+            color: var(--accent-cyan);
+            font-weight: bold;
+        }
+        tr:nth-child(even) {
+            background: var(--bg-tertiary);
+        }
+        footer {
+            text-align: center;
+            padding: 30px 20px;
+            color: var(--text-secondary);
+            border-top: 1px solid var(--border);
+            margin-top: 40px;
+        }
+        ul {
+            margin-left: 20px;
+            margin-top: 10px;
+        }
+        li {
+            margin: 5px 0;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <a href="index.html" class="back-link">← Back to Documentation Index</a>
+        <header>
+            <h1>🎮 3D Graphics API</h1>
+            <p class="subtitle">Complete 3D rendering system using Three.js for meshes, materials, lighting, and cameras</p>
+        </header>
+      <section>
+        <h2>📋 Overview</h2>
+        <p>The 3D Graphics API provides a complete Three.js-powered 3D rendering system with mesh management, primitive shapes, material system, lighting, and GLB model loading.</p>
+        <div class="note">
+          <div class="note-title">💡 Key Features</div>
+          <ul><li><strong>Mesh Management</strong> – ID-based system for creating and destroying 3D objects</li><li><strong>Primitives</strong> – Cube, sphere, plane, cylinder, cone, capsule, torus</li><li><strong>Material System</strong> – PBR materials with metalness, roughness, and environment map reflections</li><li><strong>Transforms</strong> – setPosition, setRotation, setScale, rotateMesh, getPosition</li><li><strong>Model Loading</strong> – GLB/GLTF model support with async loading</li><li><strong>Lighting</strong> – Directional, point, and ambient lights with fog</li></ul>
+        </div>
+      </section>
+      <section>
+        <h2>🎨 Mesh Creation</h2>
+        <div class="function">
+          <div class="function-sig">createCube(size, color, position, options)</div>
+          <p>Creates a cube mesh with the specified properties.</p>
+          <div class="param-list">
+              <div class="param">
+                <span class="param-name">size</span>
+                <span class="param-type">number</span> - Cube dimensions (default: 1)
+              </div>
+              <div class="param">
+                <span class="param-name">color</span>
+                <span class="param-type">hex number</span> - Color in hex format (e.g., 0xff0000 for red)
+              </div>
+              <div class="param">
+                <span class="param-name">position</span>
+                <span class="param-type">array [x, y, z]</span> - Initial position (default: [0, 0, 0])
+              </div>
+              <div class="param">
+                <span class="param-name">options</span>
+                <span class="param-type">object</span> - Material options (metalness, roughness, etc.)
+              </div>
+          </div>
+          <div class="return-info">
+            <strong>Returns:</strong> <span class="param-type">number</span> - Mesh ID for later reference
+          </div>
+          <div class="example">
+            <div class="example-title">Example:</div>
+            <pre><code>const cubeId = createCube(2, 0xff0000, [0, 1, 0], { metalness: 0.5 });</code></pre>
+          </div>
+        </div>
+        <div class="function">
+          <div class="function-sig">createSphere(radius, color, position, segments, options)</div>
+          <p>Creates a sphere mesh.</p>
+          <div class="param-list">
+              <div class="param">
+                <span class="param-name">radius</span>
+                <span class="param-type">number</span> - Sphere radius (default: 1)
+              </div>
+              <div class="param">
+                <span class="param-name">color</span>
+                <span class="param-type">hex number</span> - Sphere color
+              </div>
+              <div class="param">
+                <span class="param-name">position</span>
+                <span class="param-type">array [x, y, z]</span> - Initial position
+              </div>
+              <div class="param">
+                <span class="param-name">segments</span>
+                <span class="param-type">number</span> - Detail level (default: 8)
+              </div>
+              <div class="param">
+                <span class="param-name">options</span>
+                <span class="param-type">object</span> - Material options
+              </div>
+          </div>
+          <div class="return-info">
+            <strong>Returns:</strong> <span class="param-type">number</span> - Mesh ID
+          </div>
+          <div class="example">
+            <div class="example-title">Example:</div>
+            <pre><code>const ballId = createSphere(1.5, 0x00ff00, [5, 2, 0], 16);</code></pre>
+          </div>
+        </div>
+        <div class="function">
+          <div class="function-sig">createPlane(width, height, color, position)</div>
+          <p>Creates a flat plane mesh (ground, walls, etc.).</p>
+          <div class="param-list">
+              <div class="param">
+                <span class="param-name">width</span>
+                <span class="param-type">number</span> - Plane width
+              </div>
+              <div class="param">
+                <span class="param-name">height</span>
+                <span class="param-type">number</span> - Plane height
+              </div>
+              <div class="param">
+                <span class="param-name">color</span>
+                <span class="param-type">hex number</span> - Plane color
+              </div>
+              <div class="param">
+                <span class="param-name">position</span>
+                <span class="param-type">array [x, y, z]</span> - Initial position
+              </div>
+          </div>
+          <div class="return-info">
+            <strong>Returns:</strong> <span class="param-type">number</span> - Mesh ID
+          </div>
+          <div class="example">
+            <div class="example-title">Example:</div>
+            <pre><code>const groundId = createPlane(100, 100, 0x808080, [0, -1, 0]);</code></pre>
+          </div>
+        </div>
+        <div class="function">
+          <div class="function-sig">createCylinder(radiusTop, radiusBottom, height, color, position, options?)</div>
+          <p>Creates a cylinder (or truncated cone when radii differ).</p>
+          <div class="param-list">
+            <div class="param"><span class="param-name">radiusTop</span> <span class="param-type">number</span> – Top face radius</div>
+            <div class="param"><span class="param-name">radiusBottom</span> <span class="param-type">number</span> – Bottom face radius (set equal to <code>radiusTop</code> for a true cylinder)</div>
+            <div class="param"><span class="param-name">height</span> <span class="param-type">number</span> – Cylinder height</div>
+            <div class="param"><span class="param-name">color</span> <span class="param-type">hex number</span> – Colour</div>
+            <div class="param"><span class="param-name">position</span> <span class="param-type">array [x,y,z]</span> – World position</div>
+            <div class="param"><span class="param-name">options</span> <span class="param-type">object</span> – Material options</div>
+          </div>
+          <div class="return-info"><strong>Returns:</strong> <span class="param-type">number</span> – Mesh ID</div>
+          <div class="example">
+            <div class="example-title">Example</div>
+            <pre><code>const pillar = createCylinder(0.5, 0.5, 4, 0x888888, [3, 2, 0]);
+const barrel = createCylinder(0.6, 0.8, 1.2, 0x8B4513, [0, 0.6, 5]);</code></pre>
+          </div>
+        </div>
+        <div class="function">
+          <div class="function-sig">createCone(radius, height, color, position, options?)</div>
+          <p>Creates a cone — useful for projectiles, trees, directional indicators, and hat shapes.</p>
+          <div class="param-list">
+            <div class="param"><span class="param-name">radius</span> <span class="param-type">number</span> – Base radius</div>
+            <div class="param"><span class="param-name">height</span> <span class="param-type">number</span> – Cone height</div>
+            <div class="param"><span class="param-name">color</span> <span class="param-type">hex number</span> – Colour</div>
+            <div class="param"><span class="param-name">position</span> <span class="param-type">array [x,y,z]</span> – World position</div>
+            <div class="param"><span class="param-name">options</span> <span class="param-type">object</span> – Material options</div>
+          </div>
+          <div class="return-info"><strong>Returns:</strong> <span class="param-type">number</span> – Mesh ID</div>
+          <div class="example">
+            <div class="example-title">Example</div>
+            <pre><code>const tree = createCone(1.5, 4, 0x228b22, [0, 2, -5]);
+const bullet = createCone(0.1, 0.4, 0xffff00, [px, py, pz]);</code></pre>
+          </div>
+        </div>
+        <div class="function">
+          <div class="function-sig">createCapsule(radius, height, color, position, options?)</div>
+          <p>Creates a capsule (cylinder capped with hemispheres) — ideal for humanoid character bodies and rounded obstacles.</p>
+          <div class="param-list">
+            <div class="param"><span class="param-name">radius</span> <span class="param-type">number</span> – Hemisphere radius</div>
+            <div class="param"><span class="param-name">height</span> <span class="param-type">number</span> – Total capsule height (including caps)</div>
+            <div class="param"><span class="param-name">color</span> <span class="param-type">hex number</span> – Colour</div>
+            <div class="param"><span class="param-name">position</span> <span class="param-type">array [x,y,z]</span> – World position</div>
+            <div class="param"><span class="param-name">options</span> <span class="param-type">object</span> – Material options</div>
+          </div>
+          <div class="return-info"><strong>Returns:</strong> <span class="param-type">number</span> – Mesh ID</div>
+          <div class="example">
+            <div class="example-title">Example</div>
+            <pre><code>const player = createCapsule(0.4, 1.8, 0x4488ff, [0, 0.9, 0]);</code></pre>
+          </div>
+        </div>
+        <div class="function">
+          <div class="function-sig">createTorus(radius, tube, color, position, options?)</div>
+          <p>Creates a torus (donut shape) — good for rings, portals, halos, and pickup items.</p>
+          <div class="param-list">
+            <div class="param"><span class="param-name">radius</span> <span class="param-type">number</span> – Distance from the torus centre to the tube centre</div>
+            <div class="param"><span class="param-name">tube</span> <span class="param-type">number</span> – Tube radius</div>
+            <div class="param"><span class="param-name">color</span> <span class="param-type">hex number</span> – Colour</div>
+            <div class="param"><span class="param-name">position</span> <span class="param-type">array [x,y,z]</span> – World position</div>
+            <div class="param"><span class="param-name">options</span> <span class="param-type">object</span> – Material options</div>
+          </div>
+          <div class="return-info"><strong>Returns:</strong> <span class="param-type">number</span> – Mesh ID</div>
+          <div class="example">
+            <div class="example-title">Example</div>
+            <pre><code>const ring = createTorus(2, 0.3, 0xffd700, [0, 5, 0]); // golden ring portal</code></pre>
+          </div>
+        </div>
+      </section>
+      <section>
+        <h2>🔧 Mesh Management</h2>
+        <div class="function">
+          <div class="function-sig">getMesh(meshId)</div>
+          <p>Retrieves a mesh object by its ID for direct manipulation.</p>
+          <div class="param-list">
+              <div class="param">
+                <span class="param-name">meshId</span>
+                <span class="param-type">number</span> - ID returned from create function
+              </div>
+          </div>
+          <div class="return-info">
+            <strong>Returns:</strong> <span class="param-type">THREE.Mesh</span> - Three.js mesh object
+          </div>
+          <div class="example">
+            <div class="example-title">Example:</div>
+            <pre><code>const mesh = getMesh(cubeId);
+mesh.rotation.y += 0.01;</code></pre>
+          </div>
+        </div>
+        <div class="function">
+          <div class="function-sig">destroyMesh(meshId) &nbsp;·&nbsp; removeMesh(meshId)</div>
+          <p>Removes a mesh from the scene and frees its GPU resources. Both names are identical — either works.</p>
+          <div class="param-list">
+              <div class="param">
+                <span class="param-name">meshId</span>
+                <span class="param-type">number</span> - Mesh ID to destroy
+              </div>
+          </div>
+          <div class="return-info">
+            <strong>Returns:</strong> <span class="param-type">void</span> - No return value
+          </div>
+          <div class="example">
+            <div class="example-title">Example:</div>
+            <pre><code>destroyMesh(cubeId); // or removeMesh(cubeId) — both are identical</code></pre>
+          </div>
+        </div>
+        <div class="function">
+          <div class="function-sig">setMeshVisible(meshId, visible)</div>
+          <p>Shows or hides a mesh without removing it from the scene.</p>
+          <div class="param-list">
+            <div class="param"><span class="param-name">meshId</span> <span class="param-type">number</span> – Mesh ID</div>
+            <div class="param"><span class="param-name">visible</span> <span class="param-type">boolean</span> – <code>true</code> to show, <code>false</code> to hide</div>
+          </div>
+          <div class="example">
+            <div class="example-title">Example</div>
+            <pre><code>setMeshVisible(ghostId, false); // hide without destroying
+setMeshVisible(ghostId, true);  // show again</code></pre>
+          </div>
+        </div>
+      </section>
+      <section>
+        <h2>🔄 Transforms</h2>
+        <div class="function">
+          <div class="function-sig">setPosition(meshId, x, y, z)</div>
+          <p>Moves a mesh to an absolute world position.</p>
+          <div class="param-list">
+            <div class="param"><span class="param-name">meshId</span> <span class="param-type">number</span> – Mesh ID</div>
+            <div class="param"><span class="param-name">x, y, z</span> <span class="param-type">number</span> – World coordinates</div>
+          </div>
+          <div class="example">
+            <div class="example-title">Example</div>
+            <pre><code>setPosition(enemyMesh, enemy.x, enemy.y, enemy.z);</code></pre>
+          </div>
+        </div>
+        <div class="function">
+          <div class="function-sig">setRotation(meshId, rx, ry, rz)</div>
+          <p>Sets the absolute rotation of a mesh (Euler angles in radians).</p>
+          <div class="param-list">
+            <div class="param"><span class="param-name">meshId</span> <span class="param-type">number</span> – Mesh ID</div>
+            <div class="param"><span class="param-name">rx, ry, rz</span> <span class="param-type">number</span> – Rotation angles in radians</div>
+          </div>
+          <div class="example">
+            <div class="example-title">Example</div>
+            <pre><code>setRotation(wheelId, 0, 0, Math.PI / 2);</code></pre>
+          </div>
+        </div>
+        <div class="function">
+          <div class="function-sig">rotateMesh(meshId, dx, dy, dz)</div>
+          <p>Adds to the current rotation of a mesh each frame — ideal for spin animations.</p>
+          <div class="param-list">
+            <div class="param"><span class="param-name">meshId</span> <span class="param-type">number</span> – Mesh ID</div>
+            <div class="param"><span class="param-name">dx, dy, dz</span> <span class="param-type">number</span> – Rotation delta in radians (typically <code>dt * speed</code>)</div>
+          </div>
+          <div class="example">
+            <div class="example-title">Example</div>
+            <pre><code>// In update(dt):
+rotateMesh(orbId, 0, dt * 1.5, 0); // spin around Y axis</code></pre>
+          </div>
+        </div>
+        <div class="function">
+          <div class="function-sig">setScale(meshId, sx, sy, sz)</div>
+          <p>Scales a mesh along each axis.</p>
+          <div class="param-list">
+            <div class="param"><span class="param-name">meshId</span> <span class="param-type">number</span> – Mesh ID</div>
+            <div class="param"><span class="param-name">sx, sy, sz</span> <span class="param-type">number</span> – Scale factors</div>
+          </div>
+          <div class="example">
+            <div class="example-title">Example</div>
+            <pre><code>setScale(hitboxId, 2, 0.5, 2); // flatten and widen</code></pre>
+          </div>
+        </div>
+        <div class="function">
+          <div class="function-sig">getPosition(meshId)</div>
+          <p>Returns the current world position of a mesh.</p>
+          <div class="return-info"><strong>Returns:</strong> <span class="param-type">[x, y, z]</span></div>
+          <div class="example">
+            <div class="example-title">Example</div>
+            <pre><code>const [x, y, z] = getPosition(bulletMesh);</code></pre>
+          </div>
+        </div>
+      </section>
+      <section>
+        <h2>📦 Model Loading</h2>
+        <div class="function">
+          <div class="function-sig">loadModel(url, position, scale)</div>
+          <p>Loads a GLB/GLTF 3D model asynchronously.</p>
+          <div class="param-list">
+              <div class="param">
+                <span class="param-name">url</span>
+                <span class="param-type">string</span> - Path to .glb or .gltf file
+              </div>
+              <div class="param">
+                <span class="param-name">position</span>
+                <span class="param-type">array [x, y, z]</span> - Model position (default: [0,0,0])
+              </div>
+              <div class="param">
+                <span class="param-name">scale</span>
+                <span class="param-type">number</span> - Uniform scale multiplier (default: 1)
+              </div>
+          </div>
+          <div class="return-info">
+            <strong>Returns:</strong> <span class="param-type">Promise<number></span> - Promise resolving to mesh ID
+          </div>
+          <div class="example">
+            <div class="example-title">Example:</div>
+            <pre><code>const modelId = await loadModel("/models/character.glb", [0, 0, 0], 2);</code></pre>
+          </div>
+        </div>
+      </section>
+      <section>
+        <h2>💡 Lighting</h2>
+        <div class="function">
+          <div class="function-sig">setLightDirection(x, y, z)</div>
+          <p>Sets the direction of the scene's main directional light (like the sun). The vector points <em>toward</em> the light source.</p>
+          <div class="param-list">
+            <div class="param"><span class="param-name">x, y, z</span> <span class="param-type">number</span> – Light direction vector</div>
+          </div>
+          <div class="example">
+            <div class="example-title">Example</div>
+            <pre><code>setLightDirection(-0.5, -1, -0.3); // angled overhead sun</code></pre>
+          </div>
+        </div>
+        <div class="function">
+          <div class="function-sig">setLightColor(color)</div>
+          <p>Sets the colour of the main directional light.</p>
+          <div class="param-list">
+            <div class="param"><span class="param-name">color</span> <span class="param-type">hex number</span> – Light colour</div>
+          </div>
+          <div class="example">
+            <div class="example-title">Example</div>
+            <pre><code>setLightColor(0xffffdd); // warm daylight
+setLightColor(0x4444aa); // cool moonlight</code></pre>
+          </div>
+        </div>
+        <div class="function">
+          <div class="function-sig">setAmbientLight(color, intensity?)</div>
+          <p>Sets the overall scene ambient lighting — fills in shadows and ensures dark areas are still visible.</p>
+          <div class="param-list">
+            <div class="param"><span class="param-name">color</span> <span class="param-type">hex number</span> – Ambient colour</div>
+            <div class="param"><span class="param-name">intensity</span> <span class="param-type">number</span> – Strength (default: 1.0)</div>
+          </div>
+          <div class="example">
+            <div class="example-title">Example</div>
+            <pre><code>setAmbientLight(0x404060, 0.8); // cool, slightly dim fill light</code></pre>
+          </div>
+        </div>
+        <div class="function">
+          <div class="function-sig">createPointLight(color, intensity, distance, x, y, z)</div>
+          <p>Creates a positional point light that casts light in all directions from a specific world position — flames, lamps, explosions.</p>
+          <div class="param-list">
+            <div class="param"><span class="param-name">color</span> <span class="param-type">hex number</span> – Light colour</div>
+            <div class="param"><span class="param-name">intensity</span> <span class="param-type">number</span> – Brightness</div>
+            <div class="param"><span class="param-name">distance</span> <span class="param-type">number</span> – Max range (0 = unlimited)</div>
+            <div class="param"><span class="param-name">x, y, z</span> <span class="param-type">number</span> – World position</div>
+          </div>
+          <div class="return-info"><strong>Returns:</strong> <span class="param-type">number</span> – Light ID (pass to <code>setPointLightPosition</code>, <code>removeLight</code>)</div>
+          <div class="example">
+            <div class="example-title">Example</div>
+            <pre><code>const torchLight = createPointLight(0xff8800, 2, 15, torchX, torchY, torchZ);
+// Later, move it:
+setPointLightPosition(torchLight, newX, newY, newZ);
+// Remove:
+removeLight(torchLight);</code></pre>
+          </div>
+        </div>
+        <div class="function">
+          <div class="function-sig">setFog(color, near, far)</div>
+          <p>Enables distance fog, fading objects to <code>color</code> between <code>near</code> and <code>far</code> world units.</p>
+          <div class="param-list">
+            <div class="param"><span class="param-name">color</span> <span class="param-type">hex number</span> – Fog colour (usually matches your skybox)</div>
+            <div class="param"><span class="param-name">near</span> <span class="param-type">number</span> – Distance at which fog starts</div>
+            <div class="param"><span class="param-name">far</span> <span class="param-type">number</span> – Distance at which objects are fully invisible</div>
+          </div>
+          <div class="example">
+            <div class="example-title">Example</div>
+            <pre><code>setFog(0x202040, 30, 80);  // atmospheric night fog
+clearFog();                // remove fog entirely</code></pre>
+          </div>
+        </div>
+      </section>
+      <section>
+        <h2>🔮 PBR Materials</h2>
+        <p>Physically Based Rendering properties can be applied to any mesh after creation to achieve metallic, rough, or reflective looks.</p>
+        <div class="function">
+          <div class="function-sig">setPBRProperties(meshId, options)</div>
+          <p>Applies PBR material properties to an existing mesh. Works best when an image skybox is set (provides IBL reflections).</p>
+          <div class="param-list">
+            <div class="param"><span class="param-name">meshId</span> <span class="param-type">number</span> – Target mesh ID</div>
+            <div class="param"><span class="param-name">options.metalness</span> <span class="param-type">number</span> – 0 = dielectric, 1 = fully metallic</div>
+            <div class="param"><span class="param-name">options.roughness</span> <span class="param-type">number</span> – 0 = mirror smooth, 1 = fully matte</div>
+            <div class="param"><span class="param-name">options.envMapIntensity</span> <span class="param-type">number</span> – Strength of environment reflections (default: 1.0)</div>
+            <div class="param"><span class="param-name">options.color</span> <span class="param-type">hex number</span> – Override material colour</div>
+          </div>
+          <div class="example">
+            <div class="example-title">Example — PBR material grid</div>
+            <pre><code>// Mirror-like chrome ball
+const chrome = createSphere(1, 0xffffff, [0, 1, 0]);
+setPBRProperties(chrome, { metalness: 1.0, roughness: 0.0 });
+// Brushed metal
+const brushed = createSphere(1, 0xaaaaaa, [3, 1, 0]);
+setPBRProperties(brushed, { metalness: 1.0, roughness: 0.5 });
+// Matte rubber
+const rubber = createSphere(1, 0x222222, [6, 1, 0]);
+setPBRProperties(rubber, { metalness: 0.0, roughness: 1.0 });</code></pre>
+          </div>
+        </div>
+        <div class="note">
+          <div class="note-title">💡 Getting the best results</div>
+          <p>Call <code>createImageSkybox()</code> in your <code>init()</code> before adding PBR meshes. The skybox is used as an environment map — metallic and smooth surfaces will reflect it realistically.</p>
+        </div>
+      </section>
+        <footer>
+            <p>Nova64 Fantasy Console © 2026 | <a href="index.html" style="color: var(--accent-cyan);">Back to Documentation</a></p>
+        </footer>
+    </div>
+</body>
+</html>