Stable

package.json

@@ -0,0 +1 @@
+{ "dependencies": { "@types/three": "^0.168.0" } }

src/global.d.ts

@@ -0,0 +1,5 @@
+declare module '*.svelte' {
+	import type { ComponentType } from 'svelte';
+	const component: ComponentType;
+	export default component;
+}

src/package.json

@@ -1,6 +1,6 @@
 {
-	"name": "client",
-	"version": "0.0.1",
+	"name": "class-connect",
+	"version": "0.3.1",
 	"scripts": {
 		"dev": "vite dev --open",
 		"build": "vite build",
@@ -69,26 +69,24 @@
 		"@sendgrid/mail": "^8.1.3",
 		"@stream-io/node-sdk": "^0.2.6",
 		"@stream-io/video-client": "^1.4.4",
-		"@sveltejs/adapter-vercel": "^5.4.1",
+		"@sveltejs/adapter-vercel": "^5.4.3",
 		"@threlte/core": "^7.3.1",
 		"@threlte/extras": "^8.11.4",
 		"@threlte/xr": "^0.1.4",
 		"@types/canvas-confetti": "^1.6.4",
-		"@types/recordrtc": "^5.6.14",
-		"@vue/test-utils": "^2.4.6",
+		"@types/three": "^0.168.0",
+		"@vercel/analytics": "^1.3.1",
+		"@vercel/speed-insights": "^1.0.12",
 		"aws-sdk": "^2.1670.0",
 		"axios": "^1.7.2",
 		"bcrypt": "^5.1.1",
 		"canvas-confetti": "^1.9.3",
-		"i": "^0.3.7",
 		"mongodb": "^6.8.0",
 		"mongoose": "^8.4.5",
-		"npm": "^10.8.2",
 		"playroomkit": "^0.0.79",
-		"recordrtc": "^5.6.2",
 		"stream-chat": "^8.37.0",
 		"svelte-french-toast": "^1.2.0",
 		"svelte-tweakpane-ui": "^1.3.0",
-		"three": "^0.165.0"
+		"three": "^0.168.0"
 	}
 }

src/src/app.d.ts

@@ -25,6 +25,52 @@ declare global {
 		content: string;
 		createdBy: string;
 	}
+
+	interface GradeData {
+		_id: string;
+		studentID: string;
+		quizID: string;
+		workspaceID: string;
+		mark: number;
+	}
+
+	interface QuizData {
+		_id: string;
+		title: string;
+		totalPossibleScore: number;
+	}
+
+	interface AssessmentStat {
+		name: string;
+		submitted: number;
+		average: number;
+		passRate: number;
+	}
+
+	interface StudentGrade {
+		name: string;
+		grades: number[];
+	}
+
+	interface Lesson {
+		id: string;
+		time: string;
+		date: string;
+		topic: string;
+		workspace: string;
+		recurrence: string;
+		description: string;
+	}
+
+	interface Recording {
+		id: string;
+		url: string;
+		time: string;
+		date: string;
+		topic: string;
+		workspace: string;
+		description: string;
+	}
 }
 
 export {};

src/src/lib/components/annotations/3dAnnotations.svelte

