diff --git a/blocks/file-blocks/3d-files.tsx b/blocks/file-blocks/3d-files.tsx
index bd64e17..0dcc650 100644
--- a/blocks/file-blocks/3d-files.tsx
+++ b/blocks/file-blocks/3d-files.tsx
@@ -1,48 +1,32 @@
-import { Suspense, useRef, useState, useEffect } from "react";
-import { tw } from "twind";
-import { PerspectiveCamera, useGLTF } from "@react-three/drei";
-import { Canvas, useLoader, useStore } from "@react-three/fiber";
+import { Suspense, useLayoutEffect } from "react";
+import { Stage, useGLTF } from "@react-three/drei";
+import { Canvas } from "@react-three/fiber";
import { OrbitControls } from "@react-three/drei";
import { FileBlockProps } from "@githubnext/blocks";
-import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
-
-const LControl = () => {
- // @ts-ignore
- const dom = useStore((state) => state.dom);
- const control = useRef(null);
-
- // @ts-ignore
- return ;
-};
function Model({ url }: { url: string }) {
- // need to load gltf model this way instead of with hook
- // or you get an infinite loop on the production sandbox side
- const { scene } = useLoader(GLTFLoader, url);
+ const { scene } = useGLTF(url);
+ useLayoutEffect(() => {
+ scene.traverse((object) => {
+ if (object.type === "Mesh") {
+ object.receiveShadow = object.castShadow = true;
+ }
+ });
+ }, []);
return ;
}
export default function (props: FileBlockProps) {
const { context } = props;
-
const url = `https://raw.githubusercontent.com/${context.owner}/${context.repo}/${context.sha}/${context.path}`;
-
return (
-