Recreating the rotation of an object within a rotated parent using Three.js

After constructing my 3D globe and placing it within a parent bounding box / pivot, the code looked like this:

var globe = new THREE.Group();
if (earthmesh) {globe.add(earthmesh);};
if (linesmesh) {globe.add(linesmesh);};
if (cloudmesh) {globe.add(cloudmesh);};
if (atmosmesh) {globe.add(atmosmesh);};
pivot = new THREE.Group();
if (globe) {pivot.add(globe);};
if (pivot) {scene.add(pivot);};

As a result, when applying a 23 degree rotation around the Z axis on the parent:

pivot.rotation.set(THREE.Math.degToRad(0), THREE.Math.degToRad(0), THREE.Math.degToRad(23));

The globe would rotate around the Y axis relative to its parent in the animation function. This function utilizes an object 'v' with properties for looping, rotation speed, as well as X, Y, and Z rotations:

function animate()
{
  delta = clock.getDelta();
  resize();
  v.spin = (v.loop + v.spin + v.rate * delta) % v.loop;
  globe.rotation.set(THREE.Math.degToRad(v.roll), THREE.Math.degToRad(v.spin), THREE.Math.degToRad(v.tilt));
  renderer.render(scene, camera);
  requestAnimationFrame(animate);
}

This method of rotation provides the desired effect shown by the green arrow in the illustration.

To achieve similar object rotation within its parent without explicitly setting the parent-child relationship, I seek alternative tools available in Three.js such as matrices, vectors, or quaternions. How can this be accomplished?

In addition, transitioning between the "normal" and "altered" rotation systems should be straightforward without needing to reconstruct the parent-child setup. Full rotation control on all axes is also essential.

If reverting to the original rotation system becomes necessary, what specific rotation would need to be applied to the globe child to maintain its visual orientation?

Note: Assumptions are made regarding the position and rotation of both parent and child groups for simplicity and clarity of the question.

P.S. Suggestions for improving the clarity and conciseness of the question are welcome, but please refrain from prematurely marking it as duplicate or closing it before thoroughly considering the context.

Answer №1

Your inquiry appears to be quite detailed, with a focus on "rotation order." In most cases, rotations are carried out in the sequence of x, y, and z axes.

To align the earth's tilt (z) as the primary rotation and daily spin (y) as the final one, you can utilize the code:

globe.rotation.order = "ZXY"

For further information regarding rotation order, refer to the official documentation here

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

Tips for transforming a nested object into an array using JavaScript

