Rotate an object upwards in three.js in order to achieve dynamic movement and enhance

I'm struggling with 3D calculations and could really use some assistance.

In my scene, I have a sphere representing the earth and I'm using OrbitControl to "rotate" it (although in reality, OrbitControl rotates the camera).

I need a function, something like rotateUp(rad), that can rotate the earth upwards regardless of the camera's position.

The issue I'm facing is that my current rotateUp function looks like this:

earth.rotation.x -= rad

While this works when the camera is in its initial position, if the camera rotates 180 degrees, the rotateUp function actually rotates the earth downward.

Does anyone know how to implement this function properly? Thank you!

javascriptthree.jsrotation

Answer №1

After some experimentation, I managed to come up with a solution:

function rotateUp (rad) {
  const v = new THREE.Vector3()
  v.setFromMatrixColumn(camera.matrix, 0 )
  v.multiplyScalar(-rad)
  earth.rotation.x += v.x
}

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

How can one create a function that delays the execution of code until AJAX data is received

I developed a CKEditor plugin that fetches data via ajax to create RichCombo functionality. The plugin functions correctly, however, when there are multiple instances of the editor on a single page, each plugin ends up sending its own ajax request, leading ...

javascriptckeditor4.x

Switch out the image in the dropdown and update the button once it is selected

In this scenario, I am looking to dynamically change the image in a button dropdown when it is clicked. The goal is for the dropdown image to swap and replace with the actual one upon clicking. For reference, here's the fiddle: https://jsfiddle.net/32 ...

javascriptjquerycss

Is it possible to retrieve the current CSS value set by a media query using JavaScript?

Currently working on a website project that involves accessing and manipulating the display property of a menu. The goal is to toggle the menu open or closed based on its current state. In my setup, the initial state of the menu is defined as closed using ...

javascriptcssmedia-queries

NodeJS making seven successful Ajax requests

I'm delving into the world of JavaScript, NodeJS, and electron with a goal to create a presenter-app for remote control over powerpoint presentations. My setup involves an electron server structured like this: const electron = require('electron ...

javascriptnode.jsajaxelectron

JavaScript not displaying properly in Django application deployed on Heroku

Recently deployed a Django application on Heroku, and encountered an issue where the Javascript file hosted on Amazon S3 is not rendering on any page except for the home page. However, upon checking the Console in Inspect Element, it appears that everythin ...

javascriptpythondjangoherokuamazon-s3

Updating Kendo by modifying the Angular model

While working on a project with Angular, I recently discovered the Kendo-Angular project available at . I successfully integrated Angular-Kendo into my project and it seems to be functioning well, except for updating models in the way I am accustomed to. ...

javascriptangularjskendo-uiangular-kendo

Stopping the sound when its' Div is hovered over

I've managed to successfully trigger the audio to play on hover, but I'm having trouble getting it to pause when my mouse leaves the area. Check out the code in action here: https://jsfiddle.net/jzhang172/nLm9bxnw/1/ $(document).ready(functio ...

javascriptjqueryhtmlcss

Obtain the beginning and ending positions of a substring within a larger string

As a beginner in the world of AngularJS and web development, I am faced with a challenge. I have a specific string that is currently selected on a tab, like so: var getSelectedText = function() { var text = ""; if (typeof window.getSelection !== "un ...

javascriptjquerycssangularjshtml

Find the sum of every combination of numbers in the array

I've reviewed my code countless times and I'm stumped by the issue. My code is designed to calculate all possible sums of numbers within an array. It works perfectly when there are only 3 numbers in the array, but once I add a fourth number, it i ...

javascriptarraysfor-loopwhile-loop

Can we split the PHP Photo Gallery into a second page after displaying 12 images?

I recently developed a simple PHP photo gallery for my website that pulls data from a MySQL database. By using a while loop, I am able to display three images (from ID 1 to 3) in a single row, continuing this pattern until a total of 12 images are shown. ...

phpjavascript

The task "gulp js src - duplication and implementation of base" involves duplicating

My gulp task is set up to copy JavaScript files. The initial setup below did not work: gulp.src('./**/*.js', {base: '../src/main/'}) .pipe(gulp.dest('../target/dist')); After making some adjustments, the following code ...

javascriptnode.jsnpmgulp

`Is it possible to remove an empty frame using javascript?`

I have this script that generates a "layer" resembling a frame and I need to remove it. Here is the code for creating the layer: function disableLayer() { var layer = document.getElementsByTagName('div')[0]; d = document.createElement(& ...

javascriptjqueryhtml

Express.js is still displaying the 'Not Found' message even after deleting the initial code

Despite multiple attempts to resolve what I initially thought was a caching issue by completely removing all code from my server, I am still facing the same problem: The default error handling provided by Express Generator in the app.js file contains the ...

javascriptnode.jsexpress

How to execute a function *after* another function has finished running in Javascript upon page load?

I am currently using scrollsaver.js to maintain scroll positions of elements after postback. However, I have encountered difficulties in resetting the scroll position when needed. Specifically, when paging through a list, I want the scroll position to res ...

javascriptjquery

What is the best way to trigger the code within my useEffect React hook to execute again upon refreshing the page?

I'm encountering an issue where the value of states is becoming 'undefined' after refreshing the page. Within my useEffect hook, I am generating a random number to select a question object from an array. Everything works smoothly on the ini ...

javascriptreactjsreact-hooks

Mocha Chai: Dive into an array of elements, discovering only fragments of the desired object

Currently, I am utilizing the assert syntax of chai. I have a dilemma regarding checking an array of objects for a specific object. For example: assert.deepInclude( [ { name: 'foo', id: 1 }, { name: 'bar', id: 2 } ], { n ...

javascriptnode.jsmocha.jschai

Activating the Play button to start streaming a link

Recently delved into the world of Ionic 4 and Angular, so definitely a beginner :) Purchased a UI Template from code canyon but didn't realize I needed to code the music player part. Been trying to get a music stream playing but no luck. Came across ...

javascripthtmlangularionic4

Handling a substantial array containing over 12,000 rows in JavaScript

The criteria for this project are unique, but I am seeking some perspective... I possess a CSV file filled with 12,000 rows of data distributed across 12-15 columns. My objective is to convert this into a JSON array and load it using JSONP (must be execut ...

javascriptjsonindexeddbweb-sql

Ways to conceal an animated gif once it has been downloaded?

Is it possible to have an animated gif image vanish once server-side Java code runs and the client receives an HTTP Response from the webserver without relying on Ajax? I am currently utilizing the following Struts2 submit button: <s:submit value="sho ...

javascriptjavajqueryajaxstruts2

Ways to eliminate the worldwide model in SAPUI5

I've been attempting to break down the global model without success. I have a filter button that's set up like this: navToSecond : function (oEvent){ var oObject = this.getView().byId("inp").getValue(); sap.ui.getCore().setModel( ...

javascriptjqueryodatasapui5