Add 3d view (#927)

.clinerules

@@ -1,3 +1,3 @@
 Test via `dotnet watch --project src`
 Don't fix warnings and typescript issues unless it relates to your task
-src/ui is svelete 5 please don't use old syntax
+src/ui is svelete 4

src/ui/package.json

@@ -23,6 +23,7 @@
 		"@tailwindcss/forms": "^0.5.9",
 		"@types/d3": "^7.4.3",
 		"@types/node": "^22.9.1",
+		"@types/three": "^0.171.0",
 		"@typescript-eslint/eslint-plugin": "^8.15.0",
 		"@typescript-eslint/parser": "^8.15.0",
 		"autoprefixer": "^10.4.20",
@@ -40,6 +41,7 @@
 		"svelte-check": "^4.1.1",
 		"svelte-eslint-parser": "^0.43.0",
 		"svelte-table": "^0.6.3",
+		"three": "^0.171.0",
 		"tslib": "^2.8.1",
 		"typescript": "^5.7.2",
 		"typescript-eslint": "^8.18.2",

src/ui/src/routes/+layout.svelte

@@ -12,6 +12,7 @@
 	import devices from '$lib/images/devices.svg';
 	import calibration from '$lib/images/calibration.svg';
 	import settings from '$lib/images/settings.svg';
+	import cube from '$lib/images/cube.svg';
 
 	initializeStores();
 
@@ -25,6 +26,7 @@
 		{ href: '/devices', name: 'devices', icon: devices, alt: 'Devices' },
 		{ href: '/nodes', name: 'nodes', icon: nodes, alt: 'Nodes' },
 		{ href: '/calibration', name: 'calibration', icon: calibration, alt: 'Calibration' },
+		{ href: '/3d', name: '3d', icon: cube, alt: '3D View' },
 	];
 </script>