feat: add onLoaded handler for environment model

readyplayerme · Aug 24, 2023 · e149ad5 · e149ad5
1 parent eabe992
commit e149ad5
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 4 deletions.
diff --git a/src/components/Avatar/Examples.stories.tsx b/src/components/Avatar/Examples.stories.tsx
@@ -113,7 +113,11 @@ environmentModel.args = {
   environmentScale: 1.0,
   shadows: true,
   modelSrc: modelPresets.one,
-  animationSrc: animationPresets.one
+  animationSrc: animationPresets.one,
+  environment: 'warehouse',
+  /* eslint-disable no-console */
+  onLoaded: () => console.info('EVENT: environment model loaded')
+  /* eslint-enable no-console */
 };
 environmentModel.argTypes = {
   ...ignoreArgTypesOnExamples,

diff --git a/src/components/Models/EnvironmentModel/EnvironmentModel.component.tsx b/src/components/Models/EnvironmentModel/EnvironmentModel.component.tsx
@@ -1,5 +1,5 @@
-import React, { FC } from 'react';
-import { useFallback, useGltfLoader, CustomNode, Transform } from 'src/services';
+import React, { FC, useEffect } from 'react';
+import { useFallback, useGltfLoader, CustomNode, Transform, triggerCallback } from 'src/services';
 import { useGraph } from '@react-three/fiber';
 import { BaseModelProps } from 'src/types';
 import { EnvironmentModels } from 'src/services/Environment.service';
@@ -9,12 +9,13 @@ export interface EnvironmentModelProps extends BaseModelProps {
   scale?: number;
 }
 
-export const EnvironmentModel: FC<EnvironmentModelProps> = ({ environment, scale = 1, setModelFallback }) => {
+export const EnvironmentModel: FC<EnvironmentModelProps> = ({ environment, scale = 1, setModelFallback, onLoaded }) => {
   const transform = new Transform();
   const { scene } = useGltfLoader(environment);
   const { nodes } = useGraph(scene);
 
   useFallback(nodes, setModelFallback);
+  useEffect(() => triggerCallback(onLoaded), [scene, onLoaded]);
 
   return (
     <group>