mcerqua/openvoiceui/threejs-canvas-integration

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="page-icon" content="game">
<title>My 3D Game</title>
<style>
  html, body { margin: 0; overflow: hidden; background: #000; font-family: system-ui, -apple-system, sans-serif; }
  #scene { position: fixed; inset: 0; display: block; }
  .hud { position: fixed; z-index: 10; color: #e2e8f0; font-size: 14px; text-shadow: 0 1px 3px rgba(0,0,0,.8); }
  #stats { top: var(--canvas-safe-top, 16px); left: var(--canvas-safe-left, 16px); pointer-events: none; }
  #menu { top: var(--canvas-safe-top, 16px); right: var(--canvas-safe-right, 16px); width: 44px; height: 44px;
          display: grid; place-items: center; border-radius: 10px; cursor: pointer;
          background: rgba(15,23,42,.75); border: 1px solid rgba(148,163,184,.3); }
  #loading { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: #0d1117; color: #e2e8f0; }
</style>
<!-- The import map must come before any type="module" script. Pin the 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>
</head>
<body>
<div id="loading">Loading...</div>
<div id="stats" class="hud">Score <b id="score">0</b></div>
<button id="menu" class="hud" aria-label="Menu">
  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
    <line x1="4" y1="6" x2="20" y2="6"/><line x1="4" y1="12" x2="20" y2="12"/><line x1="4" y1="18" x2="20" y2="18"/></svg>
</button>
<canvas id="scene"></canvas>
<script type="module">
import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 
const canvas = document.getElementById('scene');
const renderer = new THREE.WebGLRenderer({ canvas, antialias: true });
renderer.setPixelRatio(Math.min(devicePixelRatio, 2));
renderer.setSize(innerWidth, innerHeight);
renderer.shadowMap.enabled = true;
renderer.toneMapping = THREE.ACESFilmicToneMapping;
 
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x0d1117);
const camera = new THREE.PerspectiveCamera(60, innerWidth / innerHeight, 0.1, 1000);
camera.position.set(0, 3, 8);
const controls = new OrbitControls(camera, canvas);
controls.enableDamping = true;
controls.maxPolarAngle = Math.PI * 0.48;          // keep the camera above the ground
 
scene.add(new THREE.AmbientLight(0xffffff, 0.4));
const sun = new THREE.DirectionalLight(0xffffff, 1.2);
sun.position.set(5, 10, 5); sun.castShadow = true; scene.add(sun);
 
const ground = new THREE.Mesh(new THREE.PlaneGeometry(20, 20), new THREE.MeshStandardMaterial({ color: 0x1e293b }));
ground.rotation.x = -Math.PI / 2; ground.receiveShadow = true; scene.add(ground);
const cube = new THREE.Mesh(new THREE.BoxGeometry(1, 1, 1), new THREE.MeshStandardMaterial({ color: 0x3b82f6 }));
cube.position.y = 1; cube.castShadow = true; scene.add(cube);
 
document.getElementById('menu').onclick = () =>
  window.parent.postMessage({ type: 'canvas-action', action: 'menu' }, '*');
 
const clock = new THREE.Clock();
renderer.setAnimationLoop(() => {
  const dt = clock.getDelta();                    // use delta time for all movement
  cube.rotation.y += dt * 0.8;
  controls.update();
  renderer.render(scene, camera);
});
addEventListener('resize', () => {
  camera.aspect = innerWidth / innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(innerWidth, innerHeight);
});
document.getElementById('loading').remove();
</script>
</body>
</html>

# after writing /app/runtime/canvas-pages/my-game.html
curl -s http://localhost:5001/api/canvas/lint/my-game -H "X-Agent-Key: ${AGENT_API_KEY:-}"
# reply with words plus the tag:  "Your game is up. [CANVAS:my-game]"
curl -s http://localhost:5001/api/canvas/context -H "X-Agent-Key: ${AGENT_API_KEY:-}"   # current_page should be my-game.html

mkdir -p /app/runtime/canvas-pages/my-game-assets/models
curl -L -o /app/runtime/canvas-pages/my-game-assets/models/ship.glb "<model URL>"

import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
const gltf = await new GLTFLoader().loadAsync('/pages/my-game-assets/models/ship.glb');
scene.add(gltf.scene);
const tex = new THREE.TextureLoader().load('/pages/my-game-assets/textures/metal.jpg');
tex.colorSpace = THREE.SRGBColorSpace;

const SAVE_URL = '/api/canvas/data/my-game-save.json';
const api = (url, opts) => (window.authFetch ? window.authFetch(url, opts) : fetch(url, opts));
async function loadSave() {
  try { const r = await api(SAVE_URL); if (r.ok) return await r.json(); } catch (e) {}
  return {};                                     // GET returns {} until the first save
}
async function writeSave(state) {
  const r = await api(SAVE_URL, { method: 'POST',
    headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(state) });
  return r.ok;                                   // server answers {"ok": true}
}