Feature/3dtruefalse

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

@@ -85,10 +85,12 @@
 		annotations[text] = { position, text, labelDiv, sprite };
 	}
 
-	export function removeAnnotation(text: string) {
+	function removeAnnotation(text: string) {
 		const annotation = annotations[text];
-		if (annotation) {
-			document.body.removeChild(annotation.labelDiv);
+		console.log('Removing annotation', annotation.labelDiv);
+		if (annotation && annotation.labelDiv.parentNode) {
+			console.log('Removing annotation', annotation.labelDiv);
+			annotation.labelDiv.remove();
 			scene.remove(annotation.sprite);
 			delete annotations[text];
 		}
@@ -135,6 +137,12 @@
 		}
 		window.addEventListener('click', onMouseClick);
 		window.addEventListener('beforeunload', handleBeforeUnload);
+
+		document.addEventListener('removeAllAnnotations', () => {
+			Object.keys(annotations).forEach((text) => {
+				removeAnnotation(text);
+			});
+		});
 		return () => {
 			window.removeEventListener('beforeunload', handleBeforeUnload);
 			window.removeEventListener('click', onMouseClick);
@@ -153,7 +161,7 @@
 		raycaster = new THREE.Raycaster();
 		mouse = new THREE.Vector2();
 
-		const ambientLight = new THREE.AmbientLight(0x404040);
+		const ambientLight = new THREE.AmbientLight(0xffffff, 0.9);
 		scene.add(ambientLight);
 		const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
 		directionalLight.position.set(1, 1, 1).normalize();
@@ -179,6 +187,7 @@
 	}
 
 	function removeAllAnnotations() {
+		console.log('removeAllAnnotations called');
 		Object.keys(annotations).forEach((text) => {
 			removeAnnotation(text);
 		});
@@ -187,9 +196,6 @@
 	function handleModelSelection(file_path: string) {
 		removeAllAnnotations();
 		loadModel(file_path);
-		const url = new URL(window.location.href);
-		url.searchParams.set('model', file_path);
-		window.history.pushState({}, '', url);
 	}
 
 	function animate() {

src/src/lib/components/hotspot/3dhotspot.svelte

@@ -7,15 +7,26 @@
 
 	import { TransformControls } from 'three/addons/controls/TransformControls.js';
 	import Menu from './3dMenu.svelte';
-
-	import { spherePosition } from '$lib/store/position';
+	import { selectedModel, modelSphereData, spherePosition } from '$lib/store/model';
 
 	export let data: {
 		role: string;
 		models: { title: string; file_path: string; description: string }[];
+		questions: {
+			id: string;
+			questionNumber: number;
+			questionContent: string;
+			questionPoints: number;
+			questionType: string;
+			modelPath: string;
+			options: { content: string; points: number }[] | null;
+		}[];
 	};
 
-	let { models } = data;
+	let { role, models, questions } = data;
+	if (role === 'student') {
+		console.log('Questions', questions);
+	}
 
 	let canvas: HTMLCanvasElement;
 	let camera: THREE.PerspectiveCamera, scene: THREE.Scene, renderer: THREE.WebGLRenderer;
@@ -24,16 +35,12 @@
 	let draggableSphere: THREE.Mesh;
 	let transformControls: TransformControls;
 	let currentModel: THREE.Object3D | null = null;
+	let isLoading = false;
+	console.log(isLoading);
 
 	onMount(() => {
 		initScene();
 		animate();
-		const urlParams = new URLSearchParams(window.location.search);
-		const modelPath = urlParams.get('model');
-
-		if (modelPath) {
-			loadModel(modelPath);
-		}
 	});
 
 	function initScene() {
@@ -46,13 +53,41 @@
 		renderer.setClearColor(0xffffff);
 
 		// Add lighting
-		const ambientLight = new THREE.AmbientLight(0x404040);
+		const ambientLight = new THREE.AmbientLight(0xffffff, 0.9);
 		scene.add(ambientLight);
-		const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
-		directionalLight.position.set(1, 1, 1).normalize();
+
+		const directionalLight = new THREE.DirectionalLight(0xffffff, 1.9);
+		directionalLight.castShadow = true;
+		directionalLight.shadow.radius = 4;
 		scene.add(directionalLight);
 
-		if (data.role === 'lecturer') {
+		// Add point lights
+		const pointLight1 = new THREE.PointLight(0xffffff, 1.9);
+		pointLight1.position.set(0, 5, 5);
+		pointLight1.castShadow = true;
+		scene.add(pointLight1);
+
+		const pointLight2 = new THREE.PointLight(0xffffff, 1.9);
+		pointLight2.position.set(0, -5, 5);
+		pointLight2.castShadow = true;
+		scene.add(pointLight2);
+
+		const pointLight3 = new THREE.PointLight(0xffffff, 1.9);
+		pointLight3.position.set(5, 5, 0);
+		pointLight3.castShadow = true;
+		scene.add(pointLight3);
+
+		const pointLight4 = new THREE.PointLight(0xffffff, 1.9);
+		pointLight4.position.set(-5, -5, 0);
+		pointLight3.castShadow = true;
+		scene.add(pointLight4);
+
+		const pointLight5 = new THREE.PointLight(0xffffff, 1.9);
+		pointLight5.position.set(0, 0, -5);
+		pointLight5.castShadow = true;
+		scene.add(pointLight5);
+
+		if (role === 'lecturer') {
 			// Create a draggable sphere
 			const sphereGeometry = new THREE.SphereGeometry(0.1);
 			const sphereMaterial = new THREE.MeshBasicMaterial({
@@ -73,12 +108,24 @@
 			//sphere transform
 			transformControls.addEventListener('mouseDown', () => {
 				controls.enabled = false;
+				$spherePosition.copy(draggableSphere.position);
+				modelSphereData.set({
+					file_path: $selectedModel,
+					position: draggableSphere.position.clone()
+				});
 			});
 			transformControls.addEventListener('mouseUp', () => {
 				controls.enabled = true;
 				$spherePosition.copy(draggableSphere.position);
 			});
-		} else if (data.role === 'student') {
+		} else if (role === 'student') {
+			//loadModel
+			questions.forEach((question) => {
+				if (question.modelPath) {
+					loadModel(question.modelPath);
+				}
+			});
+
 			// Create and add the new pin
 			const pinGeometry = new THREE.SphereGeometry(0.05);
 			const pinMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000 });
@@ -113,8 +160,24 @@
 		window.addEventListener('resize', onWindowResize, false);
 	}
 
+	const loadingManager = new THREE.LoadingManager(
+		() => {
+			isLoading = false;
+		},
+		(itemUrl, itemsLoaded, itemsTotal) => {
+			// Update progress
+			console.log(`Loaded ${itemsLoaded} of ${itemsTotal}`);
+		},
+		(url) => {
+			// Handle loading error
+			console.error(`Error loading ${url}`);
+		}
+	);
+
+	const loader = new GLTFLoader(loadingManager);
+
 	function loadModel(file_path: string) {
-		const loader = new GLTFLoader();
+		isLoading = true;
 		loader.load(file_path, (gltf) => {
 			if (currentModel) {
 				scene.remove(currentModel);
@@ -130,21 +193,6 @@
 		renderer.render(scene, camera);
 	}
 
-	// function getSavedSpherePosition(): THREE.Vector3 {
-	// 	const savedPosition = localStorage.getItem('spherePosition');
-	// 	if (savedPosition) {
-	// 		const [x, y, z] = JSON.parse(savedPosition);
-	// 		return new THREE.Vector3(x, y, z);
-	// 	}
-	// 	return new THREE.Vector3();
-	// }
-
-	// function checkProximity(pin: THREE.Mesh) {
-	// 	const distance = pin.position.distanceTo(savedSpherePosition);
-	// 	const isCorrect = distance <= 0.2;
-	// 	return isCorrect;
-	// }
-
 	function onWindowResize() {
 		camera.aspect = window.innerWidth / window.innerHeight;
 		camera.updateProjectionMatrix();
@@ -153,14 +201,12 @@
 
 	function handleModelSelection(file_path: string) {
 		loadModel(file_path);
-		const url = new URL(window.location.href);
-		url.searchParams.set('model', file_path);
-		window.history.pushState({}, '', url);
+		selectedModel.set(file_path);
 	}
 </script>
 
 <div class="scene-wrapper">
-	{#if data.role === 'lecturer'}
+	{#if role === 'lecturer'}
 		<div class="flex items-center space-x-4">
 			<Menu {models} onModelSelect={handleModelSelection} />
 			<P class=" font-semibold text-violet-700">

src/src/lib/components/questions/3Dform.svelte

@@ -2,10 +2,14 @@
 	import { enhance } from '$app/forms';
 	import { Button, Input, Textarea, NumberInput, Label } from 'flowbite-svelte';
 	import { createEventDispatcher } from 'svelte';
+	import { selectedModel } from '$lib/store/model';
 
 	export let open: boolean;
 	const dispatch = createEventDispatcher();
 	let error: string;
+	let modelPath: string;
+
+	modelPath = $selectedModel;
 
 	function close() {
 		return async ({ result, update }: any) => {
@@ -61,6 +65,8 @@
 			<slot name="scene" />
 		</div>
 
+		<input type="hidden" name="modelPath" value={modelPath} />
+
 		<Button type="submit" class="mt-10 w-full">Submit Question</Button>
 	</form>
 </main>

src/src/lib/components/questions/trueFalseForm.svelte

@@ -11,6 +11,7 @@
 		return async ({ result, update }: any) => {
 			if (result.type === 'success') {
 				await update();
+
 				open = false;
 				dispatch('formSubmitted');
 			} else {

src/src/lib/server/database/schemas/Question.ts

@@ -32,6 +32,11 @@ const questionSchema = new mongoose.Schema({
 		required: false
 	},
 
+	modelPath: {
+		type: String,
+		required: false
+	},
+
 	options: {
 		type: [optionSchema],
 		required: false

src/src/lib/store/model.ts

@@ -1,3 +1,6 @@
 import { writable } from 'svelte/store';
+import * as THREE from 'three';
 
+export const spherePosition = writable(new THREE.Vector3());
 export const selectedModel = writable('');
+export const modelSphereData = writable({ file_path: '', position: new THREE.Vector3() });

src/src/lib/store/position.ts

@@ -1,5 +1,4 @@
 import { writable } from 'svelte/store';
 import * as THREE from 'three';
 
-// Store to track sphere position as a THREE.Vector3
 export const spherePosition = writable<THREE.Vector3>(new THREE.Vector3());