A-frame set physics to a variable

Question

I am creating a scene using A-frame (https://aframe.io) and I'm wondering how I can set the physics in my scene to variable using the A-frame physics component. What should happen is the physics inside my scene should be set to the value of my variabled called x. How can this be done?

Code to my scene: https://jsfiddle.net/AidanYoung/1cmgLkrp/2/ Code to the physics component: https://github.com/n5ro/aframe-physics-system

Now currently the physics in my scene is set using the <a-scene> tag and it's current set to -10. I want to change the physics to equal the variable x. Here is the part of my code where the physics is set:

<a-scene background="color: lightblue;"
         renderer="antialias: true; gammaOutput: false;"
         light="defaultLightsEnabled: true;"

         physics="gravity: -10; 
         
         debug: false; restitution: 10;">

Currently the gravity is set at -10. I want to set the gravity to the value of the variable x. How can this be done?

Mic Fung · Accepted Answer · 2021-07-26T01:28:06.857

You can set the gravity in the physics's driver

Set vertical gravity

const scene = AFRAME.scenes[0] // or use document.querySelector('a-scene')
scene.systems.physics.driver.world.gravity.y = -50; // set vertical gravity

Here is the full version

You can run the code snippet below and press space bar, the jump will have higher resistance.

<html>

<head>
  <script src="https://aframe.io/releases/0.8.2/aframe.min.js"></script>
  <script src="https://unpkg.com/aframe-extras@5.0.0/dist/aframe-extras.min.js"></script>
  <script src="https://unpkg.com/aframe-physics-system@3.3.0/dist/aframe-physics-system.min.js"></script>
  <script src="https://unpkg.com/aframe-animation-component@5.1.2/dist/aframe-animation-component.min.js"></script>
  <script src="https://unpkg.com/aframe-template-component@3.2.1/dist/aframe-template-component.min.js"></script>
  <script src="https://unpkg.com/aframe-gif-shader@0.2.0/dist/aframe-gif-shader.js"></script>
</head>

<body>
  <a-scene do-something background="color: lightblue;" renderer="antialias: true; gammaOutput: false;"
    light="defaultLightsEnabled: true;" physics="debug: false; restitution: 10;">
    <a-assets>
      <a-mixin id="box-bump"
        animation__bump="property: object3D.position.y; from: 0; to: 0.2; dur: 200; dir: alternate; loop: 1; startEvents: click, collide;">
      </a-mixin>
      <script id="pipe" type="text/html">
        <a-entity geometry="primitive: cylinder; segmentsHeight: 1;"
                  material="color: green; roughness: 0.2;"
                  position="0 0.5 0"
                  shadow="receive: true; cast: false;">
          <a-entity geometry="primitive: cylinder; radius: 1.1; height: 1; segmentsHeight: 1;"
                    material="color: green; roughness: 0.2;"
                    position="0 1 0"
                    shadow="cast: true; receive: false;"
                    static-body>
            <a-entity geometry="primitive: circle; radius: 1;"
                      material="color: #010; shader: flat;"
                      position="0 0.502 0"
                      rotation="-90 0 0"></a-entity>
          </a-entity>
        </a-entity>
      </script>
    </a-assets>

    <!-- CAMERA -->
    <a-entity id="rig" position="0 0 5" movement-controls="speed: 0.2;" kinematic-body="enableJumps: true;"
      jump-ability="distance: 3;" tracker>
      <a-entity camera="far: 1000;" wasd-controls="enabled: false;" look-controls="pointerLockEnabled: true;"
        position="0 1.6 0">

        <a-cursor fuse="false" raycaster="objects: [data-interactive]; far: 4;"></a-cursor>

      </a-entity>
    </a-entity>

    <!-- STAGE -->
    <a-entity id="stage">

      <a-image src="#title" npot="true" width="52.8" height="26.4" position="0 34 -50"></a-image>

      <a-entity position="0 3.5 -4">

        <a-box material="shader: standard; roughness: 1; npot: true; src: #brick;" position="-1 0 0" data-interactive
          sound="on: click; src: #brick-sound; poolSize: 10;" static-body></a-box>

      </a-entity>

      <a-box material="shader: standard; roughness: 1; npot: true; src: #brick;" position="1 0 0" data-interactive
        static-body></a-box>
    </a-entity>

    <!-- Pipes -->
    <a-entity template="src: #pipe" position="-5 0 -10"></a-entity>
    <a-entity template="src: #pipe" position="0 0 -10"></a-entity>
    <a-entity template="src: #pipe" position="5 0 -10"></a-entity>

    <a-entity geometry="primitive: box; width: 50; depth: 50; height: 1;"
      material="shader: standard; roughness: 1; src: #bedrock; repeat: 25 25; npot: true;" position="0 -0.5 0"
      static-body></a-entity>
    </a-entity>

  </a-scene>
  <script>
    const scene = AFRAME.scenes[0] // or use document.querySelector('a-scene')
    scene.systems.physics.driver.world.gravity.y = -50; // set vertical gravity
    console.log(scene.systems.physics.driver.world.gravity)
  </script>
</body>

</html>

A-frame set physics to a variable

1 Answers1