Spaces:

awacke1
/

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

Running

App Files Files Community

awacke1 commited on Jul 12, 2024

Commit

9c48b13

verified ·

1 Parent(s): 8cb8d52

Update index.html

Browse files

Files changed (1) hide show

index.html +24 -326

index.html CHANGED Viewed

@@ -2,9 +2,8 @@
 <html>
 <head>
     <meta charset="utf-8">
-    <title>Enhanced A-Frame Space Shooter with 3D Editor</title>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/aframe/1.2.0/aframe.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/simplex-noise/2.4.0/simplex-noise.min.js"></script>
     <style>
         .ui-panel {
             position: fixed;
@@ -22,7 +21,7 @@
             margin: 5px 0;
             padding: 5px 10px;
         }
-        .animation-panel {
             position: fixed;
             top: 20px;
             right: 20px;
@@ -33,7 +32,7 @@
             color: white;
             font-family: Arial, sans-serif;
         }
-        .animation-panel input {
             width: 50px;
             margin-right: 5px;
         }
@@ -46,148 +45,51 @@
         <button onclick="addPrimitive('cylinder')">Add Cylinder</button>
         <button onclick="addPrimitive('cone')">Add Cone</button>
         <button onclick="addPrimitive('torus')">Add Torus</button>
-        <button onclick="toggleGameMode()">Toggle Game Mode</button>
     </div>
-    <div class="animation-panel">
         <h3>Object Controls</h3>
         <p>Position:</p>
-        <input id="px" type="number" placeholder="X">
-        <input id="py" type="number" placeholder="Y">
-        <input id="pz" 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="applyTransform()">Apply Transform</button>
         <button onclick="placeInFrontOfCamera()">Place in Front of Camera</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>
-        // Game variables
-        let score = 0;
-        let health = 100;
-        let enemyCount = 0;
-        let spawnerCount = 0;
-        // Editor variables
         let selectedObject = null;
-        let isGameMode = true;
-        const simplex = new SimplexNoise();
-        function generateProceduralTexture(size = 256) {
-            const canvas = document.createElement('canvas');
-            canvas.width = canvas.height = size;
-            const ctx = canvas.getContext('2d');
-            const imageData = ctx.createImageData(size, size);
-            const data = imageData.data;
-            for (let x = 0; x < size; x++) {
-                for (let y = 0; y < size; y++) {
-                    const i = (x + y * size) * 4;
-                    const value = (simplex.noise2D(x / 20, y / 20) + 1) / 2;
-                    const hue = Math.floor(value * 360);
-                    const [r, g, b] = HSVtoRGB(hue / 360, 0.7, 0.9);
-                    data[i] = r;
-                    data[i + 1] = g;
-                    data[i + 2] = b;
-                    data[i + 3] = 255;
-                }
-            }
-            ctx.putImageData(imageData, 0, 0);
-            return canvas.toDataURL();
-        }
-        function generateBumpMap(size = 256) {
-            const canvas = document.createElement('canvas');
-            canvas.width = canvas.height = size;
-            const ctx = canvas.getContext('2d');
-            const imageData = ctx.createImageData(size, size);
-            const data = imageData.data;
-            for (let x = 0; x < size; x++) {
-                for (let y = 0; y < size; y++) {
-                    const i = (x + y * size) * 4;
-                    const value = (simplex.noise2D(x / 10, y / 10) + 1) / 2;
-                    const intensity = Math.floor(value * 255);
-                    data[i] = data[i + 1] = data[i + 2] = intensity;
-                    data[i + 3] = 255;
-                }
-            }
-            ctx.putImageData(imageData, 0, 0);
-            return canvas.toDataURL();
-        }
-        function HSVtoRGB(h, s, v) {
-            let r, g, b, i, f, p, q, t;
-            i = Math.floor(h * 6);
-            f = h * 6 - i;
-            p = v * (1 - s);
-            q = v * (1 - f * s);
-            t = v * (1 - (1 - f) * s);
-            switch (i % 6) {
-                case 0: r = v, g = t, b = p; break;
-                case 1: r = q, g = v, b = p; break;
-                case 2: r = p, g = v, b = t; break;
-                case 3: r = p, g = q, b = v; break;
-                case 4: r = t, g = p, b = v; break;
-                case 5: r = v, g = p, b = q; break;
-            }
-            return [
-                Math.round(r * 255),
-                Math.round(g * 255),
-                Math.round(b * 255)
-            ];
-        }
         function addPrimitive(type) {
             const scene = document.querySelector('a-scene');
             const newEntity = document.createElement('a-entity');
             newEntity.setAttribute('geometry', `primitive: ${type}`);
-            const textureUrl = generateProceduralTexture();
-            const bumpMapUrl = generateBumpMap();
-            newEntity.setAttribute('material', `src: ${textureUrl}; normalMap: ${bumpMapUrl}`);
             newEntity.setAttribute('class', 'editable');
             newEntity.addEventListener('click', function() { selectObject(this); });
             scene.appendChild(newEntity);
-            // Place the new object in front of the camera
             placeInFrontOfCamera(newEntity);
-            // Select the newly added object
-            selectObject(newEntity);
         }
         function selectObject(obj) {
             if (selectedObject) {
-                selectedObject.setAttribute('material', 'emissive', '#000000');
             }
             selectedObject = obj;
-            selectedObject.setAttribute('material', 'emissive', '#FF0000');
             updateTransformInputs(selectedObject);
         }
