3DModel-component

package.json

@@ -13,13 +13,15 @@
     "@types/p5": "^1.6.2",
     "@types/react": "18.2.7",
     "@types/react-dom": "18.2.4",
+    "@types/three": "^0.154.0",
     "eslint": "8.41.0",
     "eslint-config-next": "13.4.4",
     "lucide-react": "^0.260.0",
     "next": "13.4.4",
     "p5": "^1.6.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "three": "^0.154.0",
     "typescript": "5.0.4"
   }
 }

src/app/page.module.css

@@ -12,6 +12,26 @@
   font-size: 100px;
 }
 
+.home
+{
+  width: 70%;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+
+.canvasContainer
+{
+  width: 380px;
+  background-color: rgb(31, 31, 31);
+  border: 1px solid rgb(113, 113, 113);
+}
+
+.canvasContent
+{
+  height: 180px;
+}
+
 .projects
 {
   display: flex;

src/app/page.tsx

@@ -3,6 +3,7 @@ import styles from './page.module.css'
 import { Metadata } from 'next'
 import  Terminal  from '@/components/Terminal'
 import Typewriter from '@/components/Typewriter'
+import Model from '@/components/Model'
 import localFont from 'next/font/local'
 import { ChevronRight, X, Minus, Square } from 'lucide-react';
 
@@ -12,7 +13,21 @@ export default function Home() {
   return (
     <main className={styles.main}>
       <Typewriter text={'  Front-End Developer'}/> {/* TODO What is wrong with the position 1? */}
-      <Terminal/>
+        <div className={styles.home}>
+            <Terminal/>
+            <div className={styles.canvasContainer}>
+                <section className={styles.windowOptions}>
+                    <article>
+                        <Minus />
+                        <Square />
+                        <X />
+                    </article>
+                </section>
+                <section className={styles.canvasContent}>
+                    <Model/>
+                </section>    
+            </div>
+        </div>
       <h1 className={dotFont.className}>Projects</h1>
       <div className={styles.projects}>
           <div className={styles.windowContainer}>

src/components/Model.tsx

@@ -0,0 +1,51 @@
+"use client"
+import React, { useEffect, useRef } from 'react';
+import * as THREE from 'three';
+
+
+
+const AsciiCube = () => {
+    const canvasRef = useRef<HTMLCanvasElement>(null!);
+
+    useEffect(() => {
+      const canvas = canvasRef.current;
+      const renderer = new THREE.WebGLRenderer({ canvas });
+
+      const width = 380;
+      const height = 400;
+
+      canvas.style.width = `${width}px`;
+      canvas.style.height = `${height}px`;
+
+      renderer.setSize(width, height);
+
+      const scene = new THREE.Scene();
+      const camera = new THREE.PerspectiveCamera(
+        30,
+        width / height,
+        0.1,
+        1000
+      );
+      camera.position.z = 5;
+
+      const geometry = new THREE.BoxGeometry(1, 1, 1);
+      const material = new THREE.MeshBasicMaterial({ color: 0xffffff });
+      const cube = new THREE.Mesh(geometry, material);
+      scene.add(cube);
+
+      const animate = () => {
+        requestAnimationFrame(animate);
+
+        cube.rotation.x += 0.01;
+        cube.rotation.y += 0.01;
+
+        renderer.render(scene, camera);
+      };
+
+      animate();
+    }, []);
+
+    return <canvas ref={canvasRef} />;
+  };
+
+  export default AsciiCube;

src/css/terminal.module.css

@@ -1,6 +1,6 @@
 .windowContainer
 {
-    width: 50%;
+    width: 60%;
     box-sizing: border-box;
     animation: bottom 1s ease;
 }