From 8ebe95a2426d8e7ac330ad9aabde1f68e66ee773 Mon Sep 17 00:00:00 2001
From: raigo132 <raigo.kovask@gmail.com>
Date: Wed, 7 Jun 2023 16:50:34 +0300
Subject: [PATCH] fix(asset): refresh fit, when the model is loaded

---
 .../Models/BoundsModel/BoundsModel.container.tsx   | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/components/Models/BoundsModel/BoundsModel.container.tsx b/src/components/Models/BoundsModel/BoundsModel.container.tsx
index 5fa5afac..7c7a0d82 100644
--- a/src/components/Models/BoundsModel/BoundsModel.container.tsx
+++ b/src/components/Models/BoundsModel/BoundsModel.container.tsx
@@ -1,4 +1,4 @@
-import React, { FC, ReactNode, useEffect, useState, cloneElement, useMemo, ReactElement } from 'react';
+import React, { FC, ReactNode, useEffect, useState, cloneElement, useMemo, ReactElement, useCallback } from 'react';
 import { useBounds } from '@react-three/drei';
 import { BaseModelProps } from 'src/types';
 
@@ -12,10 +12,18 @@ export const BoundsModelContainer: FC<BoundsModelContainerProps> = ({ modelSrc,
   const bounds = useBounds();
   const [fallback, setFallback] = useState<JSX.Element>(<></>);
 
+  const onChildLoaded = useCallback(() => {
+    if (fit) {
+      bounds.refresh().clip().fit();
+    }
+  }, [bounds, fit]);
+
   const childModel = useMemo(
     () =>
-      React.Children.map(children, (child) => cloneElement(child as ReactElement, { setModelFallback: setFallback })),
-    [modelSrc, children]
+      React.Children.map(children, (child) =>
+        cloneElement(child as ReactElement, { setModelFallback: setFallback, onLoaded: onChildLoaded })
+      ),
+    [modelSrc, children, onChildLoaded]
   );
 
   useEffect(() => {