From df25d7ffddd4cb44831c54308280c4ae4ed2c2ad Mon Sep 17 00:00:00 2001
From: asal sahami <asalsahami22@gmail.com>
Date: Wed, 25 Sep 2024 18:35:44 +0200
Subject: [PATCH] fanzor
---
src/components/Fanzorviewer.tsx | 36 ++++++++++++++++++++++++---------
src/contents/engineering.tsx | 2 +-
2 files changed, 28 insertions(+), 10 deletions(-)
diff --git a/src/components/Fanzorviewer.tsx b/src/components/Fanzorviewer.tsx
index 694460ce..65029ebf 100644
--- a/src/components/Fanzorviewer.tsx
+++ b/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
diff --git a/src/contents/engineering.tsx b/src/contents/engineering.tsx
index 5ee6faaa..d0b2ead0 100644
--- a/src/contents/engineering.tsx
+++ b/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">
--
GitLab