Update index.html

index.html

@@ -8,11 +8,11 @@
       <!-- Camera -->
       <a-entity camera look-controls position="0 2 6"></a-entity>
 
-      <!-- Field -->
-      <a-box color="green" position="0 -0.5 -10" width="16" height="0.5" depth="26"></a-box>
+      <!-- Ground -->
+      <a-box id="ground" color="green" position="0 -0.5 -10" width="16" height="0.5" depth="26"></a-box>
 
       <!-- Ball -->
-      <a-sphere id="ball" color="white" radius="0.2" position="0 0.2 0"></a-sphere>
+      <a-sphere id="ball" color="white" radius="0.2" position="0 2 0"></a-sphere>
 
       <!-- Particle Systems -->
       <!-- Team 1 -->
@@ -29,6 +29,9 @@
 
       <!-- Script to move the ball -->
       <script>
+        // Get the ground object
+        var ground = document.querySelector("#ground");
+
         // Get the ball entity
         var ball = document.querySelector("#ball");
 
@@ -36,9 +39,9 @@
         var ballVelocity = new THREE.Vector3(0, 0, 0);
 
         // Set the ball's mass
-        var ballMass = 1;
+    var ballMass = 1;
 
-        // Set the ball's friction coefficient
+    // Set the ball's friction coefficient
     var ballFriction = 0.01;
 
     // Set the ball's restitution coefficient
@@ -48,7 +51,7 @@
     var ballInterval = 20; // milliseconds
 
     // Set the ball's initial position
-    var ballPosition = new THREE.Vector3(0, 0.2, 0);
+    var ballPosition = new THREE.Vector3(0, 2, 0);
 
     // Set the ball's size
     var ballSize = 0.2;
@@ -64,7 +67,7 @@
     var ballMaxVelocity = 10;
 
     // Set the ball's reset position
-    var resetPosition = new THREE.Vector3(0, 0.2, 0);
+    var resetPosition = new THREE.Vector3(0, 2, 0);
 
     // Set the ball's collision radius
     var ballRadius = 0.4;
@@ -114,6 +117,9 @@
       // Apply the ball's velocity to its position
       ballPosition.add(ballVelocity);
 
+      // Apply the ground object's position to the ball's position
+      ballPosition.setY(Math.max(ballPosition.y, ground.object3D.position.y + ballRadius));
+
       // Apply the ball's position to the ball entity
       ball.setAttribute("position", ballPosition);
 
@@ -144,6 +150,7 @@
 
       // Loop through each particle system entity
       for (var i = 0; i < particleSystems.length; i++) {
+        // Get the
         // Get the particle system's position
         var particleSystemPosition = particleSystems[i].getAttribute("position");
 
@@ -197,6 +204,5 @@
     detectCollisions();
   </script>
 </a-scene>
-
   </body>
 </html>