Spaces:

awacke1
/

AframeVR-Space-Shooter-With-3D-Editor

Running

App Files Files Community

awacke1 commited on Jul 12, 2024

Commit

a0c1b77

verified ·

1 Parent(s): 8e59c55

Update index.html

Browse files

Files changed (1) hide show

index.html +26 -645

index.html CHANGED Viewed

@@ -2,7 +2,7 @@
 <html>
 <head>
     <meta charset="utf-8">
-    <title>A-Frame Space Shooter with Simple 3D Editor</title>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/aframe/1.2.0/aframe.min.js"></script>
     <style>
         .ui-panel {
@@ -40,7 +40,11 @@
 </head>
 <body>
     <div class="ui-panel">
-        <button onclick="addPrimitive('box')">Add Box</button>
         <button onclick="toggleGameMode()">Toggle Game Mode</button>
     </div>
@@ -64,7 +68,7 @@
                 <a-entity id="cursor" cursor="fuse: false;" position="0 0 -1"
                           geometry="primitive: ring; radiusInner: 0.02; radiusOuter: 0.03"
                           material="color: white; shader: flat"
-                          raycaster="objects: .enemy, .spawner, .editable"></a-entity>
             </a-entity>
         </a-entity>
         <a-entity id="scoreBar" position="0 3 -5">
@@ -74,658 +78,36 @@
         </a-entity>
         <a-entity id="healthDisplay" position="0 2.5 -5" scale="5 5 5"></a-entity>
         <a-entity id="unitCounters" position="-0.8 0.6 -1.5" scale="0.5 0.5 0.5"></a-entity>
     </a-scene>
     <script>
-        const scene = document.querySelector('a-scene');
-        const player = document.querySelector('#player');
-        const scoreIndicator = document.querySelector('#scoreIndicator');
-        const healthDisplay = document.querySelector('#healthDisplay');
-        const unitCounters = document.querySelector('#unitCounters');
-        let score = 0;
-        let health = 100;
-        let enemies = new Set();
-        let spawners = new Set();
-        let explosionCount = 0;
-        const maxScore = 1000;  // Maximum score for full bar
-        function updateScoreDisplay() {
-            const scale = Math.min(score / maxScore, 1);
-            scoreIndicator.setAttribute('scale', `${scale} 1 1`);
-        }
-        function updateHealthDisplay() {
-            healthDisplay.setAttribute('text', {
-                value: `Health: ${health}`,
-                color: 'white',
-                align: 'center'
-            });
-        }
-        function updateUnitCounters() {
-            unitCounters.innerHTML = '';
-            const counters = [
-                {name: 'Enemies', count: enemies.size},
-                {name: 'Spawners', count: spawners.size},
-                {name: 'Explosions', count: explosionCount}
-            ];
-            counters.forEach((counter, index) => {
-                const text = document.createElement('a-text');
-                text.setAttribute('value', `${counter.name}: ${counter.count}`);
-                text.setAttribute('color', 'white');
-                text.setAttribute('position', `0 ${-index * 0.2} 0`);
-                unitCounters.appendChild(text);
-            });
-        }
-        function createSpawner() {
-            const spawner = document.createElement('a-entity');
-            spawner.setAttribute('class', 'spawner');
-            spawner.setAttribute('geometry', {primitive: 'box', width: 2, height: 2, depth: 2});
-            spawner.setAttribute('material', {color: '#00FF00', metalness: 0.7, roughness: 0.3});
-            const angle = Math.random() * Math.PI * 2;
-            const distance = 30;
-            const position = new THREE.Vector3(
-                Math.cos(angle) * distance,
-                Math.random() * 10 - 5,
-                Math.sin(angle) * distance
-            );
-            spawner.setAttribute('position', position);
-            spawner.health = 100;
-            scene.appendChild(spawner);
-            spawners.add(spawner);
-            // Spawner behavior
-            setInterval(() => {
-                if (spawner.parentNode && spawner.health > 0) {
-                    createEnemy(spawner.object3D.position);
-                }
-            }, 5000);
-            updateUnitCounters();
-        }
-        function createEnemy(spawnPosition) {
-            if (enemies.size >= 30) return; // Limit number of enemies
-            const enemy = document.createElement('a-entity');
-            enemy.setAttribute('class', 'enemy');
-            enemy.setAttribute('geometry', {primitive: 'sphere', radius: 0.5});
-            enemy.setAttribute('material', {color: '#FF0000', metalness: 0.7, roughness: 0.3});
-            const position = new THREE.Vector3(
-                spawnPosition.x + (Math.random() - 0.5) * 2,
-                spawnPosition.y + (Math.random() - 0.5) * 2,
-                spawnPosition.z + (Math.random() - 0.5) * 2
-            );
-            enemy.setAttribute('position', position);
-            const particleSystem = document.createElement('a-entity');
-            particleSystem.setAttribute('particle-system', {
-                preset: 'dust',
-                particleCount: 100,
-                color: '#FF0000, #FF5500',
-                size: 0.1,
-                dur: 1000,
-                accelerationValue: '0 -9.8 0'
-            });
-            enemy.appendChild(particleSystem);
-            enemy.creationTime = Date.now();
-            scene.appendChild(enemy);
-            enemies.add(enemy);
-            // Enemy firing behavior
-            enemy.setAttribute('animation__movement', {
-                property: 'position',
-                to: '0 1.6 0',
-                dur: 15000,
-                easing: 'linear'
-            });
-            setInterval(() => {
-                if (enemy.parentNode) {
-                    fireLaser(enemy, '#FF0000');
-                }
-            }, 2000);
-            updateUnitCounters();
-        }
-        function fireLaser(source, color) {
-            const laser = document.createElement('a-entity');
-            laser.setAttribute('geometry', {primitive: 'cylinder', radius: 0.05, height: 100});
-            laser.setAttribute('material', {color: color, opacity: 0.7});
-            const sourcePosition = source.object3D.position;
-            const targetPosition = player.object3D.position;
-            const direction = new THREE.Vector3().subVectors(targetPosition, sourcePosition).normalize();
-            laser.setAttribute('position', sourcePosition);
-            laser.object3D.lookAt(targetPosition);
-            scene.appendChild(laser);
-            laser.setAttribute('animation', {
-                property: 'scale',
-                to: '1 0.01 1',
-                dur: 1000,
-                easing: 'linear'
-            });
-            setTimeout(() => {
-                scene.removeChild(laser);
-            }, 1000);
-            // Check for enemy or spawner hit
-            if (source === player) {
-                const targets = document.querySelectorAll('.enemy, .spawner');
-                targets.forEach(target => {
-                    const targetPos = target.object3D.position;
-                    const distance = sourcePosition.distanceTo(targetPos);
-                    if (distance < 2) {
-                        if (target.classList.contains('enemy')) {
-                            createExplosion(targetPos);
-                            scene.removeChild(target);
-                            enemies.delete(target);
-                            score += 10;
-                        } else if (target.classList.contains('spawner')) {
-                            target.health -= 20;
-                            if (target.health <= 0) {
-                                createExplosion(targetPos);
-                                scene.removeChild(target);
-                                spawners.delete(target);
-                                score += 50;
-                            }
-                        }
-                        updateScoreDisplay();
-                        updateUnitCounters();
-                    }
-                });
-            }
-            // Check for player hit
-            if (source !== player && Math.random() < 0.1) { // 10% chance to hit player
-                health = Math.max(0, health - 10);
-                updateHealthDisplay();
-            }
-        }
-        function createExplosion(position) {
-            const explosion = document.createElement('a-entity');
-            explosion.setAttribute('position', position);
-            for (let i = 0; i < 20; i++) {
-                const particle = document.createElement('a-sphere');
-                particle.setAttribute('radius', 0.1);
-                particle.setAttribute('material', {color: '#FFA500'});
-                const x = (Math.random() - 0.5) * 2;
-                const y = (Math.random() - 0.5) * 2;
-                const z = (Math.random() - 0.5) * 2;
-                particle.setAttribute('animation', {
-                    property: 'position',
-                    to: `${x} ${y} ${z}`,
-                    dur: 1000,
-                    easing: 'easeOutQuad'
-                });
-                particle.setAttribute('animation__opacity', {
-                    property: 'material.opacity',
-                    from: 1,
-                    to: 0,
-                    dur: 1000,
-                    easing: 'easeOutQuad'
-                });
-                explosion.appendChild(particle);
-            }
-            scene.appendChild(explosion);
-            setTimeout(() => {
-                scene.removeChild(explosion);
-            }, 1000);
-            explosionCount++;
-            updateUnitCounters();
-        }
-        function updateGame() {
-            const now = Date.now();
-            enemies.forEach(enemy => {
-                if (now - enemy.creationTime > 20000) { // Remove after 20 seconds
-                    scene.removeChild(enemy);
-                    enemies.delete(enemy);
-                    updateUnitCounters();
-                }
-            });
-            while (spawners.size < 5) {
-                createSpawner();
-            }
-        }
         // Editor functionality
         let selectedObject = null;
         let isGameMode = true;
-        function addPrimitive(type) {
-            if (isGameMode) return; // Don't add primitives in game mode
-            const scene = document.querySelector('a-scene');
-            const newEntity = document.createElement('a-entity');
-            newEntity.setAttribute('geometry', `primitive: ${type}`);
-            newEntity.setAttribute('material', 'color: #4CC3D9');
-            newEntity.setAttribute('position', '0 1.5 -3');
-            newEntity.setAttribute('class', 'editable');
-            newEntity.addEventListener('click', function() { selectObject(this); });
-            scene.appendChild(newEntity);
-        }
-        function selectObject(obj) {
-            if (selectedObject) {
-                selectedObject.setAttribute('material', 'color', '#4CC3D9');
-            }
-            selectedObject = obj;
-            selectedObject.setAttribute('material', 'color', '#FF0000');
-        }
-        function applyAnimation() {
-            if (!selectedObject) {
-                alert('Please select an object first');
-                return;
-            }
-            const vx = parseFloat(document.getElementById('vx').value) || 0;
-            const vy = parseFloat(document.getElementById('vy').value) || 0;
-            const vz = parseFloat(document.getElementById('vz').value) || 0;
-            const rx = parseFloat(document.getElementById('rx').value) || 0;
-            const ry = parseFloat(document.getElementById('ry').value) || 0;
-            const rz = parseFloat(document.getElementById('rz').value) || 0;
-            let currentPosition = selectedObject.getAttribute('position');
-            selectedObject.setAttribute('animation__position', {
-                property: 'position',
-                dur: 1000,
-                dir: 'alternate',
-                loop: true,
-                to: `${currentPosition.x + vx} ${currentPosition.y + vy} ${currentPosition.z + vz}`,
-                easing: 'linear'
-            });
-            selectedObject.setAttribute('animation__rotation', {
-                property: 'rotation',
-                dur: 1000,
-                dir: 'alternate',
-                loop: true,
-                to: `${rx} ${ry} ${rz}`,
-                easing: 'linear'
-            });
-        }
-        function toggleGameMode() {
-            isGameMode = !isGameMode;
             const cursor = document.querySelector('#cursor');
-            if (isGameMode) {
-                cursor.setAttribute('raycaster', 'objects', '.enemy, .spawner');
-            } else {
-                cursor.setAttribute('raycaster', 'objects', '.editable');
-            }
         }
-        // Modify the click event listener to work with both game and edit modes
-        document.addEventListener('keydown', (event) => {
-            if (event.code === 'Space') {
-                fireLaser(player, '#00FF00');
-            }
-        });
-        scene.addEventListener('click', (event) => {
-            if (isGameMode) {
-                fireLaser(player, '#00FF00');
-            } else if (event.detail.intersectedEl && event.detail.intersectedEl.classList.contains('editable')) {
-                selectObject(event.detail.intersectedEl);
-            }
-        });
-        // Initialize the game
-        update<!DOCTYPE html>
-<html>
-<head>
-    <meta charset="utf-8">
-    <title>A-Frame Space Shooter with Simple 3D Editor</title>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/aframe/1.2.0/aframe.min.js"></script>
-    <style>
-        .ui-panel {
-            position: fixed;
-            top: 20px;
-            left: 20px;
-            z-index: 9999;
-            background: rgba(0,0,0,0.7);
-            padding: 10px;
-            border-radius: 5px;
-            color: white;
-            font-family: Arial, sans-serif;
-        }
-        .ui-panel button {
-            display: block;
-            margin: 5px 0;
-            padding: 5px 10px;
-        }
-        .animation-panel {
-            position: fixed;
-            top: 20px;
-            right: 20px;
-            z-index: 9999;
-            background: rgba(0,0,0,0.7);
-            padding: 10px;
-            border-radius: 5px;
-            color: white;
-            font-family: Arial, sans-serif;
-        }
-        .animation-panel input {
-            width: 50px;
-            margin-right: 5px;
-        }
-    </style>
-</head>
-<body>
-    <div class="ui-panel">
-        <button onclick="addPrimitive('box')">Add Box</button>
-        <button onclick="toggleGameMode()">Toggle Game Mode</button>
-    </div>
-    <div class="animation-panel">
-        <h3>Animation Controls</h3>
-        <p>Velocity:</p>
-        <input id="vx" type="number" placeholder="X">
-        <input id="vy" type="number" placeholder="Y">
-        <input id="vz" type="number" placeholder="Z">
-        <p>Rotation (degrees):</p>
-        <input id="rx" type="number" placeholder="X">
-        <input id="ry" type="number" placeholder="Y">
-        <input id="rz" type="number" placeholder="Z">
-        <button onclick="applyAnimation()">Apply Animation</button>
-    </div>
-    <a-scene fog="type: linear; color: #87CEEB; near: 0; far: 50">
-        <a-sky color="#87CEEB"></a-sky>
-        <a-entity id="player" position="0 1.6 0">
-            <a-entity camera look-controls wasd-controls>
-                <a-entity id="cursor" cursor="fuse: false;" position="0 0 -1"
-                          geometry="primitive: ring; radiusInner: 0.02; radiusOuter: 0.03"
-                          material="color: white; shader: flat"
-                          raycaster="objects: .enemy, .spawner, .editable"></a-entity>
-            </a-entity>
-        </a-entity>
-        <a-entity id="scoreBar" position="0 3 -5">
-            <a-box width="1" height="0.1" depth="0.1" color="#444444"></a-box>
-            <a-box id="scoreIndicator" width="1" height="0.1" depth="0.1" color="#FFA500" scale="0 1 1"></a-box>
-            <a-text value="Score" position="0 0.1 0" align="center" color="white"></a-text>
-        </a-entity>
-        <a-entity id="healthDisplay" position="0 2.5 -5" scale="5 5 5"></a-entity>
-        <a-entity id="unitCounters" position="-0.8 0.6 -1.5" scale="0.5 0.5 0.5"></a-entity>
-    </a-scene>
-    <script>
-        const scene = document.querySelector('a-scene');
-        const player = document.querySelector('#player');
-        const scoreIndicator = document.querySelector('#scoreIndicator');
-        const healthDisplay = document.querySelector('#healthDisplay');
-        const unitCounters = document.querySelector('#unitCounters');
-        let score = 0;
-        let health = 100;
-        let enemies = new Set();
-        let spawners = new Set();
-        let explosionCount = 0;
-        const maxScore = 1000;  // Maximum score for full bar
-        function updateScoreDisplay() {
-            const scale = Math.min(score / maxScore, 1);
-            scoreIndicator.setAttribute('scale', `${scale} 1 1`);
-        }
-        function updateHealthDisplay() {
-            healthDisplay.setAttribute('text', {
-                value: `Health: ${health}`,
-                color: 'white',
-                align: 'center'
-            });
-        }
-        function updateUnitCounters() {
-            unitCounters.innerHTML = '';
-            const counters = [
-                {name: 'Enemies', count: enemies.size},
-                {name: 'Spawners', count: spawners.size},
-                {name: 'Explosions', count: explosionCount}
-            ];
-            counters.forEach((counter, index) => {
-                const text = document.createElement('a-text');
-                text.setAttribute('value', `${counter.name}: ${counter.count}`);
-                text.setAttribute('color', 'white');
-                text.setAttribute('position', `0 ${-index * 0.2} 0`);
-                unitCounters.appendChild(text);
-            });
-        }
-        function createSpawner() {
-            const spawner = document.createElement('a-entity');
-            spawner.setAttribute('class', 'spawner');
-            spawner.setAttribute('geometry', {primitive: 'box', width: 2, height: 2, depth: 2});
-            spawner.setAttribute('material', {color: '#00FF00', metalness: 0.7, roughness: 0.3});
-            const angle = Math.random() * Math.PI * 2;
-            const distance = 30;
-            const position = new THREE.Vector3(
-                Math.cos(angle) * distance,
-                Math.random() * 10 - 5,
-                Math.sin(angle) * distance
-            );
-            spawner.setAttribute('position', position);
-            spawner.health = 100;
-            scene.appendChild(spawner);
-            spawners.add(spawner);
-            // Spawner behavior
-            setInterval(() => {
-                if (spawner.parentNode && spawner.health > 0) {
-                    createEnemy(spawner.object3D.position);
-                }
-            }, 5000);
-            updateUnitCounters();
-        }
-        function createEnemy(spawnPosition) {
-            if (enemies.size >= 30) return; // Limit number of enemies
-            const enemy = document.createElement('a-entity');
-            enemy.setAttribute('class', 'enemy');
-            enemy.setAttribute('geometry', {primitive: 'sphere', radius: 0.5});
-            enemy.setAttribute('material', {color: '#FF0000', metalness: 0.7, roughness: 0.3});
-            const position = new THREE.Vector3(
-                spawnPosition.x + (Math.random() - 0.5) * 2,
-                spawnPosition.y + (Math.random() - 0.5) * 2,
-                spawnPosition.z + (Math.random() - 0.5) * 2
-            );
-            enemy.setAttribute('position', position);
-            const particleSystem = document.createElement('a-entity');
-            particleSystem.setAttribute('particle-system', {
-                preset: 'dust',
-                particleCount: 100,
-                color: '#FF0000, #FF5500',
-                size: 0.1,
-                dur: 1000,
-                accelerationValue: '0 -9.8 0'
-            });
-            enemy.appendChild(particleSystem);
-            enemy.creationTime = Date.now();
-            scene.appendChild(enemy);
-            enemies.add(enemy);
-            // Enemy firing behavior
-            enemy.setAttribute('animation__movement', {
-                property: 'position',
-                to: '0 1.6 0',
-                dur: 15000,
-                easing: 'linear'
-            });
-            setInterval(() => {
-                if (enemy.parentNode) {
-                    fireLaser(enemy, '#FF0000');
-                }
-            }, 2000);
-            updateUnitCounters();
-        }
-        function fireLaser(source, color) {
-            const laser = document.createElement('a-entity');
-            laser.setAttribute('geometry', {primitive: 'cylinder', radius: 0.05, height: 100});
-            laser.setAttribute('material', {color: color, opacity: 0.7});
-            const sourcePosition = source.object3D.position;
-            const targetPosition = player.object3D.position;
-            const direction = new THREE.Vector3().subVectors(targetPosition, sourcePosition).normalize();
-            laser.setAttribute('position', sourcePosition);
-            laser.object3D.lookAt(targetPosition);
-            scene.appendChild(laser);
-            laser.setAttribute('animation', {
-                property: 'scale',
-                to: '1 0.01 1',
-                dur: 1000,
-                easing: 'linear'
-            });
-            setTimeout(() => {
-                scene.removeChild(laser);
-            }, 1000);
-            // Check for enemy or spawner hit
-            if (source === player) {
-                const targets = document.querySelectorAll('.enemy, .spawner');
-                targets.forEach(target => {
-                    const targetPos = target.object3D.position;
-                    const distance = sourcePosition.distanceTo(targetPos);
-                    if (distance < 2) {
-                        if (target.classList.contains('enemy')) {
-                            createExplosion(targetPos);
-                            scene.removeChild(target);
-                            enemies.delete(target);
-                            score += 10;
-                        } else if (target.classList.contains('spawner')) {
-                            target.health -= 20;
-                            if (target.health <= 0) {
-                                createExplosion(targetPos);
-                                scene.removeChild(target);
-                                spawners.delete(target);
-                                score += 50;
-                            }
-                        }
-                        updateScoreDisplay();
-                        updateUnitCounters();
-                    }
-                });
-            }
-            // Check for player hit
-            if (source !== player && Math.random() < 0.1) { // 10% chance to hit player
-                health = Math.max(0, health - 10);
-                updateHealthDisplay();
-            }
-        }
-        function createExplosion(position) {
-            const explosion = document.createElement('a-entity');
-            explosion.setAttribute('position', position);
-            for (let i = 0; i < 20; i++) {
-                const particle = document.createElement('a-sphere');
-                particle.setAttribute('radius', 0.1);
-                particle.setAttribute('material', {color: '#FFA500'});
-                const x = (Math.random() - 0.5) * 2;
-                const y = (Math.random() - 0.5) * 2;
-                const z = (Math.random() - 0.5) * 2;
-                particle.setAttribute('animation', {
-                    property: 'position',
-                    to: `${x} ${y} ${z}`,
-                    dur: 1000,
-                    easing: 'easeOutQuad'
-                });
-                particle.setAttribute('animation__opacity', {
-                    property: 'material.opacity',
-                    from: 1,
-                    to: 0,
-                    dur: 1000,
-                    easing: 'easeOutQuad'
-                });
-                explosion.appendChild(particle);
-            }
-            scene.appendChild(explosion);
-            setTimeout(() => {
-                scene.removeChild(explosion);
-            }, 1000);
-            explosionCount++;
-            updateUnitCounters();
-        }
-        function updateGame() {
-            const now = Date.now();
-            enemies.forEach(enemy => {
-                if (now - enemy.creationTime > 20000) { // Remove after 20 seconds
-                    scene.removeChild(enemy);
-                    enemies.delete(enemy);
-                    updateUnitCounters();
-                }
-            });
-            while (spawners.size < 5) {
-                createSpawner();
-            }
-        }
-        // Editor functionality
-        let selectedObject = null;
-        let isGameMode = true;
-        function addPrimitive(type) {
-            if (isGameMode) return; // Don't add primitives in game mode
             const scene = document.querySelector('a-scene');
             const newEntity = document.createElement('a-entity');
             newEntity.setAttribute('geometry', `primitive: ${type}`);
             newEntity.setAttribute('material', 'color: #4CC3D9');
-            newEntity.setAttribute('position', '0 1.5 -3');
             newEntity.setAttribute('class', 'editable');
             newEntity.addEventListener('click', function() { selectObject(this); });
             scene.appendChild(newEntity);
         }
         function selectObject(obj) {
@@ -776,20 +158,19 @@
             if (isGameMode) {
                 cursor.setAttribute('raycaster', 'objects', '.enemy, .spawner');
             } else {
-                cursor.setAttribute('raycaster', 'objects', '.editable');
             }
         }
         // Modify the click event listener to work with both game and edit modes
-        document.addEventListener('keydown', (event) => {
-            if (event.code === 'Space') {
-                fireLaser(player, '#00FF00');
-            }
-        });
-        scene.addEventListener('click', (event) => {
             if (isGameMode) {
                 fireLaser(player, '#00FF00');
             } else if (event.detail.intersectedEl && event.detail.intersectedEl.classList.contains('editable')) {
                 selectObject(event.detail.intersectedEl);
             }

 <html>
 <head>
     <meta charset="utf-8">
+    <title>A-Frame Space Shooter with 3D Editor and Raycast Placement</title>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/aframe/1.2.0/aframe.min.js"></script>
     <style>
         .ui-panel {
 </head>
 <body>
     <div class="ui-panel">
+        <button onclick="setPlacementMode('box')">Add Box</button>
+        <button onclick="setPlacementMode('sphere')">Add Sphere</button>
+        <button onclick="setPlacementMode('cylinder')">Add Cylinder</button>
+        <button onclick="setPlacementMode('cone')">Add Cone</button>
+        <button onclick="setPlacementMode('torus')">Add Torus</button>
         <button onclick="toggleGameMode()">Toggle Game Mode</button>
     </div>
                 <a-entity id="cursor" cursor="fuse: false;" position="0 0 -1"
                           geometry="primitive: ring; radiusInner: 0.02; radiusOuter: 0.03"
                           material="color: white; shader: flat"
+                          raycaster="objects: .enemy, .spawner, .editable, [ground]"></a-entity>
             </a-entity>
         </a-entity>
         <a-entity id="scoreBar" position="0 3 -5">
         </a-entity>
         <a-entity id="healthDisplay" position="0 2.5 -5" scale="5 5 5"></a-entity>
         <a-entity id="unitCounters" position="-0.8 0.6 -1.5" scale="0.5 0.5 0.5"></a-entity>
+        <!-- Add a large ground plane for raycasting -->
+        <a-plane position="0 0 0" rotation="-90 0 0" width="1000" height="1000" color="#7BC8A4" ground></a-plane>
     </a-scene>
     <script>
+        // ... [All the game logic from the previous script goes here] ...
         // Editor functionality
         let selectedObject = null;
         let isGameMode = true;
+        let placementMode = null;
+        function setPlacementMode(type) {
+            placementMode = type;
+            isGameMode = false;
             const cursor = document.querySelector('#cursor');
+            cursor.setAttribute('raycaster', 'objects', '.editable, [ground]');
         }
+        function addPrimitive(type, position) {
             const scene = document.querySelector('a-scene');
             const newEntity = document.createElement('a-entity');
             newEntity.setAttribute('geometry', `primitive: ${type}`);
             newEntity.setAttribute('material', 'color: #4CC3D9');
+            newEntity.setAttribute('position', position);
             newEntity.setAttribute('class', 'editable');
             newEntity.addEventListener('click', function() { selectObject(this); });
             scene.appendChild(newEntity);
+            placementMode = null;
         }
         function selectObject(obj) {
             if (isGameMode) {
                 cursor.setAttribute('raycaster', 'objects', '.enemy, .spawner');
             } else {
+                cursor.setAttribute('raycaster', 'objects', '.editable, [ground]');
             }
         }
         // Modify the click event listener to work with both game and edit modes
+        document.querySelector('a-scene').addEventListener('click', (event) => {
             if (isGameMode) {
                 fireLaser(player, '#00FF00');
+            } else if (placementMode) {
+                const intersection = event.detail.intersection;
+                if (intersection) {
+                    addPrimitive(placementMode, intersection.point);
+                }
             } else if (event.detail.intersectedEl && event.detail.intersectedEl.classList.contains('editable')) {
                 selectObject(event.detail.intersectedEl);
             }