From 9433e6ff0b190ebb7a71cb2d59085a73e321a41a Mon Sep 17 00:00:00 2001
From: "Diego F. Goberna" <github@feiss.be>
Date: Sun, 25 May 2025 02:15:54 +0200
Subject: [PATCH] Add preloader to interactivity example

---
 examples/interactivity/index.html   | 132 +++++++++++++++-------------
 examples/interactivity/style.css    |   3 +-
 examples/js/forge_loading_black.gif | Bin 0 -> 9237 bytes
 examples/js/forge_loading_white.gif | Bin 0 -> 9374 bytes
 examples/js/preloader.js            |  41 +++++++++
 5 files changed, 114 insertions(+), 62 deletions(-)
 create mode 100644 examples/js/forge_loading_black.gif
 create mode 100644 examples/js/forge_loading_white.gif
 create mode 100644 examples/js/preloader.js

diff --git a/examples/interactivity/index.html b/examples/interactivity/index.html
index 41aa8cc..a10293e 100644
--- a/examples/interactivity/index.html
+++ b/examples/interactivity/index.html
@@ -7,7 +7,6 @@
 </head>
 
 <body>
-  <img src="loading.gif" alt="loading" id="loading">
   <div id="menu">
     <div class="border">
       <div class="border">
@@ -36,6 +35,7 @@
     import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
     import { FOOD_ASSETS, FOOD_URL } from './food.js';
     import { getAssetFileURL } from "/examples/js/get-asset-url.js";
+    import { preloadSplats } from "/examples/js/preloader.js";
 
     // Add food items to the menu
     FOOD_ASSETS.forEach((food, i) => {
@@ -43,7 +43,7 @@
       el.textContent = food.name;
       el.href = 'javascript:;';
       el.addEventListener('click', async function () {
-        await switchToFood(i);
+        switchToFood(i);
       });
       document.getElementById('menu_list').appendChild(el);
     });
@@ -58,50 +58,6 @@
     const camera = new THREE.PerspectiveCamera(65, window.innerWidth / window.innerHeight, 0.1, 1000);
     camera.position.set(0, 0.9, -1.2);
 
-    // Setup lighting
-    const spotLight = new THREE.SpotLight(0xffcc88);
-    spotLight.position.set(0, 1, 0);
-    spotLight.castShadow = true;
-    spotLight.shadow.mapSize.width = 1024;
-    spotLight.shadow.mapSize.height = 1024;
-    spotLight.shadow.camera.near = 0.1;
-    spotLight.shadow.camera.far = 5;
-    spotLight.angle = 0.9;
-    spotLight.penumbra = 1;
-    spotLight.intensity = 3;
-    scene.add(spotLight);
-
-    const fillLight = new THREE.PointLight(0xffcc88, 0.2);
-    fillLight.position.set(0, 0, -3);
-    scene.add(fillLight);
-
-    // Splats don't project shadows, so we add a cylinder below the spotlight to fake one ;)
-    const geometry = new THREE.CylinderGeometry(0.45, 0.45, 0.04, 40, 1);
-    const material = new THREE.MeshPhongMaterial({ colorWrite: false, depthWrite: false });
-    const shadow = new THREE.Mesh(geometry, material);
-    shadow.visible = false;
-    shadow.castShadow = true;
-    shadow.position.set(0, 0.1, 0);
-    scene.add(shadow);
-
-    // Add table
-    const gltfLoader = new GLTFLoader();
-    const modelURL = await getAssetFileURL("table.glb");
-    const gltfTable = await gltfLoader.loadAsync(modelURL);
-    const table = gltfTable.scene;
-    // Set the table cloth to receive shadows
-    const tableCloth = table.children.find(item => item.name == 'cover');
-    tableCloth.receiveShadow = true;
-    scene.add(table);
-
-    // Add floor
-    const plane = new THREE.PlaneGeometry(10, 10);
-    const floormat = new THREE.MeshPhongMaterial({ color: 0x777777 });
-    const floor = new THREE.Mesh(plane, floormat);
-    floor.rotation.x = -Math.PI / 2;
-    floor.position.set(0, -1.397, 0);
-    scene.add(floor);
-
     // Setup mouse controls to orbit the camera around
     const controls = new OrbitControls(camera, renderer.domElement);
     controls.target.set(0.2, 0, 0);
@@ -110,10 +66,18 @@
     controls.enablePan = false;
     controls.update();
 
+
     // Current and next food splats
     let food, nextFood;
+    // Other items
+    let table, shadow;
+
+    // Add table
+    const gltfLoader = new GLTFLoader();
+    const modelURL = await getAssetFileURL("table.glb");
+    const gltfTable = await gltfLoader.loadAsync(modelURL);
+    table = gltfTable.scene;
 
