OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Cannot Make Spheres Fall with Physics Framework in A-Frame

  • Thread starter Thread starter Aayan Rahman
  • Start date Start date
A

Aayan Rahman

Guest
I'm working on a simple A-Frame scene where I want to generate spheres that fall and interact with the environment using the physics system. However, the spheres I generate are not falling as expected. Here's my code:

Code:
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Physics Sphere Generator</title>
  <script src="https://aframe.io/releases/1.6.0/aframe.min.js"></script>
  <script src="https://cdn.jsdelivr.net/gh/n5ro/[email protected]/dist/aframe-physics-system.min.js"></script>
  <script>
    AFRAME.registerComponent("spheregenerator", {
      init: function () {
        let button = this.el;
        button.addEventListener("click", () => {
          let scene = document.querySelector("#scene");
          let newSphere = document.createElement("a-sphere");

          newSphere.setAttribute("color", "yellow");
          newSphere.setAttribute("scale", "0.3 0.3 0.3");

          let newX = Math.random() * 2 - 1;
          newSphere.setAttribute("position", `${newX} 2 -3`);
          newSphere.setAttribute("dynamic-body", "shape: sphere");

          scene.appendChild(newSphere);
        });
      },
    });
  </script>
</head>
<body>
  <a-scene id="scene" physics="debug:true">
    <a-camera><a-cursor></a-cursor></a-camera>
    <a-plane static-body color="grey" rotation="-90 0 0" scale="15 15 15"></a-plane>
    <a-box spheregenerator color="red" scale="0.5 0.5 0.5" position="2 0.2 -4"></a-box>
  </a-scene>
</body>
</html>

I've registered a custom component called spheregenerator that generates a new sphere and sets its dynamic-body attribute to make it interact with the physics system. The spheres are created and appear in the scene, but they do not fall due to gravity as expected.

What could be the reason for the spheres not falling? How can I ensure that the generated spheres will have proper physics and fall due to gravity?

Additional Information:

I'm using A-Frame 1.6.0 and aframe-physics-system 4.0.1. The debug: true mode for physics shows no errors in the console. Any help or pointers would be greatly appreciated!

I added a click event listener to generate spheres with the dynamic-body attribute for physics. I expected the spheres to fall due to gravity when generated, but they remain stationary in mid-air. Despite setting the dynamic-body attribute, they do not interact with the physics system as expected. I also tried adjusting the positions and checking the console for errors but found none.

<p>I'm working on a simple A-Frame scene where I want to generate spheres that fall and interact with the environment using the physics system. However, the spheres I generate are not falling as expected. Here's my code:</p>
<pre><code><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Physics Sphere Generator</title>
<script src="https://aframe.io/releases/1.6.0/aframe.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/n5ro/[email protected]/dist/aframe-physics-system.min.js"></script>
<script>
AFRAME.registerComponent("spheregenerator", {
init: function () {
let button = this.el;
button.addEventListener("click", () => {
let scene = document.querySelector("#scene");
let newSphere = document.createElement("a-sphere");

newSphere.setAttribute("color", "yellow");
newSphere.setAttribute("scale", "0.3 0.3 0.3");

let newX = Math.random() * 2 - 1;
newSphere.setAttribute("position", `${newX} 2 -3`);
newSphere.setAttribute("dynamic-body", "shape: sphere");

scene.appendChild(newSphere);
});
},
});
</script>
</head>
<body>
<a-scene id="scene" physics="debug:true">
<a-camera><a-cursor></a-cursor></a-camera>
<a-plane static-body color="grey" rotation="-90 0 0" scale="15 15 15"></a-plane>
<a-box spheregenerator color="red" scale="0.5 0.5 0.5" position="2 0.2 -4"></a-box>
</a-scene>
</body>
</html>

</code></pre>
<p>I've registered a custom component called spheregenerator that generates a new sphere and sets its dynamic-body attribute to make it interact with the physics system. The spheres are created and appear in the scene, but they do not fall due to gravity as expected.</p>
<p>What could be the reason for the spheres not falling? How can I ensure that the generated spheres will have proper physics and fall due to gravity?</p>
<p>Additional Information:</p>
<p>I'm using A-Frame 1.6.0 and aframe-physics-system 4.0.1.
The debug: true mode for physics shows no errors in the console.
Any help or pointers would be greatly appreciated!</p>
<p>I added a click event listener to generate spheres with the dynamic-body attribute for physics. I expected the spheres to fall due to gravity when generated, but they remain stationary in mid-air. Despite setting the dynamic-body attribute, they do not interact with the physics system as expected. I also tried adjusting the positions and checking the console for errors but found none.</p>
 
Top