Assign the physics settings to a variable within the A-frame

Exploring A-frame () for my scene creation has been exciting. I am curious about how I can dynamically adjust the physics in my virtual world using the A-frame physics component. The goal is to have the physics within my scene be determined by a variable called x. Is there a way to achieve this?

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

Currently, the physics settings in my scene are established using the <a-scene> tag and it's currently fixed at -10. My aim now is to align the physics with the value of variable x. Below is an excerpt of my code where the physics configuration is defined:

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

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

The gravity is currently set to -10. But I wish to make it equal to the variable x. How might I accomplish this task?

javascriptthree.jsphysicsaframewebvr

Answer №1

To adjust the gravity within the physics driver, follow these steps:

Customize vertical gravity setting

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

Complete Version Below

If you execute the code snippet provided and press the space bar, the jump will showcase increased resistance.

<html>

<head>
  <script src="https://aframe.io/releases/0.8.2/aframe.min.js"></script>
  <script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0465627665696129617c7076657744312a342a34">[email protected]</a>/dist/aframe-extras.min.js"></script>
  <script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c9a8afbba8a4ace4b9a1b0baa0aabae4bab0babdaca489fae7fae7f9">[email protected]</a>/dist/aframe-physics-system.min.js"></script>
  <script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3455524655595119555a5d5955405d5b5a19575b59445b5a515a4074011a051a06">[email protected]</a>/dist/aframe-animation-component.min.js"></script>
  <script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="87e6e1f5e6eae2aaf3e2eaf7ebe6f3e2aae4e8eaf7e8e9e2e9f3c7b4a9b5a9b6">[email protected]</a>/dist/aframe-template-component.min.js"></script>
  <script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ee8f889c8f838bc3898788c39d868f8a8b9caedec0dcc0de">[email protected]</a>/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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using the same ID to both assign and retrieve a value

Currently, I'm utilizing the x-editable library for jQuery, which is an in-place editor. Below is a snippet of my working code: <?php $num_rows = 1; // Fetching records from the "tblstudent" table and storing them in $row while ($row = ...

javascriptphpjquerygetelementbyidx-editable

Differences in outcomes have been observed between the elementLocated and findElements functions

