fanzor

src/components/Fanzorviewer.tsx

@@ -2,21 +2,27 @@ import React, { useEffect } from 'react';
 import * as THREE from 'three';
 
 export const ProteinViewer: React.FC = () => {
+  const viewerRef = useRef<HTMLDivElement>(null); // Ref for the div container
+
   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 camera = new THREE.PerspectiveCamera(75, 1, 0.1, 1000); // Adjust aspect ratio if needed
     const renderer = new THREE.WebGLRenderer({ antialias: true });
-    renderer.setSize(window.innerWidth, window.innerHeight);
-    document.body.appendChild(renderer.domElement);
 
-    //Add lighting to the scene
+    renderer.setSize(200, 200);
+
+    // Append the renderer to the div container instead of body
+    if (viewerRef.current) {
+      viewerRef.current.appendChild(renderer.domElement);
+    }
+
     const light = new THREE.DirectionalLight(0xffffff, 1);
     light.position.set(0, 1, 2);
     scene.add(light);
 
-    camera.position.z = 5; // Adjust the camera position
-    //Render loop
+    camera.position.z = 5; 
+
+    // Render loop
     const animate = () => {
       requestAnimationFrame(animate);
       renderer.render(scene, camera);
@@ -25,11 +31,23 @@ export const ProteinViewer: React.FC = () => {
 
     // Clean up on component unmount
     return () => {
-      document.body.removeChild(renderer.domElement);
+      if (viewerRef.current) {
+        viewerRef.current.removeChild(renderer.domElement);
+      }
     };
   }, []);
 
-  return null; // No JSX to return as we're appending the canvas directly to the body
+  return (
+    <div
+      ref={viewerRef}
+      style={{
+        width: '400px', // Customize the width
+        height: '400px', // Customize the height
+        margin: '0 auto', // Center it if you want
+        border: '1px solid #ddd', // Optional: border around the viewer
+      }}
+    />
+  );
 };
 
 export default ProteinViewer;
\ No newline at end of file

src/contents/engineering.tsx

@@ -168,7 +168,7 @@ export function Engineering() {
                   <div className="bg-lb box" >
                      <H3 id="Nikase" text="Nikase"></H3>
                      <p><LoremShort></LoremShort></p>
-                     <img src="https://static.igem.wiki/teams/5247/fanzor/movie2-ezgif-com-video-to-gif-converter.gif"></img>
+                     <img src="https://static.igem.wiki/teams/5247/fanzor/movie4-ezgif-com-video-to-gif-converter.gif"></img>
                   </div>
                   <div className="box" >
                      <p id="nik1">