yawn/docs/guide/importing-and-picking.md

glTF import and picking

Import off-thread

The shared importer worker fetches and parses glTF/GLB, then the response hydrates Mesh and PBRMaterial handles attached to your scene.

import { importGltf } from "@yawn/handles";

const meshes = await importGltf(scene, "/models/sponza.glb");
meshes[0].position.y = 0.5;

The importer handles triangle primitives, external/data buffers, standard vertex attributes, indices, node transforms, and metallic-roughness values. Application-specific extensions remain application policy.

Pick in the BVH worker

const picking = new Picking(scene);
await picking.ready;

canvas.addEventListener("click", async () => {
  const hits = await picking.pick([0, 0, 4], [0, 0, -1]);
  const nearest = hits[0];
  if (nearest) console.log(nearest.id, nearest.distance);
});

The worker reads shared node positions and mesh bounds, updates its BVH when the shared frame counter changes, and returns all AABB hits sorted by distance. You can shortlist or run an exact test afterward.

If row allocations relocated since Picking was created, refresh its shared descriptors:

await picking.refresh();

The playground below imports the repository's full LFS-backed sponza.glb in the importer worker, preserves its authored transforms, adds neutral warm lighting, places an arc camera in its coordinate system, and sends a real ray to the BVH worker. Click the preview to pick again.

<script setup> import Playground from "../.vitepress/Playground.vue"; </script>