Currently, I am in the process of developing Webdriver automation for a specific web application. As part of this process, I have created a test that seems to be functioning well most of the time but occasionally encounters an issue. it('verifies pre ...

javascriptselenium-webdriver

Integrate Vue Login Functionality using Axios HTTP Requests

Hello everyone! I am new to Vue and currently struggling with making an HTTP Request to my backend. When I check the browser console, I can see the access token retrieved from /login endpoint but when I try to fetch data from api/users, it returns "Token ...

javascriptvue.jshttpaxios

Tips for addressing the Stale Element Reference Exception when locating an element in JMeter

Trying to locate an element with a structure similar to the following: <div> <div> <div> <ul> <object id = "obj" #document (link here) <html> <head> </head> ...

javascriptselenium-webdriverautomationjmeterstaleelementreferenceexception

Javascript alert: forgetting to add ; before statement causes SyntaxError

Seeking to incorporate a post-it application into my django website using Javascript/JQuery. Came across a tutorial and attempted to add it to my script, but encountered a SyntaxError: SyntaxError: missing ; before statement post-it.js:2:19 Not be ...

javascriptjquery

The Johnny-Five stepper initiates movement within a for-loop

I am new to using node.js and johnny-five. I want to move a stepper motor 5 times with 1000 steps each. Here is what I have tried: do 1000 Steps in cw ; console.log('ready); do 1000 steps; console.log('ready') ... It woul ...

javascriptnode.jsarduinojohnny-five

An uncaught runtime error has occurred: TypeError - subSector.map is not a valid function

I'm encountering a challenge when attempting to map through JSON data retrieved from a fictitious API. The process works smoothly when there is more than one data item, but I encounter an error when there is only a single object. Below is the code sn ...

javascriptreactjsnext.js

How can I modify the URL path using react-i18next?

I've been grappling with this problem for the past few days. My React app is causing me some trouble as I try to implement multilingual support using i18next. I aim to modify the URL path based on the selected language, such as http://localhost:3000/e ...

javascriptreactjsi18nextreact-i18next

Access the CSV file using Office365 Excel via a scripting tool

Objective I want to open a CSV file using Office365's Excel without actually saving the file on the client's machine. Challenge The issue with saving raw data on the client's machine is that it leads to clutter with old Excel files accumu ...

javascriptexceltypescriptcsvoffice365

The MeshBasicMaterial is producing the wrong color when given input

I've encountered an issue where the shade of the material in my scene is different from what I intended, even though there are no other lights or factors influencing it. Initially, I used meshBasicMaterial thinking that lights were causing the proble ...

three.jsreact-three-fiber

Unveil Secret Divs with a Click

I am in search of a way to display a hidden div when I click on a specific div, similar to the expanding images feature in Google's image search results. I have made progress with my limited knowledge of javascript, as shown in this CodePen: http://co ...

javascriptjqueryhtmlcss

Retrieve the current height of the iFrame and then set that height to the parent div

Within a div, I have an iFrame that needs to have an absolute position for some reason. The issue is that when the iFrame's position is set to absolute, its content overlaps with the content below it. Is there a way to automatically adjust the height ...

javascriptjqueryhtmlcssiframe

Exploring Relative Rotations in Three.js

I currently have a scenario where I have a THREE.Scene containing two meshes, namely meshA and meshB. Both of these meshes have been rotated differently. My objective is to take meshB out of the scene and attach it as a child of meshA, while maintaining it ...

javascriptrotationthree.jsscenegraph

Using Angular: connecting $viewContentLoaded to manually initiate app bootstrapping

I have an Angular module that I am bootstrapping manually and attempting to access its $rootScope to add an event listener for $viewContentLoaded. Below is the code snippet: angular.bootstrap(el, [appname]); //////////////////////////// Fixing links cons ...

javascriptangularjsmodulerootscope

The operation to add a new user timed out after 10 seconds while buffering in the mongooseError

It appears that when I run mongoose in this code, it doesn't seem to connect to my local MongoDB database in time. The error message "mongooseError: Operation users.insertOne() buffering timed out after 10000 ms" is displayed if the insert operation i ...

javascriptmongodbmongoose-schema

JavaScript code using jQuery's ajax method is sending a request to a PHP server, but

Attempting to utilize jQuery ajax for PHP call and JSON return. The test is quite simple, but only receiving an empty object in response. No PHP errors appearing in the LOG File. jqXHR is recognized as an object with 'alert', yet not displayin ...

javascriptphpjqueryajaxjson

Issue with AngularJs failing to display data

As a newcomer to AngularJS, I am looking to utilize AngularJs to display the Json output from my MVC controller. Here is the code snippet for my MVC Controller that generates Json: [HttpGet] public JsonResult GetAllData() { ...

javascriptangularjsjsonasp.net-mvcangularjs-directive

The width of the table remains consistent

I have created a division that includes two tables stacked on top of each other. However, I am facing an issue where the width of the second table remains fixed and does not change even when I try to increase it. Here is the code snippet below: functio ...

javascriptjqueryhtmlcss

What is the best way to manage the loading and unloading of JavaScript within dynamically loaded partial pages?

Utilizing jQuery and history.js, I manage seamless transitions between partial pages to prevent entire document reloads. Some of these partial pages include unique javascript files. Despite successful page transitions, remnants of executed javascript linge ...

javascriptjqueryajaxhistory.js

The function signature '(_event: React.SyntheticEvent, value: number) => void' cannot be assigned to the type 'FormEventHandler<HTMLUListElement>'

I am facing an issue with my component "PageFooter" being duplicated in three other components. I am trying to refactor it as a UI component. " I am getting the error message: 'Type '(_event: React.SyntheticEvent, value: number) = ...

javascriptreactjstypescriptnext.jsreact-typescript