In Three.js, what causes the x and z axes to produce the same result when the camera is rotated 90 degrees?

Currently, I am in the process of creating a basic framework for a first-person-shooter game to gain a deeper understanding of all its components, particularly focusing on 3D mathematics.

I have stumbled upon an issue that seems to only arise when using Three.js.

The problem occurs when I rotate the camera along the y-axis by 90 degrees (looking to the left); rotating along the x and z axes produce a similar effect, causing the camera to "roll."

Why is this phenomenon happening? Shouldn't rotation around the x-axis result in a different outcome compared to rotating around the z-axis?

I have provided an example showcasing this behavior. Note that this issue isn't limited to this specific instance (use the up and down arrow keys to rotate):

Rotation along the x-axis: Source code:

Rotation along the z-axis: Source code:

The following line was the only change made in both examples:

When rotating along the x-axis:

camera.rotation.x += degToRad(upRot);

When rotating along the z-axis:

camera.rotation.z += degToRad(upRot);
javascriptmath3dthree.js

Answer №1

After some investigation, a simple solution was found for the issue at hand.

Once the camera is created, adding this one line of code proved to be the fix:

camera.eulerOrder = "YXZ";

The problem stems from how Three.js handles rotations of objects like the camera. In Three.js, rotation is based on the other axes of the object, meaning that the z axis (by default) is influenced by the y axis which in turn is affected by the x axis.

The default eulerOrder setting is "XYZ". This led to a situation where changing the x axis instead of the z axis when the y axis remained unchanged did not produce the desired outcome.

By switching the eulerOrder to "YXZ", we were able to first rotate side-to-side, then up and down, followed by rolling – achieving the intended result for a first person shooter game.

Credit goes to WestLangley and dust_ in the Three.js IRC community.

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

What are the best practices for effectively utilizing the nodejs Stream API?

I am currently working on an application that reads input from various sources, including files, sockets, and other parts of the same program that produce buffers or strings. While I have successfully handled sockets and files using node's Stream API ...

javascriptnode.jsstream

JavaScript's "for of" loop is not supported in IE 11, causing it to fail

Here is a piece of code I'm using to select and remove a d3.js node: if (d.children) { for (var child of d.children) { if (child == node) { d.children = _.without(d.children, child); update(root); ...

javascriptecmascript-6internet-explorer-11

Trouble displaying personalized components from mdx-components.js in Next.js

I've been attempting to integrate custom components into my .mdx posts using the mdx-components.js file, however, the custom components are not being displayed. Here's the code from my mdx-components.js file, which I created following the guidel ...

javascriptnext.jsmdxjs

Execute jQuery's .one() function only when in the viewport

As I work on creating a progress bar that plays when in viewport, I've encountered a hiccup. The code executes every time and ends up generating multiple progress bars instead of running just once. The following code snippet is part of a Joomla Extens ...

javascriptjqueryjoomla-extensions

Comparing Data Manipulation Techniques: Server Side vs Client Side Approaches in Reddit API Integration

As I delve into creating a simple Node/Express web application that fetches data from the Reddit API, performs some alterations on it, and intends to present this information using Charts.js on the client side, I find myself facing a dilemma due to my limi ...

javascriptnode.jsexpressdata-manipulationserverside-javascript

An effective method for linking a value from one ng-model to another is by identifying and matching a specific string

I have been tasked with binding a value to one model based on the content of another model when it contains a string that starts with "https". For instance, there are two text fields each associated with a different model. <input type="text" ng-model= ...

javascriptangularjsangular-ngmodel

Having trouble with the placeholder blur feature on images in Next.js?

Within my website, I have a dynamic route set up as /titles/[slug].js. Upon initially navigating to this route, everything functions as expected - the placeholder blur effect displays on all images and animations triggered by react-intersection-observer wo ...

javascriptreactjsnext.js

JQuery Challenge: Solving Dynamic Modal Issues

