Manipulate two elements using restrictions in AFRAME

I have two objects that I would like to animate with specific movements. Here is what I need:

Currently, I have their 3D models in stl format along with their offset calculations.

I can import them into aframe, but I am struggling to implement movement controls using the keyboard, while also maintaining their original posture. For example:

  1. I need the square element to move in a linear path by a set distance when the Q key is pressed
  2. The round element should rotate by a specific angle when the R key is pressed
javascriptthree.js3dkeyboard-eventsaframe

Answer №1

There are two important points to consider in this scenario:

1) Reacting to keypress events:

document.onkeypress = function(e) {
    if (e.charCode === 118) {

   }
};

You have the option to react based on either the charCode (ASCII) or the actual key itself ('d', 'f'...).
Check out the live example here.

2) Managing rotation and movement within specified "boundaries"

If you want a square to move around a cylinder, it should be set as a child element of the cylinder.

<a-cylinder>
  <a-box></a-box>
<a-cylinder>

By doing this, the box will move relative to its parent's reference frame. So, moving it "forward" won't necessarily align with the global "forward" vector, but rather the parent's "forward" direction.

Take a look at the demonstration here.

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

Tips on extracting specific information from nested JSON objects

I have a packet with the following data and I need to extract a specific part: "data":"YOeNkAAg1wQAYjm/pg== Is there a way to achieve this using JavaScript in node-red? { "payload": "lora/01-01-01-01-01-01-01-01/39-31-37-33-5b-37-67-19/packet_sent { ...

javascriptjson

Exploring Angular 10's advanced forms: delving into three levels of nested form groups combined with

Project Link: Click here to view the project In my testForm, I have 3 levels of formGroup, with the last formGroup being an array of formGroups. I am trying to enable the price field when a checkbox is clicked. I am unsure how to access the price contro ...

javascriptangulartypescript

Creating an Angular directive for dynamically generated HTML elements

I am currently updating a website that utilizes jQuery and PHP. The HTML code on a particular page is generated by jQuery AJAX calling PHP code. Is there a way to incorporate angular directives into this HTML code? For instance, the PHP code generates: & ...

javascriptjqueryangularjs

Energetic flair for Vue animations

I am currently developing a VueJS sidebar component. The objective is to allow the parent to define a width and display a toggle button that smoothly slides the sidebar in and out. Here is an example: <template> <div class="sidebarContainer ...

javascriptcssvue.js

What are some helpful tools for organizing data from an External API in NodeJS and Express?

One of the tasks I'm currently working on involves connecting to an external API through my backend system. Data flow : External API -> My backend -> Client side Typically, I would use modules such as request or http to facilitate this p ...

javascriptnode.jsapiexpressexternal

What is the method for ensuring text remains within a square while it is being relocated?

Check out this jsfiddle where you can interact with a moving square: http://jsfiddle.net/helpme128/3kwwo53t/2/ <div ng-app="test" ng-controller="testCtrl"> <div id="container"> <div class="shape" ng-draggable='dragOptions& ...

javascripthtmlcssangularjs

Can Vuex getters be utilized in a Vue component's computed property?

I have various variables in my vuex-store, such as loggedIn. I need to access this variable from the computed section of my component to filter an array based on its value. Here is how I am trying to implement it in my code: <td v-for="(item, index) i ...

javascriptvue.jsvuejs2vue-componentvuex

Issues with passing parameters in JavaScript

I am facing an issue while passing multiple variables from a PHP page to a JavaScript function. Only the first parameter seems to be passed successfully. In the PHP code, the script is being called like this: <? $sdate = 0; $edate = 2; ?> <scrip ...

javascriptphpeditablegrid

The first Ajax call was successful, but the second Ajax call was unexpectedly sent twice

After making an AJAX call to post the value of a textarea to the database, I have noticed a strange issue. The first post always goes through correctly. However, when attempting to post another entry, the AJAX call seems to be executed twice. Subsequently, ...

javascriptjqueryajax

Trouble arises when attempting to use JavaScript, JSP, and JSON in conjunction with

I am in the process of creating a client-server application where I send a request from the client to the server using a JSON object for registration. However, despite receiving a JSON response with an "OK" field as expected, the client keeps triggering th ...

javascriptjavajsonmongodbjsp

Is it possible to observe the website functionalities and execute them directly from the console?

Question about JavaScript: Is it safe for a script tag to be visible in the body of the developer console and for functions to be run directly on the website? It raises security concerns, and there should be measures in place to prevent this kind of displa ...

javascriptsecuritydeveloper-console

After changing the page, the Facebook JS SDK fails to function properly when using JQueryMobile

I'm facing an issue with my webapp that utilizes jQuery Mobile for full ajax navigation. I have initialized the Facebook SDK at the pageinit event in jQueryMobile (called on each page). jQuery(document).on('pageinit', function (event) { ...

javascriptjqueryajaxfacebookweb-applications

Which function is most suitable for verifying if the values from req.param are NaN and assigning a new value if they are found to be NaN?

Regarding the about page: I'm currently working on a react app that sends URL parameters to the backend server. The frontend URL looks something like this: maxprice=100000&minsqm=50&maxsqm=100&page=1, which are the user's filters for ...

javascriptnode.js

Can one access console and localstorage through android studio?

Is there a way to detect if LocalStorage is being saved on an Android device from Android Studio in an application with a WebView? Also, can javascript code be executed from Android Studio similar to running it in a Chrome console? ...

javascriptandroidwebviewandroid-webview

Issue encountered while trying to update field using dynamically created row

I am encountering a problem while trying to update the unit cost and total cost of dynamically generated rows in an inventory form that submits inventories to a database. The product names are fetched via autocomplete jQuery, as shown in the snapshots belo ...

javascriptjqueryautocomplete

What sets apart passing arguments to a function from utilizing variables at the class level?

As someone who is just starting out in the Typescript and Angular-2 world, my previous experience includes working with Java and Angular-1.5. Imagine a scenario where there is a component class with several variables that need to be used across functions, ...

javascriptangulartypescript

Nodemon is not auto-reloading my server even after I have updated the code

I'm having trouble with nodemon not restarting my file after I make changes to it. It says it's restarting but doesn't actually do it. I've attempted putting the nodemon command into npm start and using the -L flag, but it hasn't s ...

javascriptnode.jsnpmnodemon

iOS creates dynamic images with artifacts that appear on a generated and animated canvas

I am currently developing an HTML5 web application for WeChat, compatible with both iOS and Android devices, using only pure JavaScript without any third-party libraries like jQuery. The main feature of my app involves creating visually appealing animation ...

javascriptandroidioshtmlcanvas

Fixed position of Material UI tooltip popper when the word length increases

https://i.sstatic.net/mXcqy.png I am striving to replicate the image above by customizing the MUI tooltip properties, but instead, I am only able to achieve this result: https://i.sstatic.net/Rr79x.png By applying a margin to the popper element, I was a ...

javascriptreactjsmaterial-uicss-selectors

Is there a way for me to retrieve a variable from within a .then function nested within another .then function?

Here is an example of code where I am attempting to log the value of 'a' to the console. driver.sleep(2000).then(function logAInConsole() { var a = ["Quas","Wex","Exort","Invoke"]; for(var i = 0; i < a.length; i++) { driver.sleep( ...

javascriptnode.js