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?
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/[email protected]/dist/aframe-extras.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/aframe-physics-system.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/aframe-animation-component.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/aframe-template-component.min.js"></script>
<script src="https://unpkg.com/[email protected]/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>