skills.rest
Iker1211
Iker1211COMMUNITY
Explore all skills by this author →
GitHub

gltf-instanced-world

Loads GLTF assets into tile-based Three.js worlds using InstancedMesh and Mesh clones.

1|Updated Mar 31, 2025
Search Tags:#webgl#three.js#3d rendering#raycasting#gltf#instancedmesh#tile-based world
One-click install
npx skills add https://github.com/Iker1211/Resources-Directory --skill gltf-instanced-world-iker1211
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: gltf-instanced-world
Source: https://github.com/Iker1211/Resources-Directory/tree/main/skills/mnt/user-data/outputs/skills/gltf-instanced-world
Command: npx skills add https://github.com/Iker1211/Resources-Directory --skill gltf-instanced-world-iker1211

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires three.

What problem does it solve? Rendering tile-based 3D worlds with Three.js often produces hundreds of unnecessary draw calls and duplicate asset downloads, degrading performance. This Skill provides a complete pattern for loading GLTF assets once, rendering repeated tiles with InstancedMesh, and placing unique occupants with Mesh clones. ## Core Features & Use Cases - Cache-first GLTF loading: Deduplicates the required file set and loads assets in parallel with Promise.allSettled so one broken asset never blocks the world. - InstancedMesh construction: Builds one InstancedMesh per sub-mesh for repeated tiles and environment props, sharing geometry and material to minimize draw calls. - Raycasting support: Propagates userData.assetKey through cloned node trees so clicks resolve correctly on both InstancedMesh and Mesh clones. - Use Case: Building a hex-tile strategy game map with 200 grass tiles, environment props, and unique buildings from the KayKit Medieval Hexagon Pack, reducing 200 draw calls to 3. ## Quick Start Use the gltf-instanced-world skill to load my GLTF tile assets and build an instanced Three.js world from my world cell data.

Frequently Asked Questions about gltf-instanced-world

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I render repeated tiles with InstancedMesh in Three.js?▼

Create one InstancedMesh per sub-mesh using the shared geometry and material, then set each instance transform with setMatrixAt using a dummy Object3D. Always set instanceMatrix.needsUpdate = true afterward or all instances render at the origin.

When should I use InstancedMesh vs Mesh clone in Three.js?▼

Use InstancedMesh for repeated objects like ground tiles and environment props, giving one draw call per type. Use Mesh clone for unique occupants like buildings, since each unique object costs one draw call anyway.

Why do my InstancedMesh objects all appear at position 0,0,0?▼

The instanceMatrix.needsUpdate flag was not set after calling setMatrixAt. Without this line, Three.js never uploads the matrix buffer to the GPU shader, so every instance renders at the origin.

How do I make raycasting work with cloned GLTF scenes?▼

Propagate your identifying key through the entire cloned tree with obj.traverse, setting userData.assetKey on every node. The raycaster may hit any child mesh, so when resolving a hit, walk up parents until a node with the key is found.

Should I use Promise.all or Promise.allSettled for loading GLTF assets?▼

Use Promise.allSettled so one failed asset does not abort the entire world load. Resolve every loader promise even on error, log the skipped file, and let the world render without that asset.

How do I measure the real download size of a GLTF asset?▼

Fetch both the .gltf and its companion .bin file and sum their byte lengths. The .gltf JSON is only a few KB while the .bin holds roughly 90 percent of the actual geometry data.

Related Skills

Explore More Software Engineering Skills→
Iker1211Iker1211

beautiful-3d-world

Composes flat hexagonal low-poly 3D worlds from KayKit Medieval Hexagon Pack assets.

Community
Advanced
CesarG503CesarG503

threejs-interaction

Handle user input, raycasting, and camera controls in Three.js scenes.

Community
Intermediate
decentralanddecentraland
3

optimize-scene

Optimize Decentraland SDK7 scenes by reducing triangle, entity, and texture counts.

Official
Intermediate
TumeloRamaphosaTumeloRamaphosa

blender-web-pipeline

Export Blender assets to optimized glTF/GLB files for web renderers.

Community
Advanced