Converting Three.js camera rotation.y to a full 360 degrees rotation

Currently, I am attempting to rotate a 2D object in my Three.js scene to correspond with the camera's rotation.y value. However, I have encountered an issue with the radians returned by this value. The rotation seems strange, ranging from 0 to -1.4 radians for the first 45 degrees, then flipping back to 0 through -1.4 radians for the next 45 degrees, and so on until reaching 360 degrees.

Is there a method available to convert or translate these values into a standard 360-degree coordinate system?

My setup includes the use of PerspectiveCamera and OrbitControls.

Any assistance would be greatly appreciated!

Answer №1

It seems like the issue could be related to converting quaternion rotations. I'm not entirely certain if the code snippet below is accurate, but it may assist you in resolving the problem.

const euler = new THREE.Euler();
const rotation = euler.setFromQuaternion(camera.quaternion);
const radians = rotation.z > 0
    ? rotation.z
    : (2 * Math.PI) + rotation.z;
const degrees = THREE.Math.radToDeg(radians);

After running this code, the variable degrees should hold a value ranging from 0 to 360. However, as the camera rotates, the angle values appear to fluctuate inconsistently.

You can observe this behavior in action by visiting this CodePen:

http://codepen.io/kevanstannard/pen/NdOvoO/

I referenced information from the following question while working on this:

three.js perspectivecamera current angle in degrees

Edit #1

Upon reviewing @WestLangley's response, it appears that my initial solution was incorrect. To clarify and implement West's suggestion, here's some revised code:

// Set Y to represent the camera's heading
camera.rotation.order = 'YXZ';

Followed by:

const heading = camera.rotation.y;
const radians = heading > 0 ? heading : (2 * Math.PI) + heading;
const degrees = THREE.Math.radToDeg(radians);

For a more polished demonstration, check out this updated CodePen:

http://codepen.io/kevanstannard/pen/YNJgXd

Answer №2

If you decide to switch the camera rotation order from the default "XYZ" to "YXZ", you will find that the Euler angles become much more intuitive:

camera.rotation.order = "YXZ"

With this change, you can expect the following results:

rotation.y now represents the camera's heading in radians

rotation.x corresponds to the camera's pitch in radians

rotation.z indicates the camera's roll in radians

Remember, these rotations are applied in the specified order.

If you want additional insights, check out this informative answer on Stack Overflow.

Using three.js version r.84

Answer №3

camera.rotation represents an Euler angle, which is explained further in the documentation for THREE.Object3D on three.js website. It's important to note that you can't directly determine an angle to a specific axis from the euler angle without considering its order.

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

Ways to resolve the error message "Type 'Promise<{}>' is missing certain properties from type 'Observable<any>'" in Angular

