Having trouble with the pitch of your rotating camera in Three.js?

I'm still getting the hang of three.js so please bear with me if this question seems a bit basic.

My current challenge involves rotating a camera using the arrow keys. While the left and right (yaw) rotation works as expected, I'm encountering issues with the up and down (pitch) rotation when the angle is not at 0. From my research, I found that the problem lies in how three.js handles Euler angles with a specific order (YXZ). Despite my attempts like:

camera.rotation.y = AngleY;
camera.rotation.x = AngleX;
camera.rotation.z = AngleZ;

I also experimented with vectors and camera.target.lookAt, but it seems camera.target has been removed, leaving me unsure of how to proceed.

Your insights would be greatly appreciated. Thank you.

Answer №1

If you define the camera's rotation in terms of "heading", "pitch", and "roll", it will be relevant by setting:

camera.rotation.order = 'YXZ'; // the default is 'XYZ'

To learn more, check out this insightful response on Stack Overflow.

Using three.js version r.83

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

Implementing HTMX with just one HTML page: A step-by-step guide

Just starting out with HTMX and created a sample: <!DOCTYPE html> <html> <head> </head> <body> <script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfema ...

When setting the request header in XMLHttpRequest, the $_POST variable will be null

I encountered an issue while trying to send a request using XMLHttpRequest in JavaScript code with PHP. Whenever I set the request header using `setRequestHeader`, the `$_POST` value returns null. However, if I remove `setRequestHeader`, the `$_POST` data ...

How can I make an AJAX request in Rails 3 to retrieve an HTML page?

I am experimenting with using Rails to display an .html.erb template via an ajax request under specific conditions. By default, I am consistently receiving the .js.erb file when making an ajax request. Without delving into the reasons behind this choice, ...

Creating sequential hover animations with CSS in HTML

I have a total of four divs that I want to hover continuously, one after the other. Here is the code I am currently using: #rij1 .content-overlayz, #rij1 .content-details { animation-duration: 2s; animation-name: stepped-pulse; animation-iterati ...

PHP Pagination Made Easy

Currently, I am developing a website focused on HIV prevention information warehousing. Numerous collaborators will be contributing articles using a tinyMCE GUI. The design team is keen on having control over page lengths. They are interested in implement ...

What is the best way to increase a numerical input?

While experimenting with HTML input elements, I decided to utilize the step attribute. This allowed me to increment the current value by 100 when clicking the up or down arrows in the input field. However, I discovered that the step attribute restricts th ...

Looking to find top-notch keywords that stand out from the rest?

My chosen keyword is s='young girl jumping' function selfreplace(s) { var words = ['man', 'jumping']; var re = new RegExp('\\b(' + words.join('|') + ')\\b', 'g&a ...

What are the steps to execute a filter operation on a table by utilizing two select box values with jQuery?

I have a challenge with two dropdown menus. One contains names and the other subjects, along with a table displaying information in three columns: name, subject, and marks. I would like to implement a filter based on the selections in these two dropdowns. ...

javascript - The onmessage event will not trigger when using a Java server

I have encountered an issue with my Java server and JavaScript websocket client. Despite trying various solutions from this site, I am still unable to resolve the problem. So, I decided to share my code here in hopes of getting some assistance. The proble ...

What is the best way to divide multiple event handlers in jQuery?

Is there a way to organize the code below more effectively by splitting the multiple events into separate lines? $document.find('body').on( 'click dblclick mousedown mousemove mouseout mouseover mouseup mousewheel keydown keypress keyup ...

Optimizing AngularJS ui-router to maintain state in the background

Currently working on an AngularJS project that involves a state loading a view containing a flash object. I am looking for a way to ensure that the flash object remains loaded in the background during state changes, preventing it from having to reload ev ...

Leverage predefined JavaScript functions within an Angular template

I have been attempting to execute an eval function within my angular template in the following manner: <div *ngFor="..."> <div *ngIf="eval('...')"></div> </div> You understand what I'm trying to ...

Implementing $modal.open functionality in AngularJS controller using Ui-Bootstrap 0.10.0

Is there a way to properly call $modal.open from the controller in AngularJS since the removal of the dialog feature in ui-bootstrap 0.1.0? What is the alternative method available in the current version? In previous versions like 0.1.0, it was simply don ...

A guide to crafting a fresh WordPress post with the help of the wpapi library for Node.js

After attempting to use the wpapi module to generate a post in WordPress, I encountered a puzzling issue. Despite receiving a 200 Success response, the request body was empty and no post was actually created. var wp = new WPAPI({ endpoint: 'http:/ ...

Error encountered when downgrading a component from Angular v5 or v4 to AngularJS due to an injector issue

I have successfully created a basic angular5 component called HelloComponent: var HelloComponent = function () { }; HelloComponent.annotations = [ new ng.core.Component({ selector: 'hello-world', template: 'Hello World!' } ...

Implementing automatic line breaks in Bootstrap

When setting the "overflow scroll able" option, I want it to only allow scrolling in the y direction and if x content overflows, a line break should occur. I tried applying 'white-space', but it didn't work as expected. <ul class="s ...

Using jQuery to restrict the number of checked checkboxes based on a selected value - Here's how!

How can I restrict the number of checkboxes that can be checked based on the selected option from a dropdown menu? For example, selecting 'option1' should allow only 1 checkbox to be checked, 'option2' should allow 2 checkboxes, and so ...

What is the process for showcasing a local notification within my application?

Here is the code snippet I am working with: import { LocalNotifications } from '@ionic-native/local-notifications'; @Component({ selector: 'app-home', templateUrl: 'home.page.html', styleUrls: ['home.page.scs ...

Creating interactive HTML buttons using JavaScript to trigger AJAX requests

My current task involves populating an HTML table to showcase users. By making API calls to retrieve user data, I utilize Javascript to add rows to the table. Each row ends with a delete button, intended to trigger a $put request to a separate API endpoint ...

What is the process for obtaining the cypress interception fixture twice but in two distinct formats?

Hi there, I'm new to Cypress and facing a challenge that I hope you can help me with. In my test file, I have the following code: cy.SetupClassificationsStubFixture(1); This code refers to a custom command that I've created: Cypress.Commands.ad ...