Corner shop with swappable parts

// stylized-town/shop-01@0.2.0 in a plain Three.js scene
// Generated by the Agent-Ready Assets integration guide (target: plain Three.js, SDK 0.5.1, tested with three 0.186.1).
// The files are served from this project's own public/ folder (installed with `npx agent-ready-assets ...`):
// no CDN at runtime, no decoders, no Blender.
import * as THREE from 'three';
import { AssetLibrary, isCustomizationError } from '@agent-ready-assets/runtime-three';

const KIT_URL = '/assets/stylized-town/kit.json';
const ASSET = 'stylized-town/shop-01@0.2.0';

const renderer = new THREE.WebGLRenderer({ antialias: true, preserveDrawingBuffer: true });
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.outputColorSpace = THREE.SRGBColorSpace;
document.body.style.margin = '0';
document.body.appendChild(renderer.domElement);

const scene = new THREE.Scene();
scene.background = new THREE.Color('#e9e4da');
scene.add(new THREE.HemisphereLight(0xffffff, 0x8d7c64, 1.4));
const sun = new THREE.DirectionalLight(0xffffff, 2.0);
sun.position.set(4, 8, 5);
scene.add(sun);
const camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 0.05, 400);

/** Points the camera at everything that was loaded (3/4 view). */
function frame(target: THREE.Object3D): void {
  const box = new THREE.Box3().setFromObject(target);
  const center = box.getCenter(new THREE.Vector3());
  const radius = Math.max(box.getSize(new THREE.Vector3()).length() / 2, 0.5);
  const dist = radius / Math.sin(THREE.MathUtils.degToRad(camera.fov / 2));
  camera.position.copy(center).add(new THREE.Vector3(0.55, 0.5, 1).normalize().multiplyScalar(dist * 0.95));
  camera.lookAt(center);
  camera.updateProjectionMatrix();
}

window.addEventListener('resize', () => {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.render(scene, camera);
});

async function main(): Promise<void> {
  const library = await AssetLibrary.fromKit(KIT_URL); // verifies every file against the sha256 pins first
  const original = await library.loadAsset(ASSET);
  scene.add(original.object);
  // Only the capabilities returned by get_customization_capabilities exist (here: front-door, awning, wall-color).
  // Each customized instance gets its own material copies and mounted parts; the original and the cached GLB stay unchanged.
  const customized = await library.instantiate(ASSET, {"front-door":"door-01","awning":false,"wall-color":"paving"});
  customized.object.position.x = 4.85;
  scene.add(customized.object);
  frame(scene);
  renderer.render(scene, camera);
  renderer.domElement.dataset.ready = 'true'; // handy for tests: the scene finished loading
}

main().catch((error: unknown) => {
  // Unsupported or invalid customizations are refused with a structured error instead of being approximated.
  const message = isCustomizationError(error) ? `${error.code}: ${error.message}` : String(error);
  renderer.domElement.dataset.error = message;
  console.error(message);
});

// stylized-town/shop-01@0.2.0 with React Three Fiber
// Generated by the Agent-Ready Assets integration guide (target: React Three Fiber, SDK 0.5.1, tested with three 0.186.1).
// Assets are served from this project's own public/ folder; no CDN, no Blender.
import { StrictMode, useEffect, useState } from 'react';
import { createRoot } from 'react-dom/client';
import { Canvas } from '@react-three/fiber';
import { Asset, AssetLibraryProvider } from '@agent-ready-assets/runtime-r3f';
import { AssetLibrary } from '@agent-ready-assets/runtime-three';

const KIT_URL = '/assets/stylized-town/kit.json';
const ASSET = 'stylized-town/shop-01@0.2.0';

/** Marks the canvas once every <Asset> reported onReady (handy for tests). */
function useReadyFlag(expected: number): () => void {
  const [count, setCount] = useState(0);
  useEffect(() => {
    if (count >= expected) document.querySelector('canvas')?.setAttribute('data-ready', 'true');
  }, [count, expected]);
  return () => setCount((n) => n + 1);
}

function App({ library }: { library: AssetLibrary }) {
  const onReady = useReadyFlag(2);
  return (
    <Canvas camera={{ position: [7.09, 4.91, 10.36], fov: 40 }} gl={{ preserveDrawingBuffer: true }}>
      <color attach="background" args={['#e9e4da']} />
      <hemisphereLight args={[0xffffff, 0x8d7c64, 1.4]} />
      <directionalLight position={[4, 8, 5]} intensity={2} />
      <AssetLibraryProvider library={library}>
        <Asset assetId={ASSET} position={[-2.425, 0, 0]} onReady={onReady} onError={(e) => console.error(e)} />
        {/* customize accepts only declared capabilities; anything else calls onError with UNSUPPORTED_OPERATION */}
        <Asset assetId={ASSET} customize={{"front-door":"door-01","awning":false,"wall-color":"paving"}} position={[2.425, 0, 0]} onReady={onReady} onError={(e) => console.error(e)} />
      </AssetLibraryProvider>
    </Canvas>
  );
}

AssetLibrary.fromKit(KIT_URL).then(
  (library) => createRoot(document.getElementById('root')!).render(<StrictMode><App library={library} /></StrictMode>),
  (error: unknown) => console.error(error),
);