Rotating Three.js around its own axis

I've been experimenting with creating a 3D spaceship that moves in a straight path. By adjusting the angles, you can make it roll and pitch up and down.

Changing the Z angle causes the spaceship to roll correctly, while adjusting the X angle tips the nose. However, when both angles are changed, the expected result does not occur.

It seems that the spaceship is rotating around the world's axis instead of its own. Shouldn't an object's axis also rotate when the object is rotated? Apparently not.

I would greatly appreciate any assistance with this issue.

Here is a demo that clearly shows the problem:

javascript 3d three.js

Answer №1

Have you explored Quaternions yet? In ThreeJS, the class you should check out is THREE.Quaternion.

Quaternions are commonly utilized in flight simulation games, providing the ability to rotate in the craft's local space without encountering "gimbal lock" (which occurs when two axes become parallel and a degree of freedom is lost).

If you're curious, here's a humorous yet informative explanation of quaternions that you might enjoy:

Hopefully, this sets you on the right path...

UPDATE: Isner.com may no longer be accessible, but you can still access the tutorial mentioned above via the Wayback Machine: https://web.archive.org/web/20120601095457/http://www.isner.com/tutorials/quatSpells/quaternion_spells_14.htm

Answer №2

No need to delve into quaternions to solve this problem - just check out the following resource:

Three.js - Rotating a sphere around a specific axis

There are multiple straightforward solutions available!

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

Retrieving data from a script within a React component

How can I access a variable from a script inside a React component? I am performing device detection on Node and sending the resulting object to the client (React) within index.ejs. <script type="text/javascript">window.deviceType = <%- deviceT ...

javascript node.js reactjs window script-tag

Deciphering the JavaScript code excerpt

This information was sourced from (function ($, undefined) { // more code ... $.getJSON("https://api.github.com/orgs/twitter/members?callback=?", function (result) { var members = result.data; $(function () { $("#num- ...

javascript jquery jsonp

Transforming into an input field from a dropdown with Bootstrap select when using AJAX in js.erb

I'm encountering a small issue while updating the view results via AJAX in Ruby on Rails (js.erb). Specifically, when I update/render the form using AJAX, the selectpicker transforms into a simple input and disappears from the view. Any suggestions on ...

javascript jquery ruby-on-rails ajax bootstrap-select

Tips for extracting dynamically loaded content from a website using Node.js and Selenium?

I'm currently encountering some challenges when trying to scrape a website that utilizes react for certain parts of its content, and I'm unsure about the reason behind my inability to extract the data. Below is the HTML structure of the website: ...

javascript node.js selenium selenium-webdriver web-scraping

Using PHP to send asynchronous requests to the server can greatly enhance

I have almost completed my project, but I am facing an issue with reading the data sent to the server. function main() { jQ(document).on("keyup", "form input", function () { var data = new FormData(); var value = jQ(this).val(); da ...

javascript php jquery ajax

Guide to connecting two geometric shapes together with the help of three.js

Is there a way to link two spheres together with a line? I'm looking for a solution that mimics two balls connected by a rope or something elastic. Does anyone have any examples to share? ...

javascript three.js

What's the issue with my jQuery AJAX script?

I am experiencing an issue with my ajax pages using jQuery to retrieve content. Only one page seems to be working properly, even though I have multiple pages set up. How can I resolve this problem? $(document).ready(function() { $('.lazy_content& ...

javascript jquery html ajax

What advantages does KnockoutJS offer over AngularJS?

Can KnockoutJS offer a unique feature that rivals or exceeds those of AngularJS? ...

javascript jquery html angularjs knockout.js

IE8 triggers automatic download upon receiving JSON response using jQuery

Can you help me make IE8 compatible with this code using jQuery to handle an ajax request that returns data as JSON? $.ajax({ url: formAction, type: 'post', dataType: 'json', data: form, success: ...

javascript jquery ajax internet-explorer internet-explorer-8

What could be causing the 3D model to not function properly when paired with AmbientLight?

I'm facing an issue with adding a 3D model in Three.js. When I turn on AmbientLight, the model doesn't light up properly while other 3D models work fine. It seems that there is a problem within the 3D model itself, but I can't figure out whi ...

three.js

"Unfortunately, the JavaScript external function failed to function properly, but miraculously the inline function

Struggling to create a fullscreen image modal on the web? I was able to get it working fine when embedding the script directly into my HTML file, but as soon as I moved it to an external JS file, things fell apart. I've double-checked all the variable ...

javascript html css

Exploring CouchDB through Ajax to interact with a static website

Is it feasible for my HTML static website to interact with CouchDB using AJAX and retrieve the data without relying on server-side languages like PHP or Python? The CouchDB might be hosted on a different server/domain, so JSONP would need to be utilized. ...

javascript jquery ajax nosql couchdb

Achieving peak efficiency: Comparing the execution of actions through dispatching versus passing them as props

I have a technical query. I'm attempting to send a value from a child component to the store by utilizing an action dispatcher inside the child component. This action dispatcher then modifies the state value in the reducer. Would it be wise to pass v ...

javascript reactjs redux store reducers

Navigating through child elements within a div using JavaScript

I recently coded a div using this snippet... let sidebarBox = document.createElement("div"); sidebarBox.id = "sidebarBox"; ...and then I created a second div like so... let sidebarAd = document.createElement("div"); sidebarAd.className = "sidebarAd"; B ...

javascript html

Transforming a CSV file into JSON format using Gatsbyjs

I am currently exploring the possibilities of GatsbyJs and considering the utilization of the gatsby-transformer-csv plugin. You can find the documentation for this plugin here. I have got my hands on two CSV files exported from WordPress that I am eager ...

javascript json csv gatsby

Adding a picture to the webpage and saving it temporarily on the site

After exploring all options on the site, testing it rigorously and closely following the instructions provided, I am still unable to determine where exactly I went wrong. Website Link: The main goal is to upload an image and temporarily store it within t ...

javascript ajax html

Managed the double-click event to select Snap.svg text

I am currently utilizing the snapsvg library for a project where I am implementing the dblclick event to trigger a browser window alert. However, when clicking on the svg canvas, not only does the alert pop up but some text on the canvas also gets selected ...

javascript html event-handling dom-events snap.svg

Tips for modifying the background color of an individual page in Ionic 3 and above

https://i.stack.imgur.com/t2mDw.pngI am just starting with Ionic and I'm attempting to modify the CSS of a single page by changing the background color to something different, like green, for example. I know that I can make global changes, but in this ...

javascript angular ionic-framework

There is an issue with Node/Express not accurately updating the data model

I recently went through a tutorial on creating a RESTful API with Node.js and MongoDB. While it worked well overall, I encountered a few issues. My Player model is as follows: var player = new mongoose.Schema({ name: String, email: String, score: String } ...

javascript ajax node.js mongodb express

How can I manually set a date in Angular bootstrap datepicker?

Using the Angularjs Bootstrap datepicker has been a great experience, but I encountered a problem when attempting to select the date using JavaScript. How can I ensure that the selected date in the datepicker matches the date read from a specific object, s ...

javascript angularjs twitter-bootstrap datepicker bootstrap-datepicker

JavaScripter Q&A