Check out this code snippet: const reportModules = [ { url: '', params: { to: format(TODAY, DATE_FORMAT).toString(), from: format(TODAY, DATE_FORMAT).toString() } }, { url: 'application1', params: { to: for ...

Reactjs is failing to display the page

I am facing an issue where the components are not rendering in the browser even though there is no error being displayed. This makes it difficult to troubleshoot and resolve the problem. Can someone help me identify the root cause? import React, { Com ...

Utilizing Google Analytics within an Angular Single Page Application

After implementing Google Analytics (GA) in my Angular single page application and placing the tracking code at the bottom of the main index.html, I encountered an issue regarding incorrect pageview results. <script> (function(i,s,o,g,r,a,m){i["Go ...

The `mouseenter` event handler fails to trigger properly on its initial invocation

As I work on a function to remove a CSS class display:hidden; when the mouse enters a specific part of the DOM to reveal a menu, I encounter an issue. Upon loading the page and hovering over the designated area for the first time, the event fails to trigge ...

How can we determine the nL and nH values using an ESC/POS command?

Looking to adjust the printer's head position using ESC / pos commands: ESC $ command sets the absolute horizontal position ESC $ nL nH Trying to figure out how to calculate the values for nL and nH? ...

Can the distortion of perspective on a 3D object be prevented in a scene using Three.js?

Recently, I encountered an issue in my 3D scene where the objects appear stretched when dragged. You can see the problem in the image below: https://i.sstatic.net/4Qtkl.jpg Although this stretching is normal behavior, my client has an unusual request - t ...

Tips for showcasing JSON data within an array of objects

I'm trying to work with a JSON file that has the following data: {"name": "Mohamed"} In my JavaScript file, I want to read the value from an array structured like this: [{value: "name"}] Any suggestions on how I can acc ...

Streaming video between web browsers using WebRTC and CORS

The demo of WebRTC (https://webrtc.github.io/samples/src/content/capture/video-video) showcases the ability to stream one video's contents to another using video.captureStream(). However, I'm encountering issues when attempting this across differ ...

unable to connect css file to document

My index.html file is not reading the style.css file for some reason, even though it is linked. I have added the type and checked the path, but still facing issues. Can anyone help troubleshoot this problem? Thank you. https://i.sstatic.net/xxpBV.png htt ...

What is the best way to divide a string within an object using JavaScript?

Currently, I have two objects in my possession obj1-> [ 'logo', 'FinTech startup', 'design' ] obj2-> [ 'logo', 'tech startup', 'design' ] Is there a quick method to transform them into ob ...

The JavaScript code does not call an external function to retrieve data from the database

I'm currently facing an issue with retrieving the same version data from my MySQL (MariaDB) Server. In order to streamline the process and improve maintenance, I decided to create a single connection Object to manage all database queries. However, I&a ...

Implementing JavaScript to assign a symbol to several <span> elements with identical ids

I have a looping span element on my page that is generated based on the number of records in a database table. The appearance of the span can vary, displaying either one or multiple instances. Each span has the following structure: <span class="add-on" ...

Go back to the previous operation

Utilizing ajax to verify if a username is available by checking the MySQL database. If the username is already taken, it will return false to the form submit function. index.php $("#register-form").submit(function(){ var un = $("#un").val(); $.aj ...

What is the process for sending values to a component?

I am working with a component called MyComponent: export class MyComponent { @Input() active:boolean; constructor() { console.log(this.active); } } In this component, I have declared an Input, and I pass it in as follows: <mycomp ...

Access the checkboxes that were previously selected and store them for future use when the page is

I am working on an HTML code where checkboxes are automatically checked and upon clicking a button, the values of checkboxes are passed through a function. Additionally, when a user checks a checkbox, the corresponding children checkboxes are also checked. ...

Effortless sliding panel that appears on hover and vanishes when mouse is moved away

I am in the process of creating a menu for my website that utilizes linkbuttons which trigger additional linkbuttons to slide down upon hover. The desired effect is a smooth sliding panel that appears when hovering over the linkbutton, and disappears when ...

Apply the "ng-class" directive only if there is an <a> element located after the specified element

My issue involves a list of items categorized by labels, with a search filter applied. The problem arises when the labels appear in the search results even though the lists themselves are empty. I need to hide the relevant label if there are no items prese ...

Efficiently running multiple PHP pages with just one simple click

Below is the code fragment that I currently have: <html> <script type="text/javascript"> function Run() {var a=["ONE" ,"TWO" ,"THREE", "FOUR", "FIVE"]; window.location.href = "index.php?w1=" +a;} </script> <body> <input type="b ...

Protractor encounters a TypeError when attempting to navigate with Firefox version 59 due to a cyclic object value

Our team has implemented several Protractor tests for our Angular JS application. Recently, we considered upgrading the Firefox browser to version 59 while using Selenium 3.11.0. However, after the upgrade, whenever we try to use element(by. in our tests ...

What is the best way to show a nested div element within a v-for loop in Vue.js?

One interesting feature of my coding project is that I have an array nested within another array, and I iterate through them using two v-for loops. The challenge arises when I try to display a specific div in the second loop only upon clicking a button. ...