Ejecuta cualquier Skill en Manus
con un clic

Ejecuta cualquier Skill en Manus con un clic

tinyworld-webxr

Estrellas1466

Forks195

Actualizado25 de junio de 2026 a las 23:57

Use when adding or modifying WebXR, AR placement, VR immersion, headset controller input, or XR rendering modes in Tiny World Builder.

Instalación

Instalar con Codex o Claude Copia este prompt, pégalo en Codex, Claude u otro asistente, y deja que revise la página de la skill y la instale por ti.

Ejecutar en Manus

Fuente

jasonkneen

jasonkneen/tiny-world-builder

Abrir repositorio de GitHub Ver repositorios del creador

Descarga

Ejecutar en Manus

Ocupaciones relacionadasSOC

Basado en la clasificación ocupacional SOC

Desarrolladores webOcupaciones informáticas y matemáticas·SOC 15-1254

SKILL.md

readonly

name	tinyworld-webxr
description	Use when adding or modifying WebXR, AR placement, VR immersion, headset controller input, or XR rendering modes in Tiny World Builder.

Tiny World WebXR

Tiny World uses a pinned global THREE r185 compatibility bundle (vendor/three/tinyworld-three.r185.min.js), not runtime module imports or ARButton/VRButton addons. Keep WebXR integration vanilla and single-file inside tiny-world-builder.html.

Platform split — WebXR covers "Google" AR (Android Chrome / Quest, via immersive-ar + hit-test), but Apple devices have no WebXR. iOS/iPadOS web AR is AR Quick Look only: an <a rel="ar"> pointing at a .usdz opens the system viewer, which finds a surface, places the model, and lets the user walk around it. So both paths must exist for full coverage.

Patterns:

