Preview a 3D model from the Kenney Prototype Kit in the VR scene. Use when the user wants to see what a model looks like, test a model in the scene, or compare texture variations.
Install
npx skillscat add facebook/immersive-web-sdk/preview-model Install via the SkillsCat registry.
SKILL.md
Preview Kenney Model in VR Scene
Preview models from the Kenney Prototype Kit by looking them up in the catalog, adding them to the scene, and taking IWER screenshots to verify.
Arguments
$0- Model name (e.g.,figurine,door-rotate,wall-corner)$1- Texture variation:a,b, orc(optional, defaults toa)
Workflow
Step 1: Look Up Model in Catalog
First, search the catalog to find the model and understand what it looks like:
Catalog location: public/kenney_prototype-kit/catalog/- Read
catalog/README.mdto find which category the model is in - Read the specific category file to get the model description
- Confirm the GLB filename exists
Step 2: Copy Model and Texture to Public Folder
# Create kenney folder structure
mkdir -p public/kenney/Textures
# Copy the GLB file
cp "kenney_prototype-kit/Models/GLB format/[model-name].glb" public/kenney/
# Copy the texture variation as colormap.png
# Use variation-a.png, variation-b.png, or variation-c.png
cp "kenney_prototype-kit/Models/Textures/variation-[a|b|c].png" public/kenney/Textures/colormap.pngStep 3: Add Model to Scene
Edit src/index.ts to add the model:
- Add to asset manifest:
kenneyPreview: {
url: "/kenney/[model-name].glb",
type: AssetType.GLTF,
priority: "critical",
},- Add to scene after world creation:
// Preview Kenney model
const { scene: previewMesh } = AssetManager.getGLTF('kenneyPreview')!;
previewMesh.position.set(0, 0.85, -1.5); // On desk, center
previewMesh.scale.setScalar(0.5); // Adjust as needed
world
.createTransformEntity(previewMesh)
.addComponent(Interactable)
.addComponent(DistanceGrabbable, {
movementMode: MovementMode.MoveFromTarget,
});Step 4: Verify with IWER Screenshots
- Check IWER connection:
mcp__iwsdk-dev-mcp__xr_get_session_status - Reload page:
mcp__iwsdk-dev-mcp__browser_reload_page - Wait for reload:
sleep 3 - Accept XR session:
mcp__iwsdk-dev-mcp__xr_accept_session - Position headset to look at model:
mcp__iwsdk-dev-mcp__xr_look_at({
device: "headset",
target: { x: 0, y: 0.85, z: -1.5 },
moveToDistance: 0.8
})- Take screenshot:
mcp__iwsdk-dev-mcp__browser_screenshot
Step 5: Report Results
Summarize:
- Model name and category
- Catalog description
- Texture variation used
- Screenshot showing the model in scene
- Any sizing/positioning recommendations
Texture Variations
| Variation | File | Color Scheme |
|---|---|---|
| a | variation-a.png | Purple/lavender base, orange/coral accents |
| b | variation-b.png | Alternative color scheme |
| c | variation-c.png | Alternative color scheme |
Example Usage
/preview-model figurine
/preview-model door-rotate b
/preview-model wall-corner cPositioning Guide
Default position (0, 0.85, -1.5) places the model on the desk. Adjust based on model type:
| Model Type | Position | Scale | Notes |
|---|---|---|---|
| Small props (coins, buttons) | (0, 0.9, -1.5) | 1.0 | On desk surface |
| Figurines, shapes | (0, 0.85, -1.5) | 0.5 | On desk, half scale |
| Walls, floors | (0, 0, -3) | 1.0 | On ground, further away |
| Doors | (0, 0, -2.5) | 1.0 | On ground, room scale |
| Vehicles | (2, 0, -3) | 1.0 | On ground, to the side |
Cleanup
After previewing, remember to:
- Remove or comment out the preview code from
src/index.ts - Delete files from
public/kenney/if not needed - Or keep them if you want to use the model permanently
File Locations Reference
kenney_prototype-kit/
├── catalog/ # Model descriptions
│ ├── README.md # Master index
│ └── [category].md # Category catalogs
├── Models/
│ ├── GLB format/ # 3D model files
│ │ └── [model].glb
│ └── Textures/ # Shared textures
│ ├── variation-a.png
│ ├── variation-b.png
│ └── variation-c.png
└── Previews/ # 2D preview images
└── [model].png