-    const loadingIcon = document.getElementById('loading');
     // Transition length in frames.
     // Two transitions: one for fading out the old food, another for fading in the next one
     const TRANSITION_LENGTH = 60;
@@ -121,10 +85,64 @@
     let fadeOutTime = null;
     let fadeInTime = null;
 
-    // Load first food by default
-    await switchToFood(0);
+    // Preload all splat files
+    let splats;
+    preloadSplats(FOOD_ASSETS.map(t => t.file)).then(loaded_splats => {
+      splats = loaded_splats;
+      init();
+    });
 
-    renderer.setAnimationLoop(function animate(time) {
+    async function init() {
+      // show menu
+      document.getElementById('menu').style.display = 'block';
+
+      // Setup lighting
+      const spotLight = new THREE.SpotLight(0xffcc88);
+      spotLight.position.set(0, 1, 0);
+      spotLight.castShadow = true;
+      spotLight.shadow.mapSize.width = 1024;
+      spotLight.shadow.mapSize.height = 1024;
+      spotLight.shadow.camera.near = 0.1;
+      spotLight.shadow.camera.far = 5;
+      spotLight.angle = 0.9;
+      spotLight.penumbra = 1;
+      spotLight.intensity = 3;
+      scene.add(spotLight);
+
+      const fillLight = new THREE.PointLight(0xffcc88, 0.2);
+      fillLight.position.set(0, 0, -3);
+      scene.add(fillLight);
+
+      // Splats don't project shadows, so we add a cylinder below the spotlight to fake one ;)
+      const geometry = new THREE.CylinderGeometry(0.45, 0.45, 0.04, 40, 1);
+      const material = new THREE.MeshPhongMaterial({ colorWrite: false, depthWrite: false });
+      shadow = new THREE.Mesh(geometry, material);
+      shadow.visible = false;
+      shadow.castShadow = true;
+      shadow.position.set(0, 0.1, 0);
+      scene.add(shadow);
+
+      // Set the table cloth to receive shadows
+      const tableCloth = table.children.find(item => item.name == 'cover');
+      tableCloth.receiveShadow = true;
+      scene.add(table);
+
+      // Add floor
+      const plane = new THREE.PlaneGeometry(10, 10);
+      const floormat = new THREE.MeshPhongMaterial({ color: 0x777777 });
+      const floor = new THREE.Mesh(plane, floormat);
+      floor.rotation.x = -Math.PI / 2;
+      floor.position.set(0, -1.397, 0);
+      scene.add(floor);
+
+      // Load first food by default
+      switchToFood(0);
+
+      // Start render loop
+      renderer.setAnimationLoop(animate);
+    }
+
+    function animate(time) {
       controls.update();
       renderer.render(scene, camera);
       const rotation = time / 10000;
@@ -161,20 +179,17 @@
           fadeInTime = null;
         }
       }
-
-
-    });
+    };
 
     // Change food from menu link