For Apple AR, export the live world to USDZ on demand with THREE.USDZExporter from the r185 global bundle. USDZExporter only understands MeshStandardMaterial, so snapshot worldGroup into a fresh group, convert each Lambert/Basic/Shader material to a Standard equivalent (preserving colour/emissive/map), recentre on the origin with the base at y=0, and scale to a tabletop size. Wrap the resulting Uint8Array in a model/vnd.usdz+zip Blob → object URL, and launch via an <a rel="ar"> that contains a single <img> child (Safari's requirement) clicked programmatically.
Gate the Apple AR button on document.createElement('a').relList.supports('ar'); gate the WebXR buttons on navigator.xr support. Show the XR panel if either is available so iOS users see just the Apple AR button.
Enable WebXR with renderer.xr.enabled = true and drive the main loop with renderer.setAnimationLoop(animate) so desktop and headset frames share one path.
Keep headset transforms on xrWorldRoot, a scene-level parent for board/runtime meshes. Do not scale/move worldGroup alone; hover, selection, clouds, weather, smoke, crop duster, and previews must stay in the same local world space.
Keep controllers/reticles in scene, not xrWorldRoot; they are physical XR-space objects.
For AR desk mode, request immersive-ar with required hit-test, optional anchors, and a domOverlay root. Use the reticle pose to set xrWorldRoot and use anchors when available, but gracefully fall back to the last hit-test pose.
For floating mode, prefer immersive-ar, then fall back to immersive-vr; place the mini board in front of the current XR camera.
For inside mode, use immersive-vr with local-floor and leave xrWorldRoot at meter scale (scale = 1) so one tile is walkable room scale.
When picking tiles from controllers, raycast against worldGroup.children, then convert h.point through xrWorldRoot.worldToLocal() before deriving tile-local offsets. Desktop pointer picking can keep using screen-space raycasts.
Restore scene.background, xrWorldRoot transform/visibility, reticle state, and UI state on XR session end or failure.

Validation:

npm test and the inline script node --check must pass.
Real AR hit-test/VR entry requires HTTPS plus a headset/browser with WebXR support; browser smoke tests can only verify non-XR fallback UI and syntax.

Más de este repositorio

mismo repositorio

tinyworld-render-performance

jasonkneen/tiny-world-builder

Use when changing Tiny World Builder renderer setup, shadows, smoke, voxel clouds, ghost board render cost, frame loop, or GPU performance.

2026-07-011.5k

tinyworld-island-viewer

jasonkneen/tiny-world-builder

Use when changing the first-class Island Viewer shell, sequential generated-island viewer routing, or viewer-scoped graphics defaults.

2026-06-291.5k

tinyworld-lowpoly-stylized-3d

jasonkneen/tiny-world-builder

Use when adding, importing, designing, reviewing, or animating low-poly / stylized 3D assets in Tiny World Builder, including Three.js procedural meshes, GLB/GLTF assets, Poly Pizza models, material palettes, scale/orientation, silhouettes, clouds/planes/crop dusters, and toolbar thumbnails.

2026-06-291.5k

tinyworld-runtime-state

jasonkneen/tiny-world-builder

Use when adding or changing persisted user state — settings defaults, audio, camera/orbit, panel positions, feature flags, and the in-app "Save Defaults" pipeline that snapshots localStorage into tinyworld-defaults.json. Also covers the inline-script regex gotcha that has burned us twice.

2026-06-291.5k

tinyworld-tinyverse-collectibles

jasonkneen/tiny-world-builder

Tinyverse collectibles lane — pack reveal, frozen islands, play-mode visits. Universe carousel is archived but code stays in repo.

2026-06-291.5k

tinyworld-integrations

jasonkneen/tiny-world-builder

Use when changing Tiny World Builder API, webhook, SSE, MCP, plugin, or automation examples.

2026-06-291.5k

Tiny World WebXR

Patterns:

For Apple AR, export the live world to USDZ on demand with THREE.USDZExporter from the r185 global bundle. USDZExporter only understands MeshStandardMaterial, so snapshot worldGroup into a fresh group, convert each Lambert/Basic/Shader material to a Standard equivalent (preserving colour/emissive/map), recentre on the origin with the base at y=0, and scale to a tabletop size. Wrap the resulting Uint8Array in a model/vnd.usdz+zip Blob → object URL, and launch via an <a rel="ar"> that contains a single <img> child (Safari's requirement) clicked programmatically.

Gate the Apple AR button on document.createElement('a').relList.supports('ar'); gate the WebXR buttons on navigator.xr support. Show the XR panel if either is available so iOS users see just the Apple AR button.

Enable WebXR with renderer.xr.enabled = true and drive the main loop with renderer.setAnimationLoop(animate) so desktop and headset frames share one path.

Keep headset transforms on xrWorldRoot, a scene-level parent for board/runtime meshes. Do not scale/move worldGroup alone; hover, selection, clouds, weather, smoke, crop duster, and previews must stay in the same local world space.

Keep controllers/reticles in scene, not xrWorldRoot; they are physical XR-space objects.

For AR desk mode, request immersive-ar with required hit-test, optional anchors, and a domOverlay root. Use the reticle pose to set xrWorldRoot and use anchors when available, but gracefully fall back to the last hit-test pose.

For floating mode, prefer immersive-ar, then fall back to immersive-vr; place the mini board in front of the current XR camera.

For inside mode, use immersive-vr with local-floor and leave xrWorldRoot at meter scale (scale = 1) so one tile is walkable room scale.

When picking tiles from controllers, raycast against worldGroup.children, then convert h.point through xrWorldRoot.worldToLocal() before deriving tile-local offsets. Desktop pointer picking can keep using screen-space raycasts.

Restore scene.background, xrWorldRoot transform/visibility, reticle state, and UI state on XR session end or failure.

Validation:

npm test and the inline script node --check must pass.

Real AR hit-test/VR entry requires HTTPS plus a headset/browser with WebXR support; browser smoke tests can only verify non-XR fallback UI and syntax.