Unexpected behavior observed with X Rotation in ThreeJS

Currently, I am working on a ThreeJS Demo where I have implemented the functionality to use the arrow keys for rotating the camera. Initially, everything seems to be functioning fine as I can rotate the camera up, down, left, and right successfully. However, I encountered an issue when I turn to the left and then attempt to rotate up or down - the rotation does not happen relative to my current position but instead acts as if I had not rotated left at all.

Below is the code snippet of my current rendering logic:

function render() {
    plane.rotation.y += 0.005;
    cube.rotation.z += 0.01;
    cube.rotation.y += 0.01;

    if (window.isLeftDown) {
        camera.rotation.y += 0.01;
    }
    if (window.isRightDown) {
        camera.rotation.y -= 0.01;
    }
    if (window.isUpDown) {
        camera.rotation.x -= 0.01;
    }
    if (window.isDownDown) {
        camera.rotation.x += 0.01;
    }

    requestAnimationFrame(render);
    renderer.render(scene, camera2, renderTarget, true);
    renderer.render(scene, camera);
}

Do you have any suggestions or ideas on how to resolve this issue?

Answer №1

For a detailed explanation of how rotations function in three.js, refer to this specific answer.

The suggestion made in that post is to adjust the Euler order to YXZ.

To implement this change, use the following syntax:
camera.rotation.order = 'YXZ';

In your scenario, it might be more advantageous to utilize the rotateX()/rotateY() methods instead of altering the Euler order. Consider implementing the following approach:

If the left mouse button is held down:

   camera.rotateY( 0.01 ); // or rotateX( +/- 0.01 )

Your choice of solution should be based on the desired behavior.

This code snippet pertains to three.js r.71

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

Trouble with apostrophes rendering in JavaScript on WordPress posts

My current challenge involves adding a post to Wordpress using an external script. This post includes a JavaScript section that contains an iframe for displaying movies. Knowing that Wordpress splits default tags, I have implemented a special plugin to han ...

Navigating Time Constraints and Error Management in the World of Facebook Graph API

I'm currently working on a program that involves numerous fql and graph calls, but I'm facing difficulty in handling 'get' or 'post' errors. Can anyone provide guidance on how to implement retry functionality when these errors ...

Guide to implementing quaternion rotation within a Three.js JSON scene

Currently, I am developing an L-system interpreter and utilizing quaternions as the internal representation for rotations. In order to export the output to a ThreeJs JavaScript scene, I have discovered that utilizing a json scene is the most effective meth ...

What is the process for invoking an Express route using Ajax?

I encountered a problem with calling an Express route in my Node.js application using Ajax when submitting a form. Here is the code for my route: router.post("/user", function(req, res) { console.log("FORM DATA: " + JSON.stringify(req.body)); res ...

Operating Node SerialPort on a CentOS 6 Linux environment

Hi everyone, I'm a beginner in node.js and I've recently developed an application using node, express, socket, and serialport. I have a weighing scale connected to serialport (COM2) which works perfectly on my Windows localhost. However, when I t ...

Creating a dynamic JPanel with jQuery: A step-by-step guide

While attempting to utilize jPanel for a collapsible panel generated dynamically from an XML content, I encountered an issue where the dynamically created panels were not appearing as expected. Refer to the image below: Here is my container: <div id=" ...

Limit the width and height of MUI Popper with a maximum setting

After experimenting with the popper API from MUI, I discovered that it extends beyond my main div. Does anyone have suggestions on how to prevent this overflow? I am looking to increase the height of the popper. Please refer to the code snippet below: con ...

Is it possible to attach a nested function to a parameter of the parent function in JavaScript?

Here's a query that might appear basic and straightforward. It could even be a repeated question, as I struggled to use the correct keywords in my search. The puzzle seems to lie in why this code snippet functions correctly: let rAMessage = 'Ri ...

Using Javascript to retrieve the selected value from a dropdown menu does not return any results

Struggling to retrieve the selected value from a drop-down list using JavaScript? Even when an item is chosen, do you keep getting 'null' as the result? Let's take a look at the HTML page: <select class="mySelect"> <option val ...

What sets apart window.location.href from this.router.url?

I'm curious about the various methods of obtaining the current URL in Angular. For instance: this.router.url My main question is: What advantages does using this.router.url offer over simply using window.location? Could someone kindly provide an exp ...

The page comes to a standstill while trying to read through a hefty JSON

Is there a way to improve the user interface when loading an 8MB json file using JSON.parse in Javascript? The page freezes for about 1-2 minutes, so I'm wondering if it's possible to parse async and display a loading or percentage info. I came ...

Is there a way to convert the NextJS router.query into a numerical value?

const router = useRouter() const { photoId } = router.query Upon comparison, I encountered a Typescript warning: TS2367: This condition will always return 'false' since the types 'number' and 'string | string[]' have no ove ...

Using a JavaScript if statement to check the height of a specific HTML element

I have been struggling to figure out how to insert an if-else statement in JavaScript that references data about an HTML element. My objective is to create an "onclick" function that enlarges an image with a 200ms delay and another function that returns th ...

Difficulty in displaying YQL JSON Results with HTML/JavaScript

When utilizing the subsequent YQL query along with XPATH to retrieve data from certain elements on a webpage: select * from html where url="http://www.desidime.com" and xpath='//h5[@class="product_text"]' I am attempting to showcase the outc ...

Unable to invoke setState (or forceUpdate) on a component that has been unmounted

After updating the component, I encountered an issue with fetching data from the server. It seems that componentWillUnmount is not helpful in my case since I don't need to destroy the component. Does anyone have a solution for this? And when should I ...

What is the best method for designing a custom mask for the jQuery Masked Input Plugin that accommodates alphanumeric characters, spaces, and accented

Looking for a way to make a custom mask in jQuery Masked Input Plugin that allows alphanumeric characters, spaces, and accented characters? This is what I currently have: $.mask.definitions["A"] = "[a-zA-Z0-9 ]"; $("#input").mask("A?AAAAAAA"); However, ...

Filtering Database Tables

UPDATE: Apologies for my lack of familiarity with the guidelines as a newcomer here. Here is my progress so far: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>AJAX filter demo</title> </head> < ...

I am experiencing an issue where the onChange event is not being triggered in my React application

I am currently in the process of creating a random football team picker and handling the database on my own. However, I seem to be encountering issues with the inputs. import React, { use, useRef, useState } from "react"; const fetchAll = async ...

locate missing Gutenberg block on map

/** * Custom Block: display-mobile-advertising * * This block registers a basic block with Gutenberg that renders and saves content without any interactivity. */ // Import CSS. import { TextareaControl } from '@wordpress/components'; import ...

Receiving HTML from NodeJs instead of JSON

I am currently working on a project that involves developing an app and landing pages. While we are using NodeJs with Axios and VueJs for the app part, the landing pages are built using simple jQuery. I need to make API calls for the landing pages, but I a ...