update route preview

src/preview /lib/model-viewer/Model.tsx

@@ -0,0 +1,30 @@
+import React, { ForwardedRef, forwardRef, useMemo } from 'react';
+import { Mesh, MeshPhysicalMaterial, Object3D, PerspectiveCamera } from 'three';
+import { useGLTF } from '@react-three/drei';
+import * as SkeletonUtils from 'three/examples/jsm/utils/SkeletonUtils';
+import { useThree } from '@react-three/fiber';
+import { fitCameraToObject } from './fitCameraToObject';
+import { BufferGeometry } from 'three/src/core/BufferGeometry';
+
+export const Model = forwardRef(({ url }: { url: string }, ref: ForwardedRef<Object3D>) => {
+  const { camera } = useThree();
+  const { scene } = useGLTF(url);
+
+  const model = useMemo(() => {
+    const model = (SkeletonUtils as any).clone(scene);
+    model.traverse((el: Mesh<BufferGeometry, MeshPhysicalMaterial>) => {
+      if (el.type === 'Mesh') {
+        el.material.reflectivity = 0.0;
+        el.material.fog = false;
+        el.material.color.setHex(0xffffff);
+      }
+    });
+
+    fitCameraToObject(camera as PerspectiveCamera, scene);
+    scene.updateWorldMatrix(true, true);
+
+    return model;
+  }, [scene, camera]);
+
+  return <primitive key={url} object={model} ref={ref} />;
+});