-    async function switchToFood(foodIndex) {
+    function switchToFood(foodIndex) {
 
       // already transitioning
       if (fadeOutTime !== null || fadeInTime !== null) return;
 
       const foodItem = FOOD_ASSETS[foodIndex];
 
-      const splatURL = await getAssetFileURL(foodItem.file);
-      nextFood = new SplatMesh({ url: splatURL });
+      nextFood = splats[foodItem.file];
       nextFood.quaternion.set(1, 0, 0, 0);
 
       // Customize splat depending on the settings set for this food
@@ -188,7 +203,6 @@
       // Setup shadow to the required size, and make it visible only when the splat is initialized
       nextFood.initialized.then(() => {
         shadow.visible = false;
-        loadingIcon.style.display = 'none';
         fadeOutTime = 0; // Fade in next food
       });
 
@@ -197,10 +211,6 @@
       // toggle menu item
       const menu_items = document.getElementById('menu_list').children;
       for (let i = 0; i < menu_items.length; i++) {
-        if (foodIndex == i) {
-          loadingIcon.style.display = 'inline';
-          menu_items[i].appendChild(loadingIcon);
-        }
         menu_items[i].classList.toggle('active', foodIndex == i);
       }
     }
diff --git a/examples/interactivity/style.css b/examples/interactivity/style.css
index 2e7c349..acde7a5 100644
--- a/examples/interactivity/style.css
+++ b/examples/interactivity/style.css
@@ -2,6 +2,7 @@
 
 body {
   margin: 0;
+  background-color: black;
 }
 
 h1 {
@@ -24,7 +25,7 @@ h3 {
 #menu {
   position: absolute;
   left: -12rem;
-  display: inline-block;
+  display: none;
   background-color: rgba(223, 203, 171, 0.8);
   padding: 2rem 2rem;
   margin-top: 4rem;
diff --git a/examples/js/forge_loading_black.gif b/examples/js/forge_loading_black.gif
new file mode 100644
index 0000000000000000000000000000000000000000..f421731bc56093d45c7f1e6040c966a025553d2b
GIT binary patch
literal 9237
zcmb{1cT`jRnm6!GsG%!}fQa-OItZdzs0jq5i!|vFnsg9C35Jr;ksf*tgf6`|>0NpU
z1rbC*#e#YrJax@I_nkZEzLP(*va|NupY{DcWvjtd<*r%U0C#{B00;>V1poj75kVqR
zU%!5{w6q%^e}3!Mozl|E(b37`;<B4JRje%S0s~R4t-X191y)veHx<-wDyS9}l?Dce
zT3Oi_72&^qJG;<cL`1Ztgm6<q#oEd~C<ui_hAN!>@}{ztrTw>W-|_fzYim0^zQV%7
zzO=OB=1nC91!!(={;gYzV`Eci_wb*6IDb%Ssp#t|-O*N&6cr~XI{TNiuV5~g_O_aq
z_6Tby8hc9@7fS_kQE3@z85w}{9|CGHRSs(pTT3rn8xCKDmjj1`mzSHTyqK7+zdgcE
z)cT=|n2V*8tp~vQg#@qxegKf4xAyaS0VF@-2VsPEx&5)$9~J_!*_PQ3WtGnR9d6F1
z;q)thm50c~A6>a_c7hafgN5fGaTwB%;JsKO7LGIJhS))%VdLoTMjdnCu2)wX3x3_W
zYlpf@ZG;&gD8}eTt$Oynh<UF*j+8TF_s1YX<eD6=u?SLtf{*8XQnE2Au^%ooTc13=
zfF-5~N*YzlN=9C;2IN;uKd8Hz*mR|~^?G{;M@Y9UX=7h7@ze6&5pF(Itj$yt8O8YH
zs`&*V!pC`Sgp7Fe;qc2+qlYi{r*>W+?ax>qemLGW@%ZwRU^4UNaeW-N9<?TqK!wLM
zXNi1fJ@x+#+mgZF=Q4&DIZ^e-6ogS~U89h^a9aeV;UiaCgd3)(P_{z~=9{r5N?UUZ
za4^90GVjp?3wHdry$sg_dZre{i*=Q6-4UXmd-!6;LWkF!CS`PM&I05t^UeQFlFkF0
zIL;9-A3fvxYb0LnADKjHGyC?I%#^gMR?A1e^?0ZIK8$bRB1u(YQ<N~wjpx?LhNs^q
z`8UL8Y@q*%&CKd|Hl#7;Pd0IP%U{@<IgA;9vf2E?R`wfP8_(}-OO?N{vHWC9ibkRo
zh}n%oBjh|T`$r-{RMdWKt}zH|fbv&1s&w4NtZbd!#C*o+A}BSslm$$6#)hx9E3CV&
z*~C%X+Sb@{2^`X$(8mKlV{0GA@ljumIdcP3j)zt)RD*$8ALsSq(H9SUcS^$@x8E$Z
zSneMm3|Jn0oO)}4{<>r6Qc5mv&;psK48qCsrYkyoHS7lL3g@R_7`wMem=CC!9oWL$
zFBc|?+X$hIDKcJ$NRAI{QmUFG1wm;UiPEnGat&WS(2}AA+@2QbZh}dPZ4v`m^bp)R
zY%I0!K57dI1DqAL9!4_EbVLm;{@d<lxpOs@SgibYrU;;Nc%h*k^(1Yjnc02Sg-YhF
zDW`s5{WpS=%UB-TJEU(%;yAYL)-P;!f18c;2M1@Y4dQn!$b^g4`fnNA7)zoji5)ET
z7;=`+nZ!%GheE3s%9$?ZWw0+-`>}=PVqex7e}fXu9evi@P~d&}8QE3txckG=MaVZK
z%+g!XB0NeLBx4wzph+X@keCV$6~U%OgU-=MLV~g$(F1f>rMU`=9M6>!_$w+ctMhAl
zGV6`#Gnxfy&$ZpF>4Jc1RQoi~(GH0BjB1!oO47zZ&zqA51HEmtD+KVuNSfD+0WjT0
zV&`7h+N&_+@ygH#|E5p-ryd_qOAB}-a=N@1w@7Ztjq9=j)L##bt;M%$f~}|TM}Hz4
z?}?dX6Ch!Uo6LygLB(P|q<OI2k=!yik1o)$tHd}8EqS4&CdUmFW^=zabD^%^kipRU
z14Pzr>gp3WJ~P4ihc3}2d9zYZ@74j@zGNb#Vnss;df$$h^_s=K2oS5$LF&<dMUrr*
z(6LOaiCH_0r0#+oliPHFIg!++eC5%6HTi_lc%8e*M#m(ZTo#km)`Rxw0xY{`%ZG9L
zzZ<*1_<8){mm|apW<EP3fAzDolED~PExgf_yi8fQQSApt5cTg$`%J6j*WHS8M}+zh
z_i72)!>C13<)Fv+y+jz%7;TUQ_yIOvol%lLAw?}j9GQv%ou>~M^T~9h2N<qO^WX}t
z&*RGkVk@kw@@jaK>+aL1HwlKe8di5gz>IM{aMNev-NUfav6z-gqTJ_acm;LSi%Veo
zp;XU}XJCfa_>Nbd%P$}Mzg-+S_G|pG`>E*kG&1nr7o~d@>$m-%Zo%cDamlPG>ZoHX
zYtj7cA&($j()e?kINA5|T3^$2Y_3KlI)c-`$((~fOKxH-Mp1auW&6m;oPg7%CgtVC
z0%+64V<#2!_@~{Ylo@uUG;SoEzm0f}*9Y-j+hjbIIv+ydvQczdIu_(7>O<@D+G;o$
zTDA|;LL4-Ks|i-gr1fc&83}l%_it;B=fsLLypo4zKN+T}C)oKCk!dv7Zjby!@!yrg
zznqhQ0sD~tdr{kPNul@?>~<*MPq1<wNnXcJ3%8;aeE7s}agi!exbAi*)eybhYweTo
zacDp9Ou`g|*739n!@xl(Zbodp8e<HXcLFvf36zQkoxc!)a?NzO05B;f@quxL#%E#>
zWaYi;yjp?B_1YKGn<3?GS~Xo_alPuM{SqldCQYM|iizB5$=0Ef`LPQ#l^!czOm>Bx
zTgt#X=Fu(+%(x#k^;Y?v&%sI3;QQ0sfS`9@oOs@h7ouuwyYnLA`xV4DS<ALkRdbaU
zK8u!l7^-vg#@a*tlkS`wYe=9y@KsjERM07<2r~9uBlir0%W*kX3eDRWjWaN@_gwq@
zJbW@tMJI_mjnRQ8UsH`OizT^FR}m;P%)q|q)yT$@FlzYgO;r?<ntge<bR;B5G^ZU}
zzO84SZcpT)4$+|88*JY33iW>G!?6zKzrVI!bdT_2ApUa1e*m??``=E+54hi<%nqdg
zOx9rEWK#U?ss)H4S5^w^Qng(4vF^aGw5Qe8()B%fqXMYw(8ga7b@*V>pT{r=t>KBf
zXb~2r$`Z+gjE<s-;|4P)hJ_?w^hx(+InNvsmylxvFvw;Kq?Oz|UseuLsnV(`d@4}f
z0At3rh&*mrtL+x6?=u~c0J97?k3z6j1=Es4IcHE4IUXxg+38)IgE_W4lH=)9d(RVJ
zA4<-k-@X@44SV-_6%BlMuxa%a+n{`yOUVk?Ii%?fyLx&9y%3tJgdO9tLQiRrHN-%|
zyNSpXQ?7*ZirH58>WOZH@A>kzKqSOzhZBVlwKIl}cqYt(Z2nP4VgG7E3~fv+LUM%9
z4U`p(egC9;L07dY9BcYPc&{xZQPOA`D$OtyV<H8Xp-4&4sclbEgpUjoS{l$dLq}OA
zO4mC>h{ON?S-ceZel1wHa}H+zU`fX02_KgmSB-1x534&@ZyY`8^>**ut<%wS)tNma
zSS%azk{q`^F}1&N5(0A$6lO(5sCuCV9!C0uq9FFMk1i*KB|Una8l8>+U1Gy#@;%75
z23X|^MZ-%pE|rx_`c^?}3Z9BRsba&mNC6GCT{1CA#?O?@(}#wYdSde@bO%DlXO#R<
zo{OfzA)RaeDCCQg;z!M|q}tqe-dvqS>>o>v9)4VR2TpY>9rwNjNYKF>QCC;OP!Voq
zw<V}At?4o7a7BAjiOl&?kl|FB>-*TgF)ML0p?LJ{-TJshZBwN$n3Z)!+7`lZAt0+>
z3~u&R*qiP<)Q;p@8u?sDMXw`f&_iJY51FXBLyYu_+}vc^0j;<yJkveUd2!9188r*?
zn<smE<?LCyjhyo8iF~<r6sva6u8Z3=SA-B#i86rxekJ;+ym*cM26GE1j`|%&ltGcR
z3szzL<cdRGN|S%5`smyoDXtw`Q{m?-D`k8F->i(-Hf>!?>whj8;Nu=7!H#leK}*|4
z*s)`!z*l1I0^=o|lMGm{Fh5Qe^~$gWDCKf(3e>I?;~mpu%5y3e^COs3>Kvm3Dq4b2
z_dBuGE<L^I2AAwXEI6e9=~$JE+w=Hv`{sGSHgl_$@h2A3o7Q>{Hg<+y?vKBI8~?%(
zIK~d^Z+}#}H}`dQ5|97NU&8zZMKa)bJ&oSt0-C0PS>FS)#e~%Oc0aoIXsBP}eTMT_
zC^wEFlE*g4LO)-^mPa_wbdF+CIcM~O@Zn0*G4+lX3qxx3x6&S)WPfFomp2@wUWa9y
zOMcFut;=P(UuV@~eCk%lMQ3o~?NHZf9C-yEG>0hdCpK{o&~}wTGa9I=Js{R^BdH&s
zY(_eeen0P{+CW#=WV|RmV6(~TI5z05-dt<T!uhv@ME0XA$_)x({i8#`do96@N*D6I
zM-KcuH{5#C=t=tTJ9BlpwyqyFnZ}BSgYvwXqz}LT;P6(abPn~`_6^2HIX_afC8CVb
zbBaz0OoRe{Pjur`b6r8<%E^UU8koGiSlHRTh}Xsu^3q{Ws9G&_eQt>gx~tW=BNb%8
zS<$Cn)*no)W!pQd*gg^52&Y_{wOI%Rad6J4)~rF3H~av~dyczM<OIjt<K20}$@Zs+
zy<E<g6GDo`8gBsc*K2x(!kb;lkk8kYPbTP^F<>gmq{wr#!nX?K<<ZP)xlpeQn~>{^
z6QgXgkn18|PbKZzl3Xm7KD>ITIX0BFOWlGY^V%4Ym5(ZhvFN^Tzv~htZ`+`~H)B?p
zZyvbkxj!aL({AWFrw@^egpDbdI_Oq(R=Q%qB9|JU>s(dd_fbzzv3MZFim27+$bGdg
zDD~c|?Gn(}Rqnd9W{oVqqGfbhP$T7n(Y7Td>9v2siYm|(R47}(1^y^4KW%tTjPi3c
z7%??_8{E_s<;648;>3M?dG3-^)F|>^$D(I~Rh*|)!TB<%%<jz|+~|iV-y`3xAIFXe
z(gxB#veNzmoge9F|B5=Bng8c;{4YHS*^k=^f2FTl5ca-4dPZM8dqzLLD;+*ETX;tQ
zElbX7hv-h0g677L5F)Ao6<0r2q`n<0`k|AWtsfOe&o?HOC=v<;qm#74(@_4fAV2mT
z?c)59I2e0k>0Ls3ghrivcC9*9eHJ{=9p4JC?(hH^q_{usYaH<Cg(rAqj6-K85iRQ7
zvGeL9lOQVQ74?3%!VR_8Y0LntwaHt=+#BV!5UO{jC-#*`-iW?Kwkv@|)aDwK`*h&}
zeasywfunWhu+sBQI3Dr!OuNfr&>N2>^4a1!TUUtUbxA}+c#nB=Bda)BlSDjO-5a$^
z?zVH)Is9W3CbBV^M`O)?!Eaz!H^(*Urfq81YyEu1s^X-wdcu5_MKAWUMnn1HQ-|ke
zW+M#;MwPA)5rBovTWMj|8xSr;BZiD9fZ&a89pPe&m3+D-MICX(L_KXR8Pu!G!S8vE
zzofhQC^{sFQ|2K9lwhGY<-qkg>iwiU<4m@h#<>z&&rJ>NEl&9J=j%l+wY4=qWS3%`
z4X%cr8%V;PKfsIx-|O>4!j2atZyBobt9$o#Ii6y#+%;GK+cUzyPWoAEdG*c#ZR3Xc
z+%Md9#tQFzB=(z3$7Fh5`Gw&2y1zcB@>byv_CN*bg2RHDp|(*@p^;i~@g6QvAO#Wg
z<Sv*B=LAYr!R8Z1WNQWD9kO5*`9%a6y3#%kR+7(NZ_s34r`nj`2~Wm@4196D0}t{l
zI}Ge_Et6`s`3oA);>#BM^3S{{pvzIalWm^N0Jov}Ua<d`nkUse!iit?=SV1V-{HLM
ztwInJf(cM+e2~keqbGpAcLxdn7L)&(_d=`nx$nsG<PA18J?i-zeSYttAb^;tKJzuc
zP)3>?p$iwc+EA~~y8VC>ps3ruNOvv91722F`n*KDKs`&nzHF9Y^we>6_$RkUH!F|O
z+*n0zq#~IGc5a4(T9z2@Y+_3?Dz~|tQ7hS_WO~i{X)OJb@03FOMQJ8UjFEd@*S*U>
z(w7Zub4Vi@$W500-cJ~Fiz+^i*0!w4i^s(?v54RAc|bTuek@FRQ@C)btA<crWO#e6
zC2uf8^WppSH8S_ut83LK>22TBI>(u&e0KI1YRHNHexU!=S$-z$6IJ9Nw(?t`>-@)P
zDLQ660<z^2cRnL8i?+Xd&Jl1X9OlT4)J2CA@jyMI!(uVoQQ>ECP6z{qCc(kcS+G1@
zaCVM*QKANM@gw3=ExWL^!YV&hEj*|Mp3>x4(5hY;{4lq@8`03GM)0dKs2gz@9G|Ga
z+cissU$B^Q0&(!HKU;NpwZY-Q18`fL_peTGsPJ$cmwp(T|D^PCXe-?5a+eu+Nrc#~
z+A=h#m`~<L8vT4VhA~;fG5nkb2%w~az1bBf0=s*PCT6BtC`09it%H=)`_18rbcmMb
zA%;X&{No#Riqu^a0;*3ORap;qpVLehZ8Tj7Thh+dEMxfky2t+m|9s_WN3A}wqH}NF
z-7&uWYX%4Wp+uD}fy=7fE6Q%Ot3~?f=z81DjkCWMFuEn5<4`GD4Y2J4vX-dn&I4Zz
zEPIs*i_bF02`@R*2}7i8{`VIr6xGE{z8QE|H+Y)8XhGilNEoZXUS%0G+h9A>q3N<+
zzASaT<zRuM5oN1?|7x;;8~nGss{dzpeMZJ~J9}JzR_XEGGg;Sy0SiPAjacH!=QbQ;
zDsG<2Tbb8CEF2W51Ez9Ds@aAo_=RHNzD~R_;Or?T-(`0KB`JGml@PJ#XyrM^!Yc5I
zR0K`5W4d~AZDL`)O6x;-V_SH0Cp6w65)Mv%=3h2A6zwoQ7Ch;PdJdf+8t7f}?^wlw
zsCc%aH7}g!S91>DBI=Io-+v$~_*CC_YCm^UP)o6q?ncbOJ6JMi-eW*|0!BiQF4bWe
z!63XL_3eIyA=Kvj$sTtt39p<_kAtKZ2;h#Xf72*#$L=T9Dk%I?{FOpkxQo%L7b0O?
zJLBr5%Lkw6CZ>a6^Av&VqynO4@>H9Br-Eshf=rzr$*}q)&k}5JshH_Wilh}U7q_T@
zWaCzvRrc2Ugw<?$?2x!*dJLuWh8pix^BZja>R>vjyDl^)inncCLRPbjeCJ=<`BL--
zvA=SEyBnS*l|7e|vE}HHSJNRnm$L6{zB0X*Vrx`)N46&CZOZKPj}K)t;>c$!GBw@$
zCkr%kM0qIw?@~K*;8<!wkl>_9oA|{xM-zPXfl)T&%ytceAIbAl;}1ZGIRpi3MJn5b
z$NIBl5-$RADK4NV7;tJ9A}}MEJ-d)7Do-b~D2pHO@tBapS83^66PsSAAJZ6K(xO$}
zj;`p^E9eaX`t=8g{M<$dCj4@zb$e!<I_KeFfhDJeRbBA-rrpz*dh5G(0xSD#4V%aB
z)_{$fXP;WZe751G`~3Xf;J`)-Ep>pyLNI_bFU@mMD4)+fE9L%-*W0PC7~HNxEtv;{
ziW<Gf&7mD=!LTwvRUi^vY|ZH>{R3Z{Bw3P(&Wii|1u~D=ndHApwJp!eTP#)_0tJVa
zp^J*#^$C@d8Q#!VBeN)Gk_Cc2?D3cE=FvynX!4Tw>XaLtfU8`l(32J^>jvCfyPn8D
zyax<6ExZKG*=f~0UTpb4`qYphY$S>6<GrFpR(jv$fnC-o+lJBbTFYrC)*RJ}9nXdN
zYHKN){~(dKL;qFtRPJ-uH$T;PRHPTc{i=q$yNP(FS+zVL()7XW@aysge;w=Kuy8?e
zs5X0eOb`aE1&&Sfc1zHTPR2R1rzK|Q*`snaf&Bc)A~@I+j|0UM)X`PRwNGKlhNSFf
zjf}SN!cO(>o*>XO_`slV(}-H@xNqtd3@kX~GdB+fk1c1dl`m~MmA%xcc;z^`x6ZzE
zKy-MtUSad9<5MF4`|-$=fJ7kVrsZogMIzrL14x*j<6<p&4NOjpQMl5RS3S2sj7IkO
zE3+-DYNEcPynm$b@H0ym6Dz819lHw|SIIX=zr3`~3qs#W#XI*&;?F<9S+T0Ll;Wni
z;IgyGjF@{m1z;_GW>&|-v2p<5(kpvA45l+p&@}K>ylw1nzWJr_lj^2vi*06NYm~2x
zbcY`~s93{i&cZ+J-euR4PfJ^Y-`S&x_cUvp`f?x-d!u1e^-aOYbH`sto=Oeh)gzdX
zEy4bF_w$#9+aDWlxeOuBKNoI9C~bp~vxVEfbkUH1=UU%KWfI(k#@OeVcUq_RyakUd
zgNZ!!md7KQ-gyRwYJ#jnxPix5Sa<{p*dQt@Ce}9bF?%eJS!!r-26sS~PfjjZeu3+i
zq+EQdeR*zXRduoFl{!2325xX=vo@iP58Tw%UDL}IKcGoEG~CYKKc?C<C47}sWgu)p
z49q%H)w;d`tYj7KNOZh@@<uTQyMHXz=`;CJbTs>`$@@1pr?R$&H$zR<nvcV^DQ-$l
zunxb_yURr_UkI7*GAhaMXQJyi{rXvvlQo>j1j$@pAhun6XWKN}C|!py-91oyiMsJ%
z`gZCju#q$~y+T974v&5JS@SVaG#1oPbzfvhwrsZ0yy7EI{<U&bQU?Kl3dlTgrC(Jl
zU=B(|h+Sxq0bPt=X*PZ_{;WrOVzq%==DPwx?{H1nriA*Y$-Qx_%118h+3@Cf*#AK5
zpSB2pXmybsB>wq6LK`0+{&PJFc`ku;=-d$Z5QktVcKPl6Sk6Y4kdUm%<%u^R1FN#8
z_mC(ZQ)lzg2sqs%ut8+38a7HbF4E@F#qgw1r&Rw8)Rmw|t~owe=<-twiyTTyv(n0~
zm=mh`X|L28;~Rv)gqFKk(Cxxa-CB9i#Ass%q0Chy!eF3zaQL|-c<f0LXnIKuOgEoV
zzvTt2MP$Ct>U@LTJPdy4^Y)~n%jd&s@c7otujC`qmo-QNY(rm&amEB#bzOt>AC7im
zQrRf_7N{n1QEVg5)QhG0Y0f;0=-brX61J(=Y0Qd^D9E$m7o|5t+Av(G=IbJlJ|aUb
zdD+m4YVl811^K!!(UCE)CcQ(2l;*^1Nn=Ls6e|bo&XYtzmgelWNRC*e3>TLCZI;>d
zwv#kXn_(nrW<D3i5_8*6Pid<4W-WxREWsc54URVjylo*VQHfjDGB7Epwb4b(|I<o#
zHc%c)CV+pdWUcFN4G{?J^5N%i%YFL0KSEH>f?#Xg&`69g8qSW5i+5rPvrb4!Nz#Z-
z&5Wcp$jS@x)C|fm@hOCZz44VUf_H7I>JTj2#r0Jzf=F##ODZ2gX{fK*)r}E+HlQ{%
z96XvnuG&21$Coo}Ex6!2wnCU(cZ}YuUEAK7+0`oFx92-}TMO(hygJc0<cnx|@)4tv
z3#=1dKvTTH(cPpf^vQWYhd~T`ABvG%p-muug*%FkykVO8-BvlYOr5f=n4(bKorRbb
znLf##8zarF*psfeIUbV@V)#a4JW(v2s$A4ZA}xiGNx{U+i+F=K^#!#r9JjR$TND<X
zCewf57qVU8A~|eN%y^Ft#dJ69=*L?k#Gfj}s6Ne*HD_%TJF&u%>x(x~voA26To*8f
z^&Zy=`jDl&hft%h8#fTonc0qbGzZ#I8?88WA{8FSO5GoR?S1;OUG(B<`N49N=Y#)E
zNu&O6?{3fb0smam_N0w|jt{@Af~q$ies3~=u7Z%x(nE)z+t}&yFB$}(LLa;HL2c0(
zY^V^7CMrJRAt*?dEHN#eC|o@*BL@R$q~;c(XyGBn1P_oVnNNAG3yp!@(<TSJR#|g7
zM^`dDyCaPQ5IQ65dxqho86Hs?8xP<ZdJb!!^W%$I(xBy7^#yu1BY^FP9IdYnYTh6M
zk929@z2V#aXh8FFb??N)4#<%rIwaGQ$^~se+$c9$9Nb12OCrDX8Gh@dvzAlNx$V~{
zm+%6b_=UslMk&1wj}An_!(>KcXCMY6u-Io56W^7UMSNM=7(ByXs-hfK%uuHLy30F0
zNS-F*N&I-}rkzk3Cixy;q*;-J3hPI61L(bxSV^O@lqDr0Ku-EuJ^li@5InP<xna}%
zfosV}$VH>q7Cm};<IDQ8Tb4ecaiYK*bjs2=>_x(to!sNP(Tqikg^TCBc4ZJ>({E<+
z3AW9aPcRx@zC>%ZRKMz%4Z_vyuQbn(25Gc49lz*%{J&W5ocnj2OE&la;5?cgJpbFw
z@RKvs8#4Hlvorsa+Ao}>zjAWJfL}S)Air`FXXIdG)PHg&!+zm3@F}lxA=ZklZFI=j
zENdzU2?uItx2KZ=+<3j-KCCeDkiOE$C@OGrO1W(Y*|Ja|yzC3iucgFox^{1CL#lTX
zq%Ze1xZmy`zn_8-Z!GV9IbD({AaP@lI``eiTevBf6p$jwNkE$DxC9<Cv@cHcNWADn
zB#QgbIMAK%NMMmw1ci7MHmGo!Sm~ul=8i^lfWNoGBy`o1vH_ULDR?G#BA<FfWC>H3
zsiJZfml9AaP^{0VuVgkWyHz?=q358ArS!ohgUltSgm5o8LeRzK@9HG2ZZAbzw65_s
z7&?x-LB4nBJ#XAy5AYyjSLL^0n|yX?$k7UZbW}XVEo`F7y<u}_3^x%!MlLTs^{7bp
iq9L2{xZ-rh3!d0Se{sEqn$=9Zk=Dk;^{z9;>;DCru&~?!

literal 0
HcmV?d00001

diff --git a/examples/js/forge_loading_white.gif b/examples/js/forge_loading_white.gif
new file mode 100644
index 0000000000000000000000000000000000000000..cf5a92db971f682b5654c858743451475c5020f6
GIT binary patch
literal 9374
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

literal 0
HcmV?d00001

diff --git a/examples/js/preloader.js b/examples/js/preloader.js
new file mode 100644
index 0000000..d79e880
--- /dev/null
+++ b/examples/js/preloader.js
@@ -0,0 +1,41 @@
+import { SplatMesh } from "@forge-gfx/forge";
+import { getAssetFileURL } from "/examples/js/get-asset-url.js";
+
+// Add loading icon in the center of the screen
+function addLoader(loading_icon_color) {
+  const loaderIcon = new Image();
+  loaderIcon.src = `/examples/js/forge_loading_${loading_icon_color}.gif`;
+  loaderIcon.id = "_forge_loader";
+  loaderIcon.style.position = "absolute";
+  loaderIcon.style.zIndex = 99999;
+  loaderIcon.style.left = "50%";
+  loaderIcon.style.top = "50%";
+  loaderIcon.style.transform = "translate(-50%, -50%)";
+  loaderIcon.style.pointerEvents = "none";
+  document.body.appendChild(loaderIcon);
+}
+
+function removeLoader() {
+  const el = document.getElementById("_forge_loader");
+  el.parentNode.removeChild(el);
+}
+
+// preload splats, returning a map [filename -> SplatMesh]
+export async function preloadSplats(assets, loading_icon_color = "black") {
+  addLoader(loading_icon_color);
+  const map = {};
+  await Promise.all(
+    assets.map(async (asset) => {
+      const splatURL = await getAssetFileURL(asset);
+      return new Promise((resolve) => {
+        map[asset] = new SplatMesh({
+          url: splatURL,
+          onLoad: () => resolve(),
+        });
+      });
+    }),
+  );
+
+  removeLoader();
+  return map;
+}