Improve MarkerTracking

frontend-vue/src/components/ar-component/ArComponent.vue

@@ -4,6 +4,7 @@ import { Zone } from './Zone';
 import { CardService } from './CardService';
 import { ConnectionService } from '@/services/ConnectionService';
 import { ref } from 'vue';
+import { faScaleBalanced } from '@fortawesome/free-solid-svg-icons';
 
 const props = defineProps({
   cardService: {
@@ -23,6 +24,8 @@ var foundCardMarkers = [];
 var foundZoneMarkers = [];
 var handZone;
 
+const cardAspectRatio = 63/88;
+
 props.conService.onConnection(() => {
 	AFRAME.registerComponent('markers_start', {
 		init: function () {
@@ -60,9 +63,10 @@ props.conService.onConnection(() => {
 				var ImageEl = document.createElement('a-image');
 				ImageEl.setAttribute('src', props.cardService.cardBack);
 				ImageEl.setAttribute('id', 'card');
-
+				//set aspect ratio of a normal playing card
+				ImageEl.object3D.scale.set(1.26, 1.76, 1);
 				ImageEl.object3D.position.set(0, 0.0, 0);
-				ImageEl.object3D.rotation.set(-90, 0, 0);
+				rotateCardOntoMarker(markerEl, ImageEl)
 				markerEl.appendChild(ImageEl);
 			}
 			handZone = new Zone("/markers/ZoneMarker1.patt", "/markers/ZoneMarker2.patt", sceneEl, "hand", foundZoneMarkers);
@@ -76,7 +80,9 @@ props.conService.onConnection(() => {
 
 			marker.addEventListener("markerFound", () => {
 				var markerId = marker.id;
-				addFoundMarker(marker, foundCardMarkers)
+				addFoundMarker(marker, foundCardMarkers);
+				//rotateCardOntoMarker(marker);
+
 				if (handZone.markerInZone(marker)) {
 					turnCard(marker);
 				}
@@ -143,7 +149,15 @@ props.conService.onConnection(() => {
 	connected.value = true;
 });
 
-
+function rotateCardOntoMarker(marker, ImageEl) {
+	const markerRotation = marker.object3D.rotation;
+	if (Math.abs(markerRotation.x % (Math.PI * 2)) === Math.PI / 2) {
+		// If the marker is rotated 90 or -90 degrees around the x-axis
+		ImageEl.object3D.rotation.set(-Math.sign(markerRotation.x) * Math.PI / 2, 0, 0);
+	} else {
+		ImageEl.object3D.rotation.set(Math.PI / 2, 0, 0);
+	}
+}
 function isCardBack(marker) {
 	if (!marker) return false;
 	const imageEl = marker.querySelector('#card');