Rotating a plane in a 3D environment using Three.js

I'm working on developing a basic airplane flying game. The goal is to allow users to control the plane using arrow keys, rotating it within a 360-degree area. When using the up and down arrow keys, I want the plane to move along a Y-axis relative to its horizontal position. Meanwhile, the left and right arrow keys should only rotate the plane around its z-axis, adjusting its Y-axis position accordingly. My main question is how can I achieve this kind of rotation where the Y-axis remains relative to the current horizontal position?

So far, I've created a group named 'airplane' and have experimented with commands like airplane.rotation.z (for left and right movement) and airplane.rotation.x (for up and down movement). However, the x-axis doesn't align with the new horizontal plane as desired. Additionally, I tried accessing the model/mesh within the group using airplane.children[1].matrix.rotation.x in hopes of changing the relative Y-axis, but encountered the same issue. How can I determine the relative Y-axis based on the plane's current horizontal orientation?

If you'd like to see my code, you can view it on jsfiddle here

Any assistance or advice on this matter would be highly appreciated.

javascriptmathrotationthree.js

Answer №1

It's a bit challenging for me to grasp your question fully, but it seems like you're asking how to rotate an object around its internal z- or x-axis using the arrow keys.

One way to achieve this is by employing a function similar to this:

var _q1 = new THREE.Quaternion();

function rotateOnAxis( object, axis, angle ) {

    _q1.setFromAxisAngle( axis, angle );
    object.quaternion.multiplySelf( _q1 );

}

This particular routine utilizes quaternions for its implementation. It may sound complex, but all you really have to do is set:

object.useQuaternion = true;

You can check out the updated example here: http://jsfiddle.net/Lc8gH/20/.

UPDATE: Now you can utilize 

Object3D.rotateOnAxis( axis, angle );

Developed with three.js r.58

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 PHP, identify a URL within text, verify if the URL refers to an image or a website, and then display the

Currently in the midst of a project that involves processing text containing various words and URLs, specifically images. The task at hand is to identify whether each URL within the text points to an image or a website. If it's an image, display it us ...

javascriptphphtmlimageurl

Exploring smooth scrolling functionality using AngularJS and integrating it with IFrames

