Rotating a sphere in Three.js along a specific axis

I am facing a challenge with Three.js. I am trying to rotate a sphere (representing Earth) around an axis tilted by 23.5 degrees. Although I have found the properties sphere.rotation.x, sphere.rotation.y, and sphere.rotation.z, combining them in the correct ratio results in a strange rotation where there is no fixed axis. It seems like I need a function similar to sphere.rotation.vector(1,0,-1). Does anyone know what this function is called and the correct syntax for using it?

Thank you in advance for any assistance!

javascriptvectorrotationthree.jsaxis

Answer №1

Understanding Euler angles or quaternions is not necessary to achieve your goal. You can accomplish what you want by using:

Object3D.rotateOnAxis( axis, angle );
Object3D.rotateOnWorldAxis( axis, angle );

It is important to ensure that axis is a unit vector (with a length of 1), and that angle is measured in radians.

The method 

Object3D.rotateOnAxis( axis, angle )
rotates an object on a specified axis within its own space.

The method 

Object3D.rotateOnWorldAxis( axis, angle )
rotates an object on a specified axis within the world space.

Version r.104 of three.js

Answer №2

To tackle this issue, the key is to utilize quaternions. For a comprehensive understanding of quaternions and their role in 3D graphics, check out this informative video.

Creating a quaternion can be done as follows:

quaternion = new THREE.Quaternion().setFromAxisAngle( axisOfRotation, angleOfRotation );

Subsequently, apply it to your object by:

object.rotation.set( new THREE.Euler().setFromQuaternion( quaternion ) );

Another approach is through utilizing object hierarchies. As an example, you could instantiate an Object3D() object, give it a 23.5-degree tilt, then introduce a sphere (representing Earth) onto the tilted object. This will result in the sphere orbiting around the slanted Y axis. However, quaternions ultimately prove to be the most effective solution for this scenario.

Answer №3

let quat = new THREE.Quaternion();
let item = scene.getObjectByName('xxx');
function animate(){
    quat.setFromAxisAngle(new THREE.Vector3(0, 1, 0).normalize(), 0.005);
    item.position.applyQuaternion(quat);
}

Using three.js version 86, you can view the complete example on codepen.

Answer №4

To change the orientation of your sphere, you can utilize the 'ObjectControls' module in ThreeJS. This module specifically allows you to rotate an individual OBJECT (or a Group) within your scene.

Firstly, make sure to import the necessary library:

Next, initiate the controls:

var controls = new THREE.ObjectControls(camera, renderer.domElement, yourMesh);

For a live demonstration, check out this link:

You can also access the repository here: https://github.com/albertopiras/threeJS-object-controls.

We hope this information proves helpful!

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

Determine if a string begins with a single letter, then has one or more digits, followed by any other characters

How can I adjust the pattern below to return true in cases like these: m1, m1a, M100bc, s45, S396xyz and return false in cases like these: '', m, 1, 1a, mm, Mx, mm1, SS1b The current pattern is: /^m\S\.*/i.test(text) Currently, it ...

javascriptregex

Creating a dynamic TextField that updates on change using React JS

Hey there, I recently embarked on my React learning journey and encountered an issue while trying to dynamically pass data from a response to my TextField. It appears that the TextField is not editable as the onChange function does not seem to be working. ...

javascriptnode.jsreactjsmaterial-ui

Can you clarify the functionality of this loop? I am having trouble grasping how it produces the final result

Seeking clarification on the highlighted section] https://i.sstatic.net/dyrKS.png I need assistance in understanding how the use of "text" helps to print the following literal. ...

javascripthtml

Why does the combination of "minus, space, minus" result in the "plus" operation?

When running the command 'node -e 'console.log(- -1)' it outputs 1, which is expected. However: When executing the command 'node -e 'console.log(1 - - 1)' it displays 2, which puzzles me. It seems like when subtracting a ne ...

javascript

Guide on effectively incorporating CSS and JS files packaged as an NPM module using gulp

How can I efficiently incorporate CSS and JS files from an NPM package, installed via gulp, into my index.html file? I have used NPM to install the Materialize CSS framework by running: npm install --save-dev materialize-css Now, I need to include the CS ...

javascripthtmlcssnpmgulp

How can I insert an HTML link in PHP when encountering a die condition?

