website: Add hello gltf example

examples/tutorials/hello-gltf/app.ts

@@ -26,11 +26,11 @@
     super();
     this.device = device;
     this.loadGLTF('Avocado');
     const modelSelector = document.getElementById('model-select');
 
-    modelSelector.addEventListener('change', e => {
-      this.loadGLTF((e.target as HTMLSelectElement).value);
-    });
+    // modelSelector.addEventListener('change', e => {
+    //   this.loadGLTF((e.target as HTMLSelectElement).value);
+    // });
   }
 
   onFinalize() {

website/content/examples/tutorials/hello-gltf.mdx

@@ -0,0 +1,7 @@
+import {DeviceTabs} from '@site/src/react-luma';
+import {HelloGltfExample} from '@site';
+
+# Hello Gltf
+
+<DeviceTabs />
+<HelloGltfExample />

website/content/sidebar-examples.js

@@ -36,6 +36,7 @@ const sidebars = {
         'tutorials/hello-cube',
         'tutorials/lighting',
         'tutorials/hello-instancing',
+        'tutorials/hello-gltf',
         'tutorials/shader-modules',
         'tutorials/shader-hooks'
       ]

website/content/sidebar-examples.json

@@ -23,6 +23,7 @@
       "tutorials/hello-cube",
       "tutorials/lighting",
       "tutorials/hello-instancing",
+      "tutorials/hello-gltf",
       "tutorials/shader-modules",
       "tutorials/shader-hooks"
     ]

website/index.ts

@@ -2,6 +2,7 @@
 export {
   HelloTriangleExample,
   HelloCubeExample,
+  HelloGltfExample,
   LightingExample,
   HelloInstancingExample,
   InstancedTransformExample,
@@ -13,11 +14,9 @@ export {
   // GeospatialExample
   InstancingExample,
   PersistenceExample,
-
   AnimationExample,
   CubemapExample,
   Texture3DExample,
-
   HelloTriangleWebGPUExample,
   InstancedCubesWebGPUExample,
   RotatingCubeWebGPUExample,

website/src/examples/templates.tsx

@@ -17,6 +17,7 @@ import PersistenceApp from '../../../examples/showcase/persistence/app';
 // import WanderingApp from '../../../examples/showcase/wandering/app';
 
 import HelloCubeApp from '../../../examples/tutorials/hello-cube/app';
+import HelloGltfApp from '../../../examples/tutorials/hello-gltf/app';
 import HelloInstancingApp from '../../../examples/tutorials/hello-instancing/app';
 import HelloTriangleApp from '../../../examples/tutorials/hello-triangle/app';
 import LightingApp from '../../../examples/tutorials/lighting/app';
@@ -128,6 +129,15 @@ export const HelloCubeExample: React.FC = () => (
   />
 );
 
+export const HelloGltfExample: React.FC = () => (
+  <LumaExample
+    id="hello-gltf"
+    directory="tutorials"
+    template={HelloGltfApp}
+    config={exampleConfig}
+  />
+);
+
 export const HelloInstancingExample: React.FC = () => (
   <LumaExample
     id="hello-instancing"