Spinning Earth around in circles

I am attempting to create a rotation of the Earth around its tilted axis using Three.js. I came across this helpful solution and tried implementing it in my code, but unfortunately, it doesn't seem to be working as expected.

After running the code, I noticed that the planet remains stationary and doesn't exhibit any signs of rotation. Since I lack a solid understanding of quaternions and how they operate, I'm struggling to pinpoint where things might have gone wrong.

function rotateAroundAxis(object, axis, radians) {
    var vector = axis.normalize();
    var quaternion = new THREE.Quaternion().setFromAxisAngle(vector, radians);
    object.rotation = new THREE.Euler().setFromQuaternion( quaternion );
}

earthAxis = new THREE.Vector3(Math.cos(23.4*Math.PI/180), Math.sin(23.4*Math.PI/180), 0);

function render() {
    stats.update();
    step += 0.02;
    rotateAroundAxis(earth, earthAxis, step);
}

Answer №1

To start, adjust the geometry of your sphere by a 23.4-degree tilt using a transformation.

let radians = 23.4 * Math.PI / 180; // converting tilt to radians
mesh.geometry.applyMatrix( new THREE.Matrix4().makeRotationZ( -radians ) );

Next, for rotating your earth on its axis within object space, begin by normalizing the axis of rotation.

earthAxis = new THREE.Vector3( Math.sin( radians ), Math.cos( radians ), 0 ).normalize();

In your render function, include the following code:

earth.rotateOnAxis( earthAxis, 0.01 ); // axis must be normalized

Version three.js r.69

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

"interacting with a sphere using Aframe's mouseup event

After encountering a partially successful answer to this inquiry on AFRAME position far away from camera I am attempting to utilize a sphere positioned around 100 units from the camera. This is the sphere I have added: <Entity id='mous ...

Adding external functionality to update the totalItems in angular-ui-grid

For my AngularJS ui-grid, I implemented external pagination following the guidelines provided at this link: In the process, I update the totalItems field whenever a new page is received: var getPage = function() { // skipped some part $http.get(url) .suc ...

Issues encountered when integrating a shader

I've created a shader and I'm trying to test it on Codepen. Despite having no errors in the console, the shader still isn't working as expected. Can anyone help me figure out what's going wrong? Below is my vertex shader: <script i ...

Exploring the capabilities of a VueJS-compatible product tour library

I am currently working on implementing a feature intro tutorial for my web application, similar to what can be done with intro.js. However, I am encountering an issue where nothing seems to happen when using intro.js - no error messages or tour messages ar ...

Allow for the ability to choose a specific option for every individual line that is echoed in

I have researched several similar questions, but none of them address exactly what I am attempting to achieve. My goal is to use AJAX to fetch a PHP page that will display the contents of a folder on my server. Currently, the files are being listed line by ...

Guide on retrieving HTML content from a URL and showing it in a div

I'm trying to retrieve the content of a URL and display it within a DIV element, but I'm struggling to achieve the desired result. Below is the code I'm using: index.js fetch('https://github.com/') .then(res => res.text()) ...

The Java Selenium script encountered an illegal type error when trying to execute JavaScript through JavaScriptExecutor: driverFactory.CustomWebElement

I have a CustomWebDriver class that extends the functionality of JavascriptExecutor. Here is my implementation: @Override public Object executeScript(String script, Object... args) { return ((JavascriptExecutor) driver).executeScript(script, args); } ...

Generating a safe POST connection with express.js

Is there a simple method to generate a link for submitting a POST request using Express.js or a plugin? This approach can also be employed to enhance security for important actions like user deletion, including CSRF protection. In some PHP frameworks lik ...

Strategies for managing large arrays in JavaScript

I'm currently working on finding the most effective approach for handling large datasets in JavaScript. Specifically, I am dealing with files containing data spanning four hours read at a 100ms interval. When all the data is loaded into a one-dimensi ...

Adjust the path of an element as it decreases in size

Sorry for the weird title, but that's likely why I can't find the solution on my own. I'm experimenting with CSS animations and I want the form element to decrease in height from 100px -> 0, but I want it to collapse from the top to the ...

Guide on accessing js file in an Angular application

I have a component where I need to create a function that can search for a specific string value in the provided JavaScript file. How can I achieve this? The file path is '../../../assets/beacons.js' (relative to my component) and it's named ...

Utilizing Typeahead in a Rails application: Implement the feature to add JSON requests to a single designated request rather than applying it to all requests through prefetching

The type ahead feature is functioning correctly in its intended location. However, there is an issue where the JSON request for the data is being made on every request rather than just one specific request. This is the controller I am using: #controllers ...

During the Internet Explorer browser, the command will run two times

<div style="width:expression(alert('1'));"></div> When this code is executed in IE7, it will trigger the alert function twice. Why does this happen? ...

unable to access the object3D within the current scene

Currently facing an issue where I am unable to retrieve Object3D from the scene, despite the mesh objects being displayed within the scene. Strangely, the scene.children array does not reflect this. Take a look at the screenshot here Here is the code sni ...

Displaying interactive charts in a pop-up window using Highcharts within a Bootstrap

I am looking to display a highchart inside a popover. Check out my code in this jsfiddle http://jsfiddle.net/hfiddle/abpvnys5/47/. Here is the HTML: <ul class="stat_list" style="float: left;"> <a data-toggle="popover" data-trigger="hover ...

"Rearranging the Firefox ghost image by dragging and dropping it

My drag and drop game is working perfectly on all browsers except for Firefox. In Firefox, the ghost image that appears when an item is dragged seems to be positioned very far away from the cursor. Although the ghost image can still be seen on the page, it ...

jQuery floating sidebar that dynamically adjusts position based on content overflow

I've come across an interesting scenario with a fiddle that I'm working on: http://jsfiddle.net/yFjtt/1/ The main concept is to allow users to scroll past the header and have the sidebar 'stick' in place as they continue scrolling down ...

What is the proper way to invoke a different method from a static method in ReactJS?

Recently, I updated some outdated events and implemented the 'getDerivedStateFromProps' static method. I'm wondering if it's possible to invoke an instance method from within this static method. ...

The unexpected ) token in Node.js is causing an error when evaluating a function

Storing and retrieving a function from the database using node.js is causing some unexpected behavior. When I attempt to log the column containing the function, this is the output: (function(settings){var options = {host: 'somehost.com',path: & ...

Dynamically Loading CSS files in a JQuery plugin using a Conditional Test

I'm trying to figure out the optimal way to dynamically load certain files based on specific conditions. Currently, I am loading three CSS files and two javascript files like this: <link href="core.min.css" rel="stylesheet" type="text/css"> & ...