Enhance documentation and components for GLB asset handling

- Introduced a new `Glb` component for loading GLB assets, replacing the previous `GlbAsset` component.
- Updated `mdx-components.js` to include the new `Glb` component in the default export.
- Refactored `route.ts` to import additional utilities for file handling.
- Modified `getting-started` documentation to reflect the changes in GLB asset usage.

This update improves the asset loading process and enhances the clarity of the documentation.

packages/docs/mdx-components.js

@@ -11,6 +11,7 @@ import PostEffects, { StaticPostEffects} from '@components/PostEffects'
 import ShadowCatcher from '@components/ShadowCatcher'
 import AutoRotate from '@components/AutoRotate'
 import { MotionEntity, MotionLight } from '@components/MotionEntity'
+import { Glb } from '@components/Glb'
 const docsComponents = getDocsMDXComponents()
 
 export const defaultComponents = {
@@ -26,7 +27,8 @@ export const defaultComponents = {
   StaticPostEffects,
   AutoRotate,
   MotionEntity,
-  MotionLight
+  MotionLight,
+  Glb
 }
 
 export function useMDXComponents(components) {

packages/docs/src/app/api/codesandbox/route.ts

@@ -1,5 +1,6 @@
-import { readFiles } from "@/docs-components/utils/file-utils";
+import { filePathRegex, readFiles } from "@/docs-components/utils/file-utils";
 import path from "path";
+import fs from 'fs/promises';
 
 
 export async function POST(request: Request) {

packages/docs/src/app/docs/guide/getting-started/page.mdx

@@ -25,7 +25,7 @@ Here's what it should look like...
 
         <Entity>
             {/* Load our asset */}
-            <GlbAsset src='/lamborghini_vision_gt.glb' />
+            <Glb src='/lamborghini_vision_gt.glb' />
             {/* Adds some ground plane shadowing */}
             <ShadowCatcher intensity={0.9} />
         </Entity>
@@ -152,13 +152,13 @@ export default function App() {
             </Entity>
         </Entity>
         <Entity name='model' scale={[4, 4, 4]}>
-            <GlbAsset src='/lamborghini_vision_gt.glb' />
+            <Glb src='/lamborghini_vision_gt.glb' />
         </Entity>
     </Application>
 }
 ```
 
-You should now see the Lamborghini model in the scene.  Note here that we've added the `GlbAsset` component to the `Entity` that contains the model. This isn't part of the `@playcanvas/react` library, but it's a simple component that wraps the `useModel` hook to make it easier to use in a React component. You can read more about [loading assets here](/docs/guide/loading-assets).
+You should now see the Lamborghini model in the scene.  Note here that we've added the `Glb` component to the `Entity` that contains the model. This isn't part of the `@playcanvas/react` library, but it's a simple component that wraps the `useModel` hook to make it easier to use in a React component. You can read more about [loading assets here](/docs/guide/loading-assets).
 
 ### Putting it all together
 
@@ -182,9 +182,9 @@ export default function App() {
             <AutoRotate />
         </Entity>
         <Entity name='model'>
-            <GlbAsset src='/lamborghini_vision_gt.glb' >
+            <Glb src='/lamborghini_vision_gt.glb' >
                 <ShadowCatcher intensity={0.9} />
-            </GlbAsset>
+            </Glb>
         </Entity>
     </Application>
 }

packages/docs/src/components/Glb.tsx

@@ -0,0 +1,17 @@
+'use client'
+
+import { Container } from "@playcanvas/react";
+import { useModel } from "./hooks/use-asset";
+import { Asset } from "playcanvas";
+
+export const Glb = ({ src, children }: { src: string, children?: React.ReactNode }) => {
+
+    const { data: model, isLoading, error } = useModel(src);
+
+    if (isLoading) return null;
+    if (error) return null;
+
+    return <Container asset={model as Asset}>
+        {children}
+    </Container>
+}