model

A glTF mesh as a glasses-free 3D element — and a splat and a mesh sharing one scene.

First is addModel(): same options, same handle and same framing as addSplat(), so a catalogue switches a product between a captured splat and a vendor mesh by changing one word. Second is both at once, in a single engine scene, sorting against each other — which is what makes a mixed catalogue possible instead of forcing every product into one representation. Third is the file a real catalogue actually holds: a Draco-compressed glTF.

Every tile renders with PlayCanvas, the SDK's default engine. In the mixed tile the splat comes from addSplat() and the helmet is added to the same engine scene through handle.engine. Add ?engine=three to the URL for the three.js twin: the mesh tiles on the three.js renderer, and the mixed tile as a three.js scene with a Spark splat in it. ?splat=<url> swaps the mixed tile's splat.

This tile is the only one that needs anything extra of the PAGE. KHR_draco_mesh_compression needs a decoder, and the SDK will not fetch one from a CDN behind your back — an offline build must not depend on one — so the decoder files are served from this repo at /vendor/draco/ and the tile passes decoderPath. Copy three/examples/jsm/libs/draco/ into your own web root and do the same. Details: authoring guide → compressed glTF.

← All samples · Get the DisplayXR Browser
"Damaged Helmet": glTF 2.0 rebuild © 2018 ctxwing, CC BY 4.0; earlier version of the model ("Battle Damaged Sci-fi Helmet") © 2016 theblueturtle_, CC BY-NC 4.0; via Khronos glTF-Sample-Assets, unmodified. Duck (Draco variant) © Sony, CC0 1.0, via the same. Draco decoder files © The Draco Authors, Apache-2.0, from three.js. Butterfly splat © World Labs (from Spark, sparkjs.dev), used with permission; converted to SOG.