Periodically rotate the Three.js globe to a specific location

Is there a way to rotate my globe to a specific location every x seconds without running the whole process at once? I've tried putting render() into a for loop with a setTimeout, but it doesn't work as expected. It seems to be related to the recursive nature of render(). Has anyone encountered this issue before and figured out how to solve it?

Any insights or solutions would be greatly appreciated! Thank you in advance.

var lat=41.9028;
var long=12.4964;
var requestId = 0;
var targetx=lat * ( Math.PI / 180 );
var targety=(270 - long ) * ( Math.PI / 180 );

//I want to repeat this periodically every x seconds
render(targetx,targety);

function render(tx,ty) {
    controls.update();
    sphere.rotation.x += (targetx - sphere.rotation.x) * 0.1;
    sphere.rotation.y += (targety - sphere.rotation.y) * 0.1;
    clouds.rotation.x += (targetx - clouds.rotation.x) * 0.1;
    clouds.rotation.y += (targety - clouds.rotation.y) * 0.1;
    var verticalOffset = 0.1;
    renderer.render(scene, camera); 
    camera.lookAt( scene.position );
    requestAnimationFrame(function(tx,ty){render(tx,ty)});
}

Answer №1

Your implementation of requestAnimationFrame in the code snippet above is incorrect. To achieve a 60FPS animation, you should not wrap the render() function inside another function to avoid potential infinite recursion problems. Simply use the following line for automatic 60-frame per second rendering:

requestAnimationFrame(render);

Furthermore, there is no need to pass the tx, ty arguments to the render() function as they are not utilized.

If your intention is to update every one second only, consider using window.setInterval():

// Repeat this periodically every 1 second
// Second argument denotes the delay in milliseconds
window.setInterval(render, 1000); 

function render() {
    controls.update();
    sphere.rotation.x += (targetx - sphere.rotation.x) * 0.1;
    sphere.rotation.y += (targety - sphere.rotation.y) * 0.1;
    clouds.rotation.x += (targetx - clouds.rotation.x) * 0.1;
    clouds.rotation.y += (targety - clouds.rotation.y) * 0.1;
    var verticalOffset = 0.1;
    renderer.render(scene, camera); 
    camera.lookAt( scene.position );
    // Omit requestAnimationFrame since it's unnecessary for 60FPS
    // requestAnimationFrame(render);
}

// Update target rotations with each call
changeTarget() {
    targetx = Math.random() * Math.PI;
    targety = Math.random() * Math.PI;
}

Refer to this page for details on how window.setInterval functions.

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

The abort() function in Chrome can trigger an Undefined Error

When dealing with race conditions, I implement the following code to throttle get requests: if (currentAjaxRequest !== null) { currentAjaxRequest.abort(); } var query_string = getQuery(); currentAjaxRequest = ...

Using ASP.NET to bind Page.Header.DataBind() can lead to conflicts with angular service method calls

I'm encountering a strange issue with my ASP.NET master page and code behind. Whenever Page.Header.DataBind() is called, all the public methods on my angular service are executed as well. Below is a snippet of my angular service: myModule.service("m ...

Utilizing jQuery to load form(s), submit data via POST method, and fetch results without refreshing the

After conducting thorough research, I have been unsuccessful in implementing any of the solutions I have come across. It seems like I am close to a solution, but there may be something crucial that I am missing... A question similar to mine was asked on t ...

Ways to remove the address bar from a mobile browser like Chrome or an Android browser

Is there a way to make videojs go full screen on Android devices when the URL is entered, without displaying the address bar? ...

Interactive table featuring a delete row function

Upon adding a new row to my table with user input and delete button functionality, I encountered an issue where the button only works after the second click. In my Add() function, I use a counter variable i to assign IDs to rows, incrementing it by 1 for e ...

The type string[] cannot be assigned to type 'IntrinsicAttributes & string[]'

I'm attempting to pass the prop of todos just like in this codesandbox, but encountering an error: Type '{ todos: string[]; }' is not assignable to type 'IntrinsicAttributes & string[]'. Property 'todos' does not ex ...

I can't get any sound to play on my JavaScript program

I've been experiencing an issue with playing audio. I've set up a function to play a random sound when clicking on an image, but nothing is happening. Here is the code I am using. var sound1 = new Audio("InDeed.wav"); var sound2 = new Audio("I ...

Using AngularJS: The ultimate guide to invoking a service within a module

I have a controller that successfully calls a service. However, I now need to access a method within that service from another module. How can I achieve this? BaSiderbarService: (function() { 'use strict'; angular.module('BlurAdmi ...

Development of Chrome Extensions, JavaScript dilemma

Hey there, I'm new to JavaScript and I've been diving into the world of creating Chrome extensions. I'm trying to set up a content script and browser action, but I'm struggling to get it up and running. I know I'm probably making a ...

What could be causing the lack of response from XMLHttpRequest?

I am attempting to retrieve results from a PHP file that is connected to a database. However, the variable being sent to the database is not being sent from the XMLHttpRequest. Below is the HTML code: <input type="text" id="name"/> Here is the cor ...

Updating Time by Adding Minutes using ngFor Loop in Angular 4

I'm currently developing a scheduler that requires user input for start time and the time between two games. I am looking to display the time in a loop using ngFor, incrementing by minutes each time. How can I accomplish this within an Angular 4 HTML ...

Fire css animations only upon the addition of a specific class

By clicking on button 2, you will witness the animation effect in action. But, if another function alters the button, like checking a checkbox to show or hide it, the animation triggers again as if the button were clicked once more. How can I prevent the ...

How can I determine if an npm package requires publishing before actually performing the publish process?

I am working on consolidating multiple projects into a single code base, with each project being publishable. In order to optimize our continuous integration process, I aim for my build agent to execute a single command that publishes all the relevant pro ...

Angular 6+ Unveiled: The Magic of Transparent Wrapper Components

One standout feature of Vue.js is the ability to dynamically assign new attributes to a specific element within the template, which is referred to as Transparent Wrapper Components https://i.sstatic.net/XrUjI.png In this example, I am able to pass all ex ...

Exclude a specific link from a JQuery function

Check out this unique single page site that utilizes a waypoint script for navigation and highlighting nav items - The functionality works seamlessly, however, we are facing an issue where we need to modify a link to redirect to an external website. Unfor ...

Watching the $scope variable using $watch will result in triggering even when ng-if directive is used, displaying

Encountering an unusual behavior in AngularJS that may appear to be a bug, but there could be a logical explanation. A certain value is being passed to a directive as an attribute. Within this directive, the parameter is being watched using $scope.$watch. ...

How can I incorporate a hotspot into specific areas of the object extension model that I've integrated using three.js?

I have successfully added a click event to the model loaded using Three.js, but I am facing issues with adding click events to specific parts of the uploaded model. For instance, while I can create a click event for the entire car model I imported, my goal ...

What is the best way to optimize performance by transferring data efficiently from a database?

Seeking assistance with javascript. I have a database table that indicates which web elements to display based on a numeric key property. There are 4 boolean values associated with each key. Currently, I make an ajax postback to the server, but I am looki ...

Saving user input as a variable and sending it to the server using ajax and javascript

Seeking a way to save 'gender' and 'age' input as variables and then submit them to the server using ajax. In my attempt, when checking the console output, the gender variable was successfully saved while the age variable did not work a ...

How can we ensure that multiple forms are validated when submitting one form in AngularJS?

Is there a way to validate two forms on the same page (address1 and address2) using AngularJS when the button on one of the forms is clicked? ` ...