I'm in the process of creating a webpage that features multiple divs, each with its own unique image and title. Within each div, there's a button that, when clicked, should grab the specific image and title and display them in a modal. However, I ...

javascriptjqueryhtmltwitter-bootstrap

"A lengthy contenteditable div designed to mimic an input field, with the ability to horizontally scroll

When the input is too short for the entire text to be displayed, users have the option to horizontally scroll the text inside the input by dragging with the mouse. Is there a way to implement this functionality in a contenteditable field that appears as ...

javascripthtmlcssinputcontenteditable

`Next.js project experiencing issues with scroll trigger functionality`

I've been working on a gsap animation with a scroll trigger, and while the animation itself functions fine, it's not triggering as expected. The AnimationEffect code involves using gsap and scrolltrigger to create the animation. The Hero section ...

javascriptreactjsnext.js

What is the best method to eliminate whitespace from array values using JavaScript and jQuery?

When I extract a number value from an array and append it to the DOM, there is an unwanted blank space before the value that needs to be removed. The desired result should look like this. data-filter-class="["4"]" for (var i=0, len=str ...

javascriptjqueryarrays

Employing selenium for automated testing on a dynamic web application that dynamically generates its HTML elements using Javascript

I recently set up the stable-diffusion webUI on my system, and I'm looking to create a wrapper program that focuses on experimenting with different prompt generation techniques using various parameters like sampling methods and steps. Initially, I co ...

javascriptpythonhtmlselenium

Converting Promises to Observables

Struggling with the syntax as I delve into learning Angular, I need to transform a promise into an Observable. Let me share what I've encountered: In the function getCountries (subscribed by another utility), there is a call required to fetch a list ...

javascriptangulartypescriptobservableangular-promise

Unleashing the Potential: Integrating a Scanner Device with

Currently, I'm facing the challenge of integrating a Scanner device with my Angular application. On one of the pages dedicated to scanning, users are able to view an alert indicating the connection status of the Scanner as well as any scanned document ...

javascriptangularangularjsangular-material

Troubleshooting jQuery.ajax - Why won't it function properly?

I've been struggling to get the ajax service functioning properly. I tried a simple $.get("http://google.com"), but it didn't work. Additionally, this code snippet failed as well: <html> <head> <script src="https://aja ...

javascriptjqueryajaxcross-browser

Execute JavaScript code prior to sending a Rails form

Before submitting the form, I would like to trigger the html5 geolocation javascript code. Here's how I envision the process: upon form submission, the user is prompted with a geolocation popup. After allowing access, the form data should be processed ...

javascriptjqueryruby-on-rails

In React.js, I encountered an issue where I am unable to read the 'DateTime' property of undefined, despite verifying that there is data present

Recently, I started diving into the world of React. If my question seems too general, I apologize in advance. Any help would be greatly appreciated! Error : Cannot read properties of undefined (reading 'DateTime') My Attempt to Solve : Ini ...

javascriptreactjs

Images cannot be shown until they have been uploaded

My issue involves a menu that loads an external file (form) on the same page, and for the menu, I am utilizing a specific function for menu styling. Custom Menu Function function getXmlHttp() { try { return new ActiveX ...

javascripthtmlimage

What is the most concise, stylish, and effective method in Javascript to move the last element of an array to the front?

I've been tasked with creating a Snake game https://i.sstatic.net/KXwNK.png and the logic for moving the snake is to rearrange elements in a JavaScript array. var links = [elem_0, elem_1, ..., elem_n]; To move the snake, I need to pop out elem_n, ...

javascriptarraysalgorithmoptimizationgame-physics

Tips for looping through multiple states within a single table

I need help with combining data from two different states, campaigns and stats, into a single table. The campaigns state includes sr no, campaign id, campaign name, and campaign status, while the stats state includes reach, sent, delivered, views, clicks ...

javascriptarraysreactjsobject