d

Author: austinhutchen

package.json

@@ -26,6 +26,7 @@
     "react-scroll": "^1.9.0",
     "reactstrap": "^9.2.2",
     "slick-carousel": "^1.8.1",
+    "three": "^0.162.0",
     "vercel": "^33.6.1",
     "web-vitals": "^3.5.2"
   },
@@ -59,6 +60,7 @@
     "@babel/eslint-parser": "^7.24.1",
     "@types/node": "^20.11.30",
     "@types/react-slick": "^0.23.13",
+    "@types/three": "^0.162.0",
     "@typescript-eslint/eslint-plugin": "^7.3.1",
     "@typescript-eslint/parser": "^7.3.1",
     "TagCloud": "^2.5.0",

pnpm-lock.yaml

@@ -60,6 +60,12 @@ export const NavBar: React.FC = () => {
                 <img src={feedback} width={icon_size} height={icon_size}  />
                 Feedback
               </Button>
+            </NavItem>
+              <NavItem className="nav-item">
+              <Button style={{ border: '1px solid white' }} onClick={() => nav('/Gallery')}>
+                <img src={feedback} width={icon_size} height={icon_size}  />
+                Gallery
+              </Button>
             </NavItem>
             <NavItem className="nav-item" style={{ border: '1px solid white' }}>
               <a  href="https://github.com/austinhutchen" target="_blank" rel="noopener noreferrer">

src/components/common/navbar.tsx

@@ -1,5 +1,7 @@
-import React from 'react';
+import React, { useRef, useEffect }  from 'react';
 import { NavBar } from '../common/navbar';
+import * as THREE from 'three';
+
 
 export const Visualizer: React.FC = () => {
   return (
@@ -18,8 +20,54 @@ export const Visualizer: React.FC = () => {
           <h2> Angular Webcam Streaming interface</h2>
 
         </b>
+
+        <hr className="my-4"/>
+        <b>
+          <h2> 4-DIMENSIONAL TESSERACT</h2>
+
+        </b>
+    <hr/>
+    <Tesseract/>
       </div>
     </>
   );
 };
 
+
+const Tesseract: React.FC = () => {
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!ref.current) return;
+
+    const scene = new THREE.Scene();
+    const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
+    const renderer = new THREE.WebGLRenderer();
+
+    renderer.setSize(window.innerWidth, window.innerHeight);
+    ref.current.appendChild(renderer.domElement);
+
+    const geometry = new THREE.BoxGeometry(1, 1, 1);
+    const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
+    const cube = new THREE.Mesh(geometry, material);
+
+    scene.add(cube);
+
+    camera.position.z = 5;
+
+    const animate = function () {
+      requestAnimationFrame(animate);
+
+      cube.rotation.x += 0.01;
+      cube.rotation.y += 0.01;
+
+      renderer.render(scene, camera);
+    };
+
+    animate();
+  }, []);
+
+  return <div ref={ref} />;
+};
+
+export default Tesseract;