Hugging Face's logo

Spaces:
awacke1
/
AframeVR-Space-Shooter-With-3D-Editor
Running

App Files Community
awacke1 commited on
Commit
3ec5fca
·
verified ·
1 Parent(s): a0c1b77

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +11 -28
index.html CHANGED
@@ -2,7 +2,7 @@
2
  <html>
3
  <head>
4
  <meta charset="utf-8">
5
- <title>A-Frame Space Shooter with 3D Editor and Raycast Placement</title>
6
  <script src="https://cdnjs.cloudflare.com/ajax/libs/aframe/1.2.0/aframe.min.js"></script>
7
  <style>
8
  .ui-panel {
@@ -40,11 +40,11 @@
40
  </head>
41
  <body>
42
  <div class="ui-panel">
43
- <button onclick="setPlacementMode('box')">Add Box</button>
44
- <button onclick="setPlacementMode('sphere')">Add Sphere</button>
45
- <button onclick="setPlacementMode('cylinder')">Add Cylinder</button>
46
- <button onclick="setPlacementMode('cone')">Add Cone</button>
47
- <button onclick="setPlacementMode('torus')">Add Torus</button>
48
  <button onclick="toggleGameMode()">Toggle Game Mode</button>
49
  </div>
50
 
@@ -68,7 +68,7 @@
68
  <a-entity id="cursor" cursor="fuse: false;" position="0 0 -1"
69
  geometry="primitive: ring; radiusInner: 0.02; radiusOuter: 0.03"
70
  material="color: white; shader: flat"
71
- raycaster="objects: .enemy, .spawner, .editable, [ground]"></a-entity>
72
  </a-entity>
73
  </a-entity>
74
  <a-entity id="scoreBar" position="0 3 -5">
@@ -78,9 +78,6 @@
78
  </a-entity>
79
  <a-entity id="healthDisplay" position="0 2.5 -5" scale="5 5 5"></a-entity>
80
  <a-entity id="unitCounters" position="-0.8 0.6 -1.5" scale="0.5 0.5 0.5"></a-entity>
81
-
82
- <!-- Add a large ground plane for raycasting -->
83
- <a-plane position="0 0 0" rotation="-90 0 0" width="1000" height="1000" color="#7BC8A4" ground></a-plane>
84
  </a-scene>
85
 
86
  <script>
@@ -89,25 +86,16 @@
89
  // Editor functionality
90
  let selectedObject = null;
91
  let isGameMode = true;
92
- let placementMode = null;
93
 
94
- function setPlacementMode(type) {
95
- placementMode = type;
96
- isGameMode = false;
97
- const cursor = document.querySelector('#cursor');
98
- cursor.setAttribute('raycaster', 'objects', '.editable, [ground]');
99
- }
100
-
101
- function addPrimitive(type, position) {
102
  const scene = document.querySelector('a-scene');
103
  const newEntity = document.createElement('a-entity');
104
  newEntity.setAttribute('geometry', `primitive: ${type}`);
105
  newEntity.setAttribute('material', 'color: #4CC3D9');
106
- newEntity.setAttribute('position', position);
107
  newEntity.setAttribute('class', 'editable');
108
  newEntity.addEventListener('click', function() { selectObject(this); });
109
  scene.appendChild(newEntity);
110
- placementMode = null;
111
  }
112
 
113
  function selectObject(obj) {
@@ -158,19 +146,14 @@
158
  if (isGameMode) {
159
  cursor.setAttribute('raycaster', 'objects', '.enemy, .spawner');
160
  } else {
161
- cursor.setAttribute('raycaster', 'objects', '.editable, [ground]');
162
  }
163
  }
164
 
165
  // Modify the click event listener to work with both game and edit modes
166
- document.querySelector('a-scene').addEventListener('click', (event) => {
167
  if (isGameMode) {
168
  fireLaser(player, '#00FF00');
169
- } else if (placementMode) {
170
- const intersection = event.detail.intersection;
171
- if (intersection) {
172
- addPrimitive(placementMode, intersection.point);
173
- }
174
  } else if (event.detail.intersectedEl && event.detail.intersectedEl.classList.contains('editable')) {
175
  selectObject(event.detail.intersectedEl);
176
  }
 
2
  <html>
3
  <head>
4
  <meta charset="utf-8">
5
+ <title>A-Frame Space Shooter with 3D Editor</title>
6
  <script src="https://cdnjs.cloudflare.com/ajax/libs/aframe/1.2.0/aframe.min.js"></script>
7
  <style>
8
  .ui-panel {
 
40
  </head>
41
  <body>
42
  <div class="ui-panel">
43
+ <button onclick="addPrimitive('box')">Add Box</button>
44
+ <button onclick="addPrimitive('sphere')">Add Sphere</button>
45
+ <button onclick="addPrimitive('cylinder')">Add Cylinder</button>
46
+ <button onclick="addPrimitive('cone')">Add Cone</button>
47
+ <button onclick="addPrimitive('torus')">Add Torus</button>
48
  <button onclick="toggleGameMode()">Toggle Game Mode</button>
49
  </div>
50
 
 
68
  <a-entity id="cursor" cursor="fuse: false;" position="0 0 -1"
69
  geometry="primitive: ring; radiusInner: 0.02; radiusOuter: 0.03"
70
  material="color: white; shader: flat"
71
+ raycaster="objects: .enemy, .spawner, .editable"></a-entity>
72
  </a-entity>
73
  </a-entity>
74
  <a-entity id="scoreBar" position="0 3 -5">
 
78
  </a-entity>
79
  <a-entity id="healthDisplay" position="0 2.5 -5" scale="5 5 5"></a-entity>
80
  <a-entity id="unitCounters" position="-0.8 0.6 -1.5" scale="0.5 0.5 0.5"></a-entity>
 
 
 
81
  </a-scene>
82
 
83
  <script>
 
86
  // Editor functionality
87
  let selectedObject = null;
88
  let isGameMode = true;
 
89
 
90
+ function addPrimitive(type) {
 
 
 
 
 
 
 
91
  const scene = document.querySelector('a-scene');
92
  const newEntity = document.createElement('a-entity');
93
  newEntity.setAttribute('geometry', `primitive: ${type}`);
94
  newEntity.setAttribute('material', 'color: #4CC3D9');
95
+ newEntity.setAttribute('position', '0 1.5 -3');
96
  newEntity.setAttribute('class', 'editable');
97
  newEntity.addEventListener('click', function() { selectObject(this); });
98
  scene.appendChild(newEntity);
 
99
  }
100
 
101
  function selectObject(obj) {
 
146
  if (isGameMode) {
147
  cursor.setAttribute('raycaster', 'objects', '.enemy, .spawner');
148
  } else {
149
+ cursor.setAttribute('raycaster', 'objects', '.editable');
150
  }
151
  }
152
 
153
  // Modify the click event listener to work with both game and edit modes
154
+ scene.addEventListener('click', (event) => {
155
  if (isGameMode) {
156
  fireLaser(player, '#00FF00');
 
 
 
 
 
157
  } else if (event.detail.intersectedEl && event.detail.intersectedEl.classList.contains('editable')) {
158
  selectObject(event.detail.intersectedEl);
159
  }