@@ -0,0 +1,259 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import * as THREE from 'three';
+	import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
+	import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
+	import { CSS2DRenderer, CSS2DObject } from 'three/examples/jsm/renderers/CSS2DRenderer.js';
+	import Menu from '$lib/components/hotspot/3dMenu.svelte';
+	import { Button } from 'flowbite-svelte';
+
+	let canvas: HTMLCanvasElement;
+	let camera: THREE.PerspectiveCamera, scene: THREE.Scene, renderer: THREE.WebGLRenderer;
+	let controls: OrbitControls;
+	let labelRenderer: CSS2DRenderer;
+	let raycaster: THREE.Raycaster;
+	let mouse: THREE.Vector2;
+	let annotationMode = false; // Toggle for annotation mode
+	let annotationText = '';
+	let activePoint: THREE.Vector3 | null = null;
+	let tooltipX: number = 0;
+	let tooltipY: number = 0;
+
+	export let data: {
+		role: string;
+		models: { title: string; file_path: string; description: string }[];
+	};
+
+	let { models } = data;
+	let selectedModel: string | null = null;
+	const annotations: {
+		[key: string]: { position: THREE.Vector3; text: string; labelDiv: HTMLDivElement };
+	} = {};
+
+	function toggleAnnotationMode() {
+		annotationMode = !annotationMode;
+		if (!annotationMode) {
+			activePoint = null; // Clear active point when exiting annotation mode
+		}
+	}
+
+	function addAnnotation() {
+		if (annotationText.trim() && activePoint) {
+			createAnnotation(activePoint, annotationText);
+			annotationText = ''; // Clear text after adding
+			activePoint = null; // Clear active point
+		}
+	}
+
+	function createAnnotation(position: THREE.Vector3, text: string) {
+		// Create a circle as a THREE.Sprite
+		const circleTexture = new THREE.TextureLoader().load('/images/circle.png');
+		const spriteMaterial = new THREE.SpriteMaterial({
+			map: circleTexture,
+			depthTest: false,
+			depthWrite: false,
+			sizeAttenuation: false
+		});
+		const sprite = new THREE.Sprite(spriteMaterial);
+		sprite.position.copy(position);
+		sprite.scale.set(0.05, 0.05, 0.05);
+		scene.add(sprite);
+
+		const labelDiv = document.createElement('div');
+		labelDiv.className = 'annotation-label';
+		labelDiv.textContent = text;
+		const label = new CSS2DObject(labelDiv);
+		label.position.copy(position);
+		scene.add(label);
+
+		annotations[text] = { position, text, labelDiv };
+	}
+
+	function onMouseClick(event: MouseEvent) {
+		if (!annotationMode) return;
+
+		const rect = canvas.getBoundingClientRect();
+		mouse.x = ((event.clientX - rect.left) / rect.width) * 2 - 1;
+		mouse.y = -((event.clientY - rect.top) / rect.height) * 2 + 1;
+
+		raycaster.setFromCamera(mouse, camera);
+		const intersects = raycaster.intersectObjects(scene.children, true);
+
+		if (intersects.length > 0) {
+			const point = intersects[0].point;
+			activePoint = point;
+
+			const vector = new THREE.Vector3();
+			vector.copy(activePoint).project(camera);
+
+			const canvas = renderer.domElement;
+			const widthHalf = 0.5 * canvas.width;
+			const heightHalf = 0.5 * canvas.height;
+
+			tooltipX = vector.x * widthHalf + widthHalf;
+			tooltipY = -(vector.y * heightHalf) + heightHalf;
+		}
+	}
+
+	onMount(() => {
+		initScene();
+		animate();
+
+		window.addEventListener('click', onMouseClick);
+	});
+
+	function initScene() {
+		scene = new THREE.Scene();
+		camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
+		camera.position.z = 5;
+
+		renderer = new THREE.WebGLRenderer({ canvas });
+		renderer.setSize(window.innerWidth, window.innerHeight);
+		renderer.setClearColor(0xffffff);
+
+		labelRenderer = new CSS2DRenderer();
+		labelRenderer.setSize(window.innerWidth, window.innerHeight);
+		labelRenderer.domElement.style.position = 'absolute';
+		labelRenderer.domElement.style.top = '0';
+		labelRenderer.domElement.style.pointerEvents = 'none';
+		document.body.appendChild(labelRenderer.domElement);
+
+		raycaster = new THREE.Raycaster();
+		mouse = new THREE.Vector2();
+
+		const ambientLight = new THREE.AmbientLight(0x404040);
+		scene.add(ambientLight);
+		const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
+		directionalLight.position.set(1, 1, 1).normalize();
+		scene.add(directionalLight);
+
+		controls = new OrbitControls(camera, renderer.domElement);
+		controls.enableDamping = true;
+		controls.dampingFactor = 0.25;
+		controls.enableRotate = true;
+
+		window.addEventListener('resize', onWindowResize, false);
+	}
+
+	function loadModel(file_path: string) {
+		const loader = new GLTFLoader();
+		loader.load(file_path, (gltf) => {
+			scene.add(gltf.scene);
+		});
+	}
+
+	function handleModelSelection(file_path: string) {
+		selectedModel = file_path;
+		localStorage.setItem('selectedModel', selectedModel);
+		loadModel(file_path);
+	}
+
+	function animate() {
+		requestAnimationFrame(animate);
+
+		// Get the canvas's bounding rect
+		if (!canvas) return;
+		const rect = canvas.getBoundingClientRect();
+		const canvasWidth = rect.width;
+		const canvasHeight = rect.height;
+
+		Object.values(annotations).forEach(({ position, labelDiv }) => {
+			const spriteScreenPosition = position.clone().project(camera);
+
+			//  normalized coordinates to pixel coordinates
+			const widthHalf = canvasWidth / 2;
+			const heightHalf = canvasHeight / 2;
+			const spriteX = spriteScreenPosition.x * widthHalf + widthHalf;
+			const spriteY = -(spriteScreenPosition.y * heightHalf) + heightHalf;
+
+			// Update the label's position
+			labelDiv.style.position = 'absolute';
+			labelDiv.style.left = `${spriteX + rect.left}px`;
+			labelDiv.style.top = `${spriteY + rect.top}px`;
+
+			console.log(`Sprite Position: ${spriteX}, ${spriteY}`);
+			console.log(`Canvas Bounds: ${rect.left}, ${rect.top}, ${rect.width}, ${rect.height}`);
+
+			// Show/hide labels based on visibility
+			if (
+				spriteScreenPosition.z < 0 ||
+				spriteX < 0 ||
+				spriteX > canvasWidth ||
+				spriteY < 0 ||
+				spriteY > canvasHeight
+			) {
+				labelDiv.style.display = 'none';
+			} else {
+				labelDiv.style.display = 'block';
+			}
+		});
+
+		// Render the scene and labels
+		renderer.render(scene, camera);
+		labelRenderer.render(scene, camera);
+	}
+
+	function onWindowResize() {
+		camera.aspect = window.innerWidth / window.innerHeight;
+		camera.updateProjectionMatrix();
+		renderer.setSize(window.innerWidth, window.innerHeight);
+		labelRenderer.setSize(window.innerWidth, window.innerHeight);
+	}
+</script>
+
+<div class="scene-wrapper">
+	<Menu {models} onModelSelect={handleModelSelection} />
+	<Button on:click={toggleAnnotationMode}>
+		{annotationMode ? 'Exit Annotation Mode' : 'Enter Annotation Mode'}
+	</Button>
+	<canvas bind:this={canvas}></canvas>
+
+	<!-- Annotation input -->
+	{#if annotationMode && activePoint}
+		<div class="annotation-input" style="left: {tooltipX}px; top: {tooltipY}px;">
+			<input type="text" bind:value={annotationText} placeholder="Enter annotation" />
+			<button on:click={addAnnotation}>Add Annotation</button>
+		</div>
+	{/if}
+</div>
+
+<style>
+	.scene-wrapper {
+		position: relative;
+		width: 100%;
+		height: 100vh;
+	}
+
+	canvas {
+		width: 100%;
+		height: calc(100vh / 4);
+		max-width: 100%;
+		object-fit: contain;
+	}
+
+	.annotation-input {
+		position: absolute;
+		background: white;
+		border: 1px solid black;
+		padding: 5px;
+		box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+		z-index: 1000;
+	}
+
+	.annotation-input input {
+		width: 100px; /* Adjust width */
+	}
+
+	.annotation-input button {
+		margin-top: 5px;
+	}
+
+	:global(.annotation-label) {
+		background-color: rgba(41, 39, 39, 0.7);
+		padding: 2px 5px;
+		border-radius: 3px;
+		font-size: 12px;
+		pointer-events: none;
+		user-select: none;
+	}
+</style>