Update index.html

index.html

@@ -228,15 +228,24 @@
             }
 
             const camera = document.querySelector('[camera]');
-            const cameraPosition = camera.getAttribute('position');
-            const cameraRotation = camera.getAttribute('rotation');
-
-            // Calculate position 3 units in front of the camera
-            const radians = THREE.MathUtils.degToRad(cameraRotation.y);
-            const x = cameraPosition.x - Math.sin(radians) * 3;
-            const z = cameraPosition.z - Math.cos(radians) * 3;
-
-            targetObject.setAttribute('position', `${x} ${cameraPosition.y} ${z}`);
+            const cameraPosition = camera.object3D.position;
+            const cameraRotation = camera.object3D.rotation;
+            
+            // Calculate the direction the camera is looking
+            const direction = new THREE.Vector3(0, 0, -1);
+            direction.applyQuaternion(camera.object3D.quaternion);
+            
+            // Set the distance to be similar to where the Score is (5 units away)
+            const distance = 5;
+            
+            // Calculate the new position
+            const newPosition = new THREE.Vector3(
+                cameraPosition.x + direction.x * distance,
+                cameraPosition.y + direction.y * distance,
+                cameraPosition.z + direction.z * distance
+            );
+
+            targetObject.setAttribute('position', newPosition);
             
             // Update position inputs if the object is selected
             if (targetObject === selectedObject) {
@@ -337,11 +346,11 @@
         }
 
         function spawnSpawner() {
+            const spawner = document.createElement('a-entityfunction spawnSpawner() {
             const spawner = document.createElement('a-entity');
             spawner.setAttribute('geometry', 'primitive: box; width: 2; height: 2; depth: 2');
             spawner.setAttribute('material', 'color: purple');
             spawner.setAttribute('class', 'spawner');
-            const angle = Math.random() * Math.spawner.setAttribute('class', 'spawner');
             const angle = Math.random() * Math.PI * 2;
             const radius = 15 + Math.random() * 10;
             const x = Math.cos(angle) * radius;