@@ -235,8 +137,8 @@
             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(
@@ -253,213 +155,9 @@
             }
         }
-        function toggleGameMode() {
-            isGameMode = !isGameMode;
-            const cursor = document.querySelector('#cursor');
-            if (isGameMode) {
-                cursor.setAttribute('raycaster', 'objects', '.enemy, .spawner');
-            } else {
-                cursor.setAttribute('raycaster', 'objects', '.editable');
-            }
-        }
-        // Game logic functions
-        function fireLaser(shooter, color) {
-            const laser = document.createElement('a-entity');
-            const start = new THREE.Vector3();
-            const direction = new THREE.Vector3();
-            shooter.object3D.getWorldPosition(start);
-            shooter.object3D.getWorldDirection(direction);
-            laser.setAttribute('position', start);
-            laser.setAttribute('geometry', 'primitive: sphere; radius: 0.1');
-            laser.setAttribute('material', `color: ${color}; shader: flat`);
-            document.querySelector('a-scene').appendChild(laser);
-            const animateShot = () => {
-                const position = laser.getAttribute('position');
-                const newPosition = {
-                    x: position.x + direction.x * 0.5,
-                    y: position.y + direction.y * 0.5,
-                    z: position.z + direction.z * 0.5
-                };
-                laser.setAttribute('position', newPosition);
-                // Check for collisions
-                const enemies = document.querySelectorAll('.enemy');
-                enemies.forEach(enemy => {
-                    const enemyPos = enemy.getAttribute('position');
-                    const distance = calculateDistance(newPosition, enemyPos);
-                    if (distance < 1) {
-                        enemy.parentNode.removeChild(enemy);
-                        laser.parentNode.removeChild(laser);
-                        enemyCount--;
-                        score += 10;
-                        updateScoreDisplay();
-                        updateUnitCounters();
-                        return;
-                    }
-                });
-                const spawners = document.querySelectorAll('.spawner');
-                spawners.forEach(spawner => {
-                    const spawnerPos = spawner.getAttribute('position');
-                    const distance = calculateDistance(newPosition, spawnerPos);
-                    if (distance < 1.5) {
-                        spawner.parentNode.removeChild(spawner);
-                        laser.parentNode.removeChild(laser);
-                        spawnerCount--;
-                        score += 50;
-                        updateScoreDisplay();
-                        updateUnitCounters();
-                        return;
-                    }
-                });
-                if (laser.parentNode) {
-                    requestAnimationFrame(animateShot);
-                }
-            };
-            requestAnimationFrame(animateShot);
-        }
-        function calculateDistance(pos1, pos2) {
-            const dx = pos1.x - pos2.x;
-            const dy = pos1.y - pos2.y;
-            const dz = pos1.z - pos2.z;
-            return Math.sqrt(dx * dx + dy * dy + dz * dz);
-        }
-        function spawnEnemy() {
-            const enemy = document.createElement('a-entity');
-            enemy.setAttribute('geometry', 'primitive: box');
-            enemy.setAttribute('material', 'color: red');
-            enemy.setAttribute('class', 'enemy');
-            const angle = Math.random() * Math.PI * 2;
-            const radius = 10 + Math.random() * 10;
-            const x = Math.cos(angle) * radius;
-            const z = Math.sin(angle) * radius;
-            enemy.setAttribute('position', `${x} 1.6 ${z}`);
-            document.querySelector('a-scene').appendChild(enemy);
-            enemyCount++;
-            updateUnitCounters();
-        }
-        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.PI * 2;
-            const radius = 15 + Math.random() * 10;
-            const x = Math.cos(angle) * radius;
-            const z = Math.sin(angle) * radius;
-            spawner.setAttribute('position', `${x} 1.6 ${z}`);
-            document.querySelector('a-scene').appendChild(spawner);
-            spawnerCount++;
-            updateUnitCounters();
-        }
-        function updateGame() {
-            // Spawn enemies from spawners
-            const spawners = document.querySelectorAll('.spawner');
-            spawners.forEach(spawner => {
-                if (Math.random() < 0.1) {
-                    const enemy = document.createElement('a-entity');
-                    enemy.setAttribute('geometry', 'primitive: box');
-                    enemy.setAttribute('material', 'color: red');
-                    enemy.setAttribute('class', 'enemy');
-                    const spawnerPos = spawner.getAttribute('position');
-                    enemy.setAttribute('position', `${spawnerPos.x} ${spawnerPos.y} ${spawnerPos.z}`);
-                    document.querySelector('a-scene').appendChild(enemy);
-                    enemyCount++;
-                }
-            });
-            // Move enemies towards player
-            const player = document.querySelector('#player');
-            const playerPos = player.getAttribute('position');
-            const enemies = document.querySelectorAll('.enemy');
-            enemies.forEach(enemy => {
-                const enemyPos = enemy.getAttribute('position');
-                const direction = {
-                    x: playerPos.x - enemyPos.x,
-                    y: 0,
-                    z: playerPos.z - enemyPos.z
-                };
-                const length = Math.sqrt(direction.x * direction.x + direction.z * direction.z);
-                direction.x /= length;
-                direction.z /= length;
-                enemy.setAttribute('position', {
-                    x: enemyPos.x + direction.x * 0.05,
-                    y: enemyPos.y,
-                    z: enemyPos.z + direction.z * 0.05
-                });
-                // Check for collision with player
-                if (calculateDistance(playerPos, enemy.getAttribute('position')) < 1) {
-                    enemy.parentNode.removeChild(enemy);
-                    enemyCount--;
-                    health -= 10;
-                    updateHealthDisplay();
-                    updateUnitCounters();
-                }
-            });
-            // Randomly spawn new enemies and spawners
-            if (Math.random() < 0.02) spawnEnemy();
-            if (Math.random() < 0.005) spawnSpawner();
-        }
-        function updateScoreDisplay() {
-            const scoreIndicator = document.querySelector('#scoreIndicator');
-            scoreIndicator.setAttribute('scale', `${score / 1000} 1 1`);
-        }
-        function updateHealthDisplay() {
-            const healthDisplay = document.querySelector('#healthDisplay');
-            healthDisplay.innerHTML = '';
-            for (let i = 0; i < health / 10; i++) {
-                const heart = document.createElement('a-text');
-                heart.setAttribute('value', '❤');
-                heart.setAttribute('position', `${i * 0.2} 0 0`);
-                heart.setAttribute('color', 'red');
-                healthDisplay.appendChild(heart);
-            }
-        }
-        function updateUnitCounters() {
-            const unitCounters = document.querySelector('#unitCounters');
-            unitCounters.innerHTML = '';
-            const enemyCounter = document.createElement('a-text');
-            enemyCounter.setAttribute('value', `Enemies: ${enemyCount}`);
-            enemyCounter.setAttribute('position', '0 0 0');
-            unitCounters.appendChild(enemyCounter);
-            const spawnerCounter = document.createElement('a-text');
-            spawnerCounter.setAttribute('value', `Spawners: ${spawnerCount}`);
-            spawnerCounter.setAttribute('position', '0 -0.3 0');
-            unitCounters.appendChild(spawnerCounter);
-        }
-        // Initialize the game
-        updateHealthDisplay();
-        updateUnitCounters();
-        // Main game loop
-        setInterval(() => {
-            updateGame();
-            score++;
-            updateScoreDisplay();
-        }, 1000 / 60);  // 60 FPS
-        // Event listeners
-        const scene = document.querySelector('a-scene');
-        scene.addEventListener('click', (event) => {
-            if (isGameMode) {
-                const player = document.querySelector('#player');
-                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>Simplified A-Frame 3D Editor</title>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/aframe/1.2.0/aframe.min.js"></script>
     <style>
         .ui-panel {
             position: fixed;
             margin: 5px 0;
             padding: 5px 10px;
         }
+        .control-panel {
             position: fixed;
             top: 20px;
             right: 20px;
             color: white;
             font-family: Arial, sans-serif;
         }
+        .control-panel input {
             width: 50px;
             margin-right: 5px;
         }
         <button onclick="addPrimitive('cylinder')">Add Cylinder</button>
         <button onclick="addPrimitive('cone')">Add Cone</button>
         <button onclick="addPrimitive('torus')">Add Torus</button>
     </div>
+    <div class="control-panel">
         <h3>Object Controls</h3>
         <p>Position:</p>
+        <input id="px" type="number" step="0.1" placeholder="X">
+        <input id="py" type="number" step="0.1" placeholder="Y">
+        <input id="pz" type="number" step="0.1" placeholder="Z">
         <p>Rotation (degrees):</p>
+        <input id="rx" type="number" step="1" placeholder="X">
+        <input id="ry" type="number" step="1" placeholder="Y">
+        <input id="rz" type="number" step="1" placeholder="Z">
         <button onclick="applyTransform()">Apply Transform</button>
         <button onclick="placeInFrontOfCamera()">Place in Front of Camera</button>
     </div>
+    <a-scene>
+        <a-sky color="#ECECEC"></a-sky>
+        <a-entity id="rig" position="0 1.6 0">
+            <a-camera look-controls wasd-controls>
+                <a-cursor></a-cursor>
+            </a-camera>
         </a-entity>
     </a-scene>
     <script>
         let selectedObject = null;
         function addPrimitive(type) {
             const scene = document.querySelector('a-scene');
             const newEntity = document.createElement('a-entity');
             newEntity.setAttribute('geometry', `primitive: ${type}`);
+            newEntity.setAttribute('material', 'color: #4CC3D9');
             newEntity.setAttribute('class', 'editable');
             newEntity.addEventListener('click', function() { selectObject(this); });
             scene.appendChild(newEntity);
             placeInFrontOfCamera(newEntity);
         }
         function selectObject(obj) {
             if (selectedObject) {
+                selectedObject.setAttribute('material', 'color', '#4CC3D9');
             }
             selectedObject = obj;
+            selectedObject.setAttribute('material', 'color', '#FF0000');
             updateTransformInputs(selectedObject);
         }
             const direction = new THREE.Vector3(0, 0, -1);
             direction.applyQuaternion(camera.object3D.quaternion);
+            // Set the distance to be 3 units away from the camera
+            const distance = 3;
             // Calculate the new position
             const newPosition = new THREE.Vector3(
             }
         }
+        // Event listener for object selection
+        document.querySelector('a-scene').addEventListener('click', (event) => {
+            if (event.detail.intersectedEl && event.detail.intersectedEl.classList.contains('editable')) {
                 selectObject(event.detail.intersectedEl);
             }
         });