Spike: [#20] ThreeJS integration

package.json

@@ -11,5 +11,9 @@
   "devDependencies": {
     "typescript": "~5.6.2",
     "vite": "^6.0.5"
+  },
+  "dependencies": {
+    "@types/three": "^0.173.0",
+    "three": "^0.173.0"
   }
 }

src/components/vertical-nav/project-data-cube.ts

@@ -0,0 +1,30 @@
+import * as THREE from 'three';
+
+// TO REVIEW
+// @ts-ignore
+import {OrbitControls} from "three/examples/jsm/controls/OrbitControls";
+
+const scene = new THREE.Scene();
+const camera = new THREE.PerspectiveCamera( 75, 1, 0.1, 1000 );
+
+export const renderer = new THREE.WebGLRenderer();
+renderer.setSize( 230, 230 );
+renderer.setAnimationLoop( animate );
+
+const geometry = new THREE.BoxGeometry( 1, 1, 1 );
+const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
+const cube = new THREE.Mesh( geometry, material );
+
+const controls = new OrbitControls( camera, renderer.domElement );
+scene.add( cube );
+
+camera.position.z = 2;
+controls.panSpeed = 0;
+controls.rotateSpeed = 0.5;
+controls.update();
+
+//-----------------------------------------------------------------------
+
+function animate() {
+    renderer.render( scene, camera );
+}

src/components/vertical-nav/project-nav.ts

@@ -1,4 +1,6 @@
-export type AboutProject = {
+import {renderer} from "./project-data-cube.ts";
+
+export type AboutProject = {
     readonly release: string;
     readonly platforms: string;
     readonly developer: string;
@@ -17,6 +19,8 @@ export function projectInfo(about: AboutProject, links: RelatedLinks[]) {
 
     navWrapper?.appendChild(section);
 
+    section.appendChild(sectionData());
+
     if (typeof about === "object" && typeof links === "object") {
         section.appendChild(sectionAboutTheGame(about));
         section.appendChild(sectionRelatedLinks(links));
@@ -30,6 +34,19 @@ export function projectInfo(about: AboutProject, links: RelatedLinks[]) {
 
 //-----------------------------------------------------------------------
 
+function sectionData() {
+    const detailSection = document.createElement("div");
+    const detailTitle = document.createElement("h4");
+
+    detailSection.className = "detail-section";
+    detailTitle.textContent = "Tech Distribution";
+
+    detailSection.appendChild(detailTitle);
+    detailSection.appendChild(renderer.domElement);
+
+    return detailSection;
+}
+
 function sectionAboutTheGame(about: AboutProject) {
     const detailSection = document.createElement('div');
     const detailTitle = document.createElement("h4");