From d7d0eefc3f4a250ca4d8d7fc3f609fff1bf2ce09 Mon Sep 17 00:00:00 2001 From: Mark Lundin Date: Wed, 8 Jan 2025 14:20:38 +0000 Subject: [PATCH 1/3] Enhance GLB Animation Documentation and Update Component Structure - Added a new entry for 'glb-animation' in `_meta.global.ts` to improve navigation. - Refactored the animation component, renaming it from `Animation` to `LoadingGLB` for clarity. - Updated the component to include detailed comments on loading GLB files and playing animations. - Improved camera positioning and lighting settings for better visual representation. - Enhanced rendering logic by adding a `ShadowCatcher` component to the asset rendering process. These changes aim to provide clearer guidance and improved functionality for GLB animations in the documentation. --- packages/docs/src/app/_meta.global.ts | 1 + packages/docs/src/content/glb-animation.mdx | 40 ++++++++++++++------- 2 files changed, 28 insertions(+), 13 deletions(-) diff --git a/packages/docs/src/app/_meta.global.ts b/packages/docs/src/app/_meta.global.ts index ea11d39..e56c924 100644 --- a/packages/docs/src/app/_meta.global.ts +++ b/packages/docs/src/app/_meta.global.ts @@ -35,6 +35,7 @@ export default { }, 'hello-world' : '', 'pointer-events' : '', + 'glb-animation' : '', "Advanced" : { type: 'separator', }, diff --git a/packages/docs/src/content/glb-animation.mdx b/packages/docs/src/content/glb-animation.mdx index 0cb1bd2..f739bda 100644 --- a/packages/docs/src/content/glb-animation.mdx +++ b/packages/docs/src/content/glb-animation.mdx @@ -1,26 +1,40 @@ -export const Animation = () => { +export const LoadingGLB = () => { + + /** + * Loading a GLB file and playing an animation + * + * Just load the model and assign it to the Render component, + * if you want to play it' animation you can use the Anim component + */ + const { data: asset } = useModel('/t-rex.glb'); + + // if the asset is not loaded yet, don't render anything + if(!asset) return null; + return ( - {/* Create some environmental lighting. */} - + + + {/* Render the background grid */} {/* Create a camera entity */} - - + + - {/* Add some Effects */} + - - {/* Load our asset */} - - - - + {/* render the asset */} + + + + + + ) } - \ No newline at end of file + \ No newline at end of file From 3971b68a2de8e317072eb00ff16fc4cb96cdb0e2 Mon Sep 17 00:00:00 2001 From: Mark Lundin Date: Wed, 8 Jan 2025 14:35:40 +0000 Subject: [PATCH 2/3] Add LoadingGLB Component and Documentation for 3D Model Animation --- .../src/content/{glb-animation.mdx => load-3d-model.mdx} | 5 ++--- .../content/{animation.meta.tsx => load-3d-model.meta.tsx} | 0 2 files changed, 2 insertions(+), 3 deletions(-) rename packages/docs/src/content/{glb-animation.mdx => load-3d-model.mdx} (96%) rename packages/docs/src/content/{animation.meta.tsx => load-3d-model.meta.tsx} (100%) diff --git a/packages/docs/src/content/glb-animation.mdx b/packages/docs/src/content/load-3d-model.mdx similarity index 96% rename from packages/docs/src/content/glb-animation.mdx rename to packages/docs/src/content/load-3d-model.mdx index f739bda..d06a74c 100644 --- a/packages/docs/src/content/glb-animation.mdx +++ b/packages/docs/src/content/load-3d-model.mdx @@ -12,7 +12,7 @@ export const LoadingGLB = () => { // if the asset is not loaded yet, don't render anything if(!asset) return null; - return ( + return @@ -33,8 +33,7 @@ export const LoadingGLB = () => { - - ) + } \ No newline at end of file diff --git a/packages/docs/src/content/animation.meta.tsx b/packages/docs/src/content/load-3d-model.meta.tsx similarity index 100% rename from packages/docs/src/content/animation.meta.tsx rename to packages/docs/src/content/load-3d-model.meta.tsx From dd2c06f938461316a894d5fcfd96e10bf4c39337 Mon Sep 17 00:00:00 2001 From: Mark Lundin Date: Wed, 8 Jan 2025 14:38:39 +0000 Subject: [PATCH 3/3] Add Load a 3D Model Documentation and Component - Introduced a new 'load-a-3D-model' entry in `_meta.global.ts` for improved navigation. - Created `load-a-3D-model.mdx` to provide a comprehensive guide on loading GLB models and playing animations. - Added `LoadingGLB` component with detailed comments on asset loading and rendering. - Included enhanced camera and lighting settings for better visual representation. - Implemented a `ShadowCatcher` component to improve asset rendering quality. --- packages/docs/src/app/_meta.global.ts | 4 +++- .../src/content/{load-3d-model.mdx => load-a-3D-model.mdx} | 0 .../{load-3d-model.meta.tsx => load-a-3D-model.meta.tsx} | 0 3 files changed, 3 insertions(+), 1 deletion(-) rename packages/docs/src/content/{load-3d-model.mdx => load-a-3D-model.mdx} (100%) rename packages/docs/src/content/{load-3d-model.meta.tsx => load-a-3D-model.meta.tsx} (100%) diff --git a/packages/docs/src/app/_meta.global.ts b/packages/docs/src/app/_meta.global.ts index e56c924..b911f66 100644 --- a/packages/docs/src/app/_meta.global.ts +++ b/packages/docs/src/app/_meta.global.ts @@ -34,8 +34,10 @@ export default { type: 'separator', }, 'hello-world' : '', + 'load-a-3D-model' : { + 'title' : 'Load a 3D model' + }, 'pointer-events' : '', - 'glb-animation' : '', "Advanced" : { type: 'separator', }, diff --git a/packages/docs/src/content/load-3d-model.mdx b/packages/docs/src/content/load-a-3D-model.mdx similarity index 100% rename from packages/docs/src/content/load-3d-model.mdx rename to packages/docs/src/content/load-a-3D-model.mdx diff --git a/packages/docs/src/content/load-3d-model.meta.tsx b/packages/docs/src/content/load-a-3D-model.meta.tsx similarity index 100% rename from packages/docs/src/content/load-3d-model.meta.tsx rename to packages/docs/src/content/load-a-3D-model.meta.tsx