Fanzorviewer.tsx

import React, { useEffect } from 'react';
import * as THREE from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';

const ProteinViewer: React.FC = () => {
  useEffect(() => {
    //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);

    //Add lighting to the scene
    const light = new THREE.DirectionalLight(0xffffff, 1);
    light.position.set(0, 1, 2);
    scene.add(light);

    //Load the GLB model using GLTFLoader
    const loader = new GLTFLoader();
    loader.load(`${process.env.PUBLIC_URL}/models/Fanzorviewer.glb`, (gltf) => {
      scene.add(gltf.scene);  // Add the protein model to the scene
      renderer.render(scene, camera);
    }, undefined, (error) => {
      console.error('An error happened while loading the GLB model:', error);
    });

    camera.position.z = 5; // Adjust the camera position

    //Render loop
    const animate = () => {
      requestAnimationFrame(animate);
      renderer.render(scene, camera);
    };
    animate();

    // Clean up on component unmount
    return () => {
      document.body.removeChild(renderer.domElement);
    };
  }, []);

  return null; // No JSX to return as we're appending the canvas directly to the body
};

export default ProteinViewer;