Hugging Face's logo

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

App Files Community
awacke1 commited on
Commit
eaa35ab
•
1 Parent(s): 9c48b13

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +32 -1
index.html CHANGED
@@ -2,7 +2,7 @@
2
  <html>
3
  <head>
4
  <meta charset="utf-8">
5
- <title>Simplified A-Frame 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 {
@@ -57,6 +57,10 @@
57
  <input id="rx" type="number" step="1" placeholder="X">
58
  <input id="ry" type="number" step="1" placeholder="Y">
59
  <input id="rz" type="number" step="1" placeholder="Z">
 
 
 
 
60
  <button onclick="applyTransform()">Apply Transform</button>
61
  <button onclick="placeInFrontOfCamera()">Place in Front of Camera</button>
62
  </div>
@@ -72,6 +76,7 @@
72
 
73
  <script>
74
  let selectedObject = null;
 
75
 
76
  function addPrimitive(type) {
77
  const scene = document.querySelector('a-scene');
@@ -80,7 +85,9 @@
80
  newEntity.setAttribute('material', 'color: #4CC3D9');
81
  newEntity.setAttribute('class', 'editable');
82
  newEntity.addEventListener('click', function() { selectObject(this); });
 
83
  scene.appendChild(newEntity);
 
84
  placeInFrontOfCamera(newEntity);
85
  }
86
 
@@ -103,6 +110,10 @@
103
  document.getElementById('rx').value = rotation.x.toFixed(2);
104
  document.getElementById('ry').value = rotation.y.toFixed(2);
105
  document.getElementById('rz').value = rotation.z.toFixed(2);
 
 
 
 
106
  }
107
 
108
  function applyTransform() {
@@ -117,9 +128,13 @@
117
  const rx = parseFloat(document.getElementById('rx').value) || 0;
118
  const ry = parseFloat(document.getElementById('ry').value) || 0;
119
  const rz = parseFloat(document.getElementById('rz').value) || 0;
 
 
 
120
 
121
  selectedObject.setAttribute('position', `${px} ${py} ${pz}`);
122
  selectedObject.setAttribute('rotation', `${rx} ${ry} ${rz}`);
 
123
  }
124
 
125
  function placeInFrontOfCamera(obj = null) {
@@ -155,12 +170,28 @@
155
  }
156
  }
157
 
 
 
 
 
 
 
 
 
 
 
 
 
 
158
  // Event listener for object selection
159
  document.querySelector('a-scene').addEventListener('click', (event) => {
160
  if (event.detail.intersectedEl && event.detail.intersectedEl.classList.contains('editable')) {
161
  selectObject(event.detail.intersectedEl);
162
  }
163
  });
 
 
 
164
  </script>
165
  </body>
166
  </html>
 
2
  <html>
3
  <head>
4
  <meta charset="utf-8">
5
+ <title>A-Frame 3D Editor with Animated Rotation</title>
6
  <script src="https://cdnjs.cloudflare.com/ajax/libs/aframe/1.2.0/aframe.min.js"></script>
7
  <style>
8
  .ui-panel {
 
57
  <input id="rx" type="number" step="1" placeholder="X">
58
  <input id="ry" type="number" step="1" placeholder="Y">
59
  <input id="rz" type="number" step="1" placeholder="Z">
60
+ <p>Rotation Velocity (degrees/second):</p>
61
+ <input id="rvx" type="number" step="1" placeholder="X">
62
+ <input id="rvy" type="number" step="1" placeholder="Y">
63
+ <input id="rvz" type="number" step="1" placeholder="Z">
64
  <button onclick="applyTransform()">Apply Transform</button>
65
  <button onclick="placeInFrontOfCamera()">Place in Front of Camera</button>
66
  </div>
 
76
 
77
  <script>
78
  let selectedObject = null;
79
+ let objects = [];
80
 
81
  function addPrimitive(type) {
82
  const scene = document.querySelector('a-scene');
 
85
  newEntity.setAttribute('material', 'color: #4CC3D9');
86
  newEntity.setAttribute('class', 'editable');
87
  newEntity.addEventListener('click', function() { selectObject(this); });
88
+ newEntity.rotationVelocity = { x: 0, y: 30, z: 0 }; // Default rotation velocity
89
  scene.appendChild(newEntity);
90
+ objects.push(newEntity);
91
  placeInFrontOfCamera(newEntity);
92
  }
93
 
 
110
  document.getElementById('rx').value = rotation.x.toFixed(2);
111
  document.getElementById('ry').value = rotation.y.toFixed(2);
112
  document.getElementById('rz').value = rotation.z.toFixed(2);
113
+
114
+ document.getElementById('rvx').value = obj.rotationVelocity.x;
115
+ document.getElementById('rvy').value = obj.rotationVelocity.y;
116
+ document.getElementById('rvz').value = obj.rotationVelocity.z;
117
  }
118
 
119
  function applyTransform() {
 
128
  const rx = parseFloat(document.getElementById('rx').value) || 0;
129
  const ry = parseFloat(document.getElementById('ry').value) || 0;
130
  const rz = parseFloat(document.getElementById('rz').value) || 0;
131
+ const rvx = parseFloat(document.getElementById('rvx').value) || 0;
132
+ const rvy = parseFloat(document.getElementById('rvy').value) || 0;
133
+ const rvz = parseFloat(document.getElementById('rvz').value) || 0;
134
 
135
  selectedObject.setAttribute('position', `${px} ${py} ${pz}`);
136
  selectedObject.setAttribute('rotation', `${rx} ${ry} ${rz}`);
137
+ selectedObject.rotationVelocity = { x: rvx, y: rvy, z: rvz };
138
  }
139
 
140
  function placeInFrontOfCamera(obj = null) {
 
170
  }
171
  }
172
 
173
+ function animateObjects() {
174
+ objects.forEach(obj => {
175
+ const currentRotation = obj.getAttribute('rotation');
176
+ const newRotation = {
177
+ x: (currentRotation.x + obj.rotationVelocity.x * 0.016) % 360, // 0.016 is approximately 1/60, assuming 60 FPS
178
+ y: (currentRotation.y + obj.rotationVelocity.y * 0.016) % 360,
179
+ z: (currentRotation.z + obj.rotationVelocity.z * 0.016) % 360
180
+ };
181
+ obj.setAttribute('rotation', newRotation);
182
+ });
183
+ requestAnimationFrame(animateObjects);
184
+ }
185
+
186
  // Event listener for object selection
187
  document.querySelector('a-scene').addEventListener('click', (event) => {
188
  if (event.detail.intersectedEl && event.detail.intersectedEl.classList.contains('editable')) {
189
  selectObject(event.detail.intersectedEl);
190
  }
191
  });
192
+
193
+ // Start the animation loop
194
+ animateObjects();
195
  </script>
196
  </body>
197
  </html>