I am seeking a way to incorporate this link using JavaScript onclick function without the need for a button, <a href="#bot" onclick="startApp('ur')" img src="urBtn.png" /a> Additionally, I want it to execute during a PHP POST action utili ...

javascriptphphtml

What is the best approach to calculate the number of days between two dates using React JS within a map function?

Looking for a way to calculate the difference between two dates using the ReactJs jsx map loop. Data to work with: { departureDate: '2020-07-28', returnDate: '2020-09-16', } React Component: const DaysDiff = () => { ...

javascriptreactjsdate

What is the module system that fabric composer utilizes for its logic JavaScript files?

I am currently in the process of creating a business-network-definition for Hyperledger using Fabric (based on generator-hyperledger-fabric). Everything has been running smoothly so far, but as we move onto our Proof of Concept (PoC), a few questions have ...

javascriptnode.jshyperledger-fabrichyperledgerhyperledger-composer

Troubleshooting jsPDF problem with multi-page content in React and HTML: Converting HTML to PDF

I need to convert HTML content in my React application into a PDF file. My current approach involves taking an HTML container and executing the following code snippet: await htmlToImage .toPng(node) .then((dataUrl) => { ...

javascripthtmlreactjspdfjspdf

Are there any cross-platform inter-process communication APIs available in both C++ and Javascript?

In the process of developing an app, I am faced with the challenge of passing messages between a C++ application and a Javascript web app. While I have experience writing sockets code in both languages when required, I am now looking for a higher-level me ...

javascriptc++socketsnetwork-programmingwebsocket

Vue does not support the use of plugins

I am working on managing cookies in the browser and utilizing an external plugin called vue-cookies. However, when I try to call its method in a Vue file using this.$cookies.get(...), I encounter an error in the browser: TypeError: Cannot set property &apo ...

javascriptvue.js

Creating intricate HTML divs dynamically using JavaScript

I am currently facing an issue with appending divs to an element in my HTML. The problem arises from an icon embedded in one of the div attributes, and it seems to be causing a syntax error. When I append the div, the formatting is incorrect and the HTML c ...

javascriptjqueryhtml

Having trouble getting the finally clause to work properly in Angular JS version 1.7

In my current project, I am utilizing Angular JS 1.7. Recently, I encountered an issue while using the finally clause within a promise: $http.put( url, null, { headers: { 'Content-Type': 'application/json' } } ).then( ...

javascriptangularjs

Retrieve class property in Angular by its name

How can I retrieve an array from a class like the one below without using a switch statement, dictionary, or other collection to look up the name passed into the method? export class ProcessOptions { Arm = [{ name: 'Expedited Review ("ER") ...

javascriptangulartypescript

Can a Stylus and Node.js with Express project utilize a local image?

Let's talk about using images in a Web app. In my Stylus file, style.styl, I typically set the image using code like this: .background background: url(http://path/to/image) But what if we want to save the image to our local app directory and use ...

javascriptnode.jsexpressstylus

Video texture is running but only displaying a blank screen

I am attempting to incorporate a video texture into my project using three.js. While the video does get added to the scene, the cube remains black. I can hear the audio playing in the browser, indicating that the video is present somewhere. As a beginner w ...

videothree.jstextures

Connecting elements within an object using VueJs

Within my object "info_login," I gather account information: async created() { try { const res = await axios.get(inscriptionURL); this.comptes = res.data; this.comptes.forEach(element => { const data = {'pseudo': ...

javascriptapivue.jsauthenticationback

Tips for storing the values of two dynamically connected select boxes using php and mysqli

I have a new web application project called Store Locator in which I need to filter SQL data from a single table using dependent select boxes and display the store's address in a table. The issue I'm facing is that I can't hold values from t ...

javascriptphpajax

Maximizing the potential of md-order-by attribute to organize date columns within an md-data-table

I'm attempting to implement column sorting in an AngularJS md-data-table for a column containing dates. These dates are formatted as strings DD / MM / YYYY, but I'm struggling to get them sorted correctly. I've tried calling a function that ...

javascriptangularjsdatatableangular-material

Switching hover behavior on dropdown menu for mobile and desktop devices

I have implemented a basic JavaScript function that dynamically changes HTML content based on the width of the browser window. When in mobile view, it removes the attribute data-hover, and when in desktop view, it adds the attribute back. The functionalit ...

javascriptjqueryhtmlcsstwitter-bootstrap