A-Frame Physics engine not working properly

425 Views Asked by At

I am trying to achieve 2 things

  1. Make the ball bounce from surface
  2. Make camera entity a dynamic body so that when i collide with the OBJ i have imported(mapped as static body) , the camera dosent go through.

As of now, the ball just floats in the air and camera moves through the OBJ model.What am i doing wrong?

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- aframe script should be in header and must be before a-scene -->
    <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/n5ro/aframe-physics-system@v$npm_package_version/dist/aframe-physics-system.min.js"></script>
    <meta charset="UTF-8" />
  </head>
  <body>
    <a-scene physics="gravity: -9.8" >
    
      <a-assets>
        <img id="textura_pelota" src="https://cdn.glitch.global/7f903c5a-5f2e-4d05-97ea-3af04fbd3e17/pexels-iva-mu%C5%A1ki%C4%87-691710.jpg?v=1657687184405" crossorigin="anonymous"/>
        <a-asset-item id="tower-obj" src="https://cdn.glitch.global/8f34032d-6c24-4dec-a227-deea5b507000/building_04.obj?v=1657693862238"></a-asset-item>
        <a-asset-item id="tower-mtl" src="https://cdn.glitch.global/8f34032d-6c24-4dec-a227-deea5b507000/building_04.mtl?v=1657694451566"></a-asset-item>
        <img id="sky-b" src="https://cdn.glitch.global/8f34032d-6c24-4dec-a227-deea5b507000/sunny.jpg?v=1657695761868" crossorigin="anonymous"/>
        
      </a-assets>

      <a-plane
        src="#textura_pelota"
        position="0 0.01 0"
        rotation="-90 0 0"
        height="100" 
        width="100"
        repeat="200 200"
        roughness="0.8"
        static-body
      ></a-plane>
      
      <a-sphere color ="black" radius="0.5" position = "40 3 40" dynamic-body>
      
      </a-sphere>
      
      <a-obj-model src="#tower-obj" mtl="#tower-mtl" scale ="7 7 7" material="wireframe:true" static-body></a-obj-model>
      
      <a-entity camera look-controls wasd-controls position="40 1.6 40" dynamic-body>
        <a-entity geometry="primitive: plane; height: 0.2; width: 0.2" 
            material="color: gray; opacity: 0.5"  ></a-entity>
      </a-entity>
    
    <a-sky src="#sky-b" radius = "100" position ="0 0 0"></a-sky>
    </a-scene>
  </body>
</html>
1

There are 1 best solutions below

0
Charlie Leedham On
 <script src="https://cdn.jsdelivr.net/gh/n5ro/aframe-physics-system@v$npm_package_version/dist/aframe-physics-system.min.js"></script>
    <meta charset="UTF-8" />

yeah that script is failing to fetch from github. you're better off downloading the file directly in the source files and saving it in your directory etc.

https://github.com/n5ro/aframe-physics-system/tree/master/dist

Minified: https://github.com/n5ro/aframe-physics-system/blob/master/dist/aframe-physics-system.min.js