I have a complex array containing multiple objects, each with two or more sub-objects. I am looking to consolidate all sub-objects into a single array of data using JavaScript. How can I achieve this? var array1 = [ { "dfgasg24":{ name:"a", ...

Adjust the position of an image to move it closer to the top using CSS

I have a fiddle where I am trying to adjust the position of an image (keyboard) to match a specific design. https://i.sstatic.net/flqCH.png In my fiddle, the keyboard image is slightly lower than the desired position shown in the design. I am looking for ...

Leveraging Vue slots to display a component inside another component

I am currently working on creating a base modal component that can be re-used, utilizing slots to insert the modal content. The issue I am facing is that when the modal is triggered by clicking a button, it displays without any content present. How can I e ...

Troubleshoot the Error: EEXIST - Directory already exists at 'C:UsersPhantom' while setting up a React application[RESOLVE]

I'm trying to set up react and start my first project, but I encountered an issue during the installation process. How can I resolve this? Error: EEXIST: file already exists, mkdir 'C:\Users\Phantom' TypeError: Cannot read propert ...

Experience the power of dynamic site regeneration with GatsbyJS

Currently, I am working on a website built in GatsbyJS that deals with large datasets of dynamic content fetched using React fetch upon page load. The challenge here is to display semi-live data that updates every 5 minutes. I am curious about how I can m ...

loop through an array and use splice to select items and modify the array

My current issue involves working with a pixabay array. Although I successfully retrieved the data from my array, it contains 20 random pictures when I only need 3 to be displayed on my website. I attempted to use a slice array for this purpose, but unfor ...

Deactivating Cluetip tool tips and adjusting the height limit in JQuery

How can I momentarily turn off the hints? I have seen references to being able to do so on the website and in this forum, but I am having trouble locating the command to disable them. I just need to temporarily deactivate them and then enable them again. ...

Tips for securely utilizing a javascript API without exposing your API key

Newbie alert! I am currently working on an app that utilizes Here's Geocoding REST API through node.js with express. (I made sure to keep my api key hidden on the server side to prevent exposure to clients.) However, I have come to realize that in or ...

Apply CodeMirror theme and plugins using an HTML attribute

On my website, I have implemented a CodeMirror text area from . <form><textarea id="code" name="code" codemirror-type='lineNumbers: false, styleActiveLine: true, matchBrackets: true;'>CODE HERE</textarea></form> I added ...

Adding array elements to a JavaScript object

I find myself in a rather unique predicament that I'm struggling to navigate. I have come across some data structured as follows. Please bear with me if I use any incorrect terminology, as I am relatively new to this. usersByName: { "tester&q ...

SyntaxError: Encountered an unexpected token that is not jsonp, could it be trying to parse json instead?

As a newcomer to AJAX and Javascript, I am attempting to integrate them with an API following this structure: http://localhost:8088/JobPositionForDd: { "data": [{ "_id": "529dc2dfd0bf07a41b000048", "name": "Junior Android" }, { ...

Troubleshooting code: JavaScript not functioning properly with CSS

I am attempting to create a vertical header using JavaScript, CSS, and HTML. However, I am facing an issue with the header height not dynamically adjusting. I believe there might be an error in how I am calling JSS. Code : <style> table, tr, td, t ...

Object with a specific name sitting within an array nested within another object

I have a node.js model that includes an array called keys containing multiple objects. I am looking to display these named objects in the view. Below is the model: var mongoose = require('mongoose'); var website = require('./website' ...

Perform queries securely using AJAX when the document is fully loaded

Hello everyone, I'm facing an issue with the custom statistics feature on my website. I collect user data (similar to Google Analytics) and store it in tables for a few months. However, these tables have become too large and are causing slow page loa ...

What is the best way to combine relative paths or create distinct identifiers for SVG files located within multiple layers of folders

I have a collection of icons exported from "Figma" organized in folders, and I'm using grunt-svgstore to create a sprite sheet. However, the result contains duplicated IDs even after trying 'allowDuplicateItems: false' and 'setUniqueIds ...

Issue with sizing and panning when using a combination of Three.js and CSS3Renderer

This issue is specific to Chrome. Here's what I have experimented with: I am utilizing the webGL renderer to position a plane geometry in a 3D environment using threejs. This particular code is running within a class, with the scene as one of its me ...

Create a search preview in JavaScript that emphasizes key information and provides a condensed overview

I am currently working on incorporating a feature that generates a highlighted and condensed preview of a provided text. Below is the code snippet I have so far: <div> Search: <input value='vestibulum' disabled/> </div> < ...

What is the best way to revert my useState back to its original state once the filtered list has been displayed?

I am struggling to reset my projectList to its initial state so that the filterProjects function can search through the entire projectList instead of the already filtered ones. I have a resetProjects function, but I'm unsure where to call it in order ...

What is the most effective way to reset the v-model in the child component using the parent component?

Could you please assist me? I have been trying for 10 hours straight and it doesn't seem to work. What I am aiming for is that when I click on @click="cleanDataForm" in the Parent Component, the v-model text in the Child component will be emptied. I h ...

Is it possible to create floating unordered lists using Bootstrap in HTML?

Is there a way to float text left or maintain list order in the HTML code of my page while using a dense CSS from this bootstrap template? For example, I would like my list to remain organized regardless of how many items are added: https://i.sstatic.net ...