After implementing an angular controller, I included the following code: angular.element(document).ready(function () { ... } Within this setup, I added a function to enable smooth scrolling to the hash of window.location.hash using .animate({scrollTop... ...

javascriptjqueryhtmlangularjsiframe

Using Ajax to delete item from table

I am currently working on populating a table in the View by clicking on items from a dropdown menu. Fortunately, I already have a script that accomplishes this task. Additionally, I have configured it so that when an item in the table is clicked, it is re ...

javascriptjqueryajaxasp.net-mvc

The error message "Trying to use b.replace as a function when it is not"

Hey there! I've encountered an uncaught type error in my ajax file console, even though everything seems to be functioning correctly... Here is the HTML code: <div id="deletepropertybutton"><a href = "editproperty.php?property_id=<?php e ...

javascriptphpjqueryajax

"Dynamically moving" background on canvas

Struggling to animate a dynamic "background" for my canvas project using raphaelJS. Here's the code snippet I'm working with: function bg(){ h = 0; var terra = paper.rect(0, 500 + h, 900, 100); terra.attr({'fill': '# ...

javascriptjqueryraphael

The text manipulates the canvas position and changes the location of mouse hover interaction

I am trying to achieve a similar header layout like the one shown on this page. However, when I insert some text within the header section: <div id="large-header" class="large-header"> <h1 style="font-size:150%;">Dummy Text</h1> ...

javascripthtmlcss

Issues with displaying images in CSS when using HTML 5 canvas drawing

In attempting to draw an image on a canvas using a pre-loaded image and CSS, such as: img.style.backgroundColor="red"; ctx.drawImage(img,0,0,100,100); I have observed that the image is drawn without incorporating the CSS modifications. Are HTML canvases ...

javascriptcsshtmlcanvastransparency

The browser failed to display the SVG image, and the console log indicated that the promise was rejected, with the message "false."

I'm struggling to understand why my SVG isn't showing up on the screen. The console log is displaying "false," which I believe indicates that a promise was rejected Here is the TypeScript file I am working with: export class PieChartComponent im ...

javascriptangulartypescriptd3.js

Is it correct to use Javascript for redirection?

My asp.net base page redirects to the login page automatically with the following code in case of authentication issues: response.write("<script>window.open('" & LoginPage & "','_parent');</script>"); I'm wond ...

javascriptasp.netsecurityxss

Attempting to transfer various variables from several windows using AJAX

Is it possible to pass multiple variables from two different windows into the same PHP script? If not, what would be the best approach to take? Thank you. verifyemail.html <script type = "text/javascript" src = "js/js_functions.js"></script> ...

javascriptphpjqueryhtmlajax

External vendor scripts such as JavaScript and jQuery are not functioning properly after being rendered in a ReactJS environment

I am currently developing a frontend web app using ReactJS. I obtained a template from W3layout that is built with HTML5, CSS3, and custom JS files, along with various third-party/vendor plugins like nice-select, bootstrap, slik, owl-carousel, etc. Despit ...

javascriptjqueryreactjs

Using JavaScript to format an array's values within a string in a stylish way

I am facing a challenge in styling words from an array if they are found in a string. My current code is not working as expected. Below is the code I am using, where I am looping through both the array of words and the table containing strings. Only one ...

javascriptcss

The state returned by React Redux does not meet the expected results

I recently implemented a like function on the backend using Node and MongoDB. This function successfully returns the post with an updated likes counter, which I tested using Postman. The post object contains properties such as likes, _id, by, createdAt, an ...

javascriptnode.jsreactjsmongooseredux

Do developers typically define all flux action types within a constants object as a common programming practice?

This question arises from an informative article on flux. The common approach involves defining all action types within a constants object and consistently referencing this object throughout the application. Why is it considered a common practice? What ...

javascriptreactjsfluxreactjs-flux

jQuery AJAX issues on Safari and iOS gadgets

I'm facing a compatibility issue specifically with Safari and all iOS devices. I've developed this jQuery code for a project, but it seems to have trouble working with Safari. Interestingly, it works perfectly fine with Chrome, Firefox, and even ...

javascriptjqueryiosajaxsafari

React Jest is experiencing an error at line 246 in the internal process promises module, triggering an uncaught exception with the specified error

In my React code snippet below, I am using the useEffect hook with an async function to fetch data: useEffect(() => { (async () => { await httpClient .get(`${config.resourceServerUrl}/inventory/`) . ...

javascriptreactjspromisejestjscallback

Show only a cropped section of a resized image within a div

I have a script that calculates the best region of an image to display within a specific div size. This calculation is done in PHP and generates a JSON output like this: {"scale":1.34,"x1":502,"x2":822,"y1":178,"y2":578} The image in question has dimensi ...

javascriptjqueryhtmlcss

What is the maximum number of THREE.WebGLRenderer instances allowed on a single page?

In my current project, I am experimenting with multiple THREE.WebGLRenderer instances, each one having its own unique scene. Initially, I was able to successfully load up to 16 scenes. However, once I tried to load the 17th scene, I noticed that the first ...

three.jswebgl

Issue encountered when attempting to insert data via node into MySQL database

As a new Node developer, I am in the process of building some initial applications. Currently, I am working on inserting records into a MySQL database using Node. Below is an example of my post method: router.post('/add',function(req,res){ c ...

javascriptmysqlnode.jsexpress

Steps to invoke the function that showcases the dynamic content of the initial tab using Angular Bootstrap upon the loading of the form or window

Utilizing an angular bootstrap tab, I am aware that the ng-click event on a tab will trigger any function upon clicking the tab. I am aiming to have some dynamic content load on the first tab when the form is loaded. The HTML code snippet is as follows: ...

javascriptjqueryhtmlangularjs