fanzor

src/components/Fanzorviewer → src/components/Fanzorviewer.tsx

@@ -4,19 +4,19 @@ import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
 
 const ProteinViewer: React.FC = () => {
   useEffect(() => {
-    // Step 1: Set up the scene, camera, and renderer
+    //Set up the scene, camera, and renderer
     const scene = new THREE.Scene();
     const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
     const renderer = new THREE.WebGLRenderer({ antialias: true });
     renderer.setSize(window.innerWidth, window.innerHeight);
     document.body.appendChild(renderer.domElement);
 
-    // Step 2: Add lighting to the scene
+    //Add lighting to the scene
     const light = new THREE.DirectionalLight(0xffffff, 1);
     light.position.set(0, 1, 2);
     scene.add(light);
 
-    // Step 3: Load the GLB model using GLTFLoader
+    //Load the GLB model using GLTFLoader
     const loader = new GLTFLoader();
     loader.load(`${process.env.PUBLIC_URL}/Fanzor.glb`, (gltf) => {
       scene.add(gltf.scene);  // Add the protein model to the scene
@@ -27,7 +27,7 @@ const ProteinViewer: React.FC = () => {
 
     camera.position.z = 5; // Adjust the camera position
 
-    // Step 4: Render loop
+    //Render loop
     const animate = () => {
       requestAnimationFrame(animate);
       renderer.render(scene, camera);

src/components/three-extended.d.ts

+declare module 'three/examples/jsm/loaders/GLTFLoader' {
+    export class GLTFLoader {
+      load(
+        url: string,
+        onLoad: (gltf: { scene: THREE.Group }) => void,
+        onProgress?: (event: ProgressEvent) => void,
+        onError?: (event: ErrorEvent) => void
+      ): void;
+    }
+  }
\ No newline at end of file