What is the method to spin an item in three js while keeping its axis in focus?

Looking to rotate a globe object around its y-axis smoothly? I have come across a helpful function for achieving this:

function rotateAroundObjectAxis(object, axis, radians) {

  var rotationMatrix = new THREE.Matrix4();

  rotationMatrix.makeRotationAxis(axis.normalize(), radians);
  object.matrix.multiply(rotationMatrix);
  console.log("object matrix: " + object.matrix.elements);
  object.rotation.setFromRotationMatrix( object.matrix );
}

However, I've noticed that the rotation halts at a certain point. This could be due to the fact that the value of object.matrix, which is utilized in the matrix multiplication process with my calculated rotation matrix, becomes <= 0. How can I ensure a continuous and seamless rotation?

I appreciate any guidance you can provide. Thank you!

Answer №1

To achieve rotation in your project, consider utilizing the function object.rotateY(rad). You can find more information about this method at this link. For smooth and continuous rotation effect, it is recommended to use a small angle and update the rotation within the render loop of your application.

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

What causes a stack trace to be logged alongside a rejected Promise in Node version 7.2.0?

After executing this code in Node 7.2.0: let prms = Promise.reject(new Error('error')); prms.catch(() => {}); console.log(prms); I anticipated Promise {<rejected> Error: error} to be displayed on the console, however I was instead pre ...

What causes Chrome to automatically remove a script tag?

Hello everyone! Instead of utilizing jQuery, I have been creating a script tag and appending it to the head tag in order to retrieve JSONP data. However, after the JSONP callback function is executed, I have noticed that the script tag that I added to the ...

How to implement variables within the .map() function in JavaScript?

I am working on a map function where I need to pass in a variable as a Key to change the object item key to be based on that variable instead. For example, I want the obj.Salary below to actually represent the salary value when day equals "Day" instead o ...

Using an array as an argument for .map() results in an error

This is quite unusual. Currently, I am passing an array containing a single object to the Render method of a React component: let content = this.state.links.map(link => { // eslint-disable-line return ( <li key={link._id}> <a href ...

What is the best way to mock a Typescript interface or type definition?

In my current project, I am working with Typescript on an AngularJS 1.X application. I make use of various Javascript libraries for different functionalities. While unit testing my code, I am interested in stubbing some dependencies using the Typings (inte ...

What is the process for configuring the global warning level in ESLint?

My current setup involves using WebStorm and the ESLint configuration provided by Airbnb. I'm curious if there is a way to have ESLint errors displayed in a more subtle manner instead of the harsh red color, or perhaps make all ESLint rules warnings ...

Disabling related videos in React Native: A guide to preventing suggested content from appearing at the end of YouTube videos

Is there a way to turn off the display of related videos after a YouTube video ends in react native? I've tried the following code, but it doesn't seem to be working: state = { isPlaying: true, related :false, }; <YouTube apiKe ...

Validation for prototype malfunctioning

I am currently using Prototype.js to implement form validation on my website. One of the fields requires an ajax request to a PHP file for validation purposes. The PHP file will return '1' if the value is valid and '0' if it is not. Des ...

Discovering the final element of ng-content while conducting tests using Protractor

I am searching for the always last element to click on. This is what I see when I inspect the page. https://i.sstatic.net/DMXQ8.png https://i.sstatic.net/ZkbER.png ...

Determine whether an array is void, then proceed to deactivate a button

I am attempting to prevent a button from being clickable if an array is empty, but I am encountering difficulties. <button [disabled]="(users.length ==0 )?true:false">Send mass emails</button> Within the TypeScript file: users: UsersModel[]; ...

JavaScript and Angular are used to activate form validation

Update: If I want to fill out the AngularJS Forms using the following code snippet: document.getElementById("username").value = "ZSAdmin" document.getElementById("password").value = "SuperSecure101" How can I trigger the AngularJS Form validation befo ...

Issue with PassportJs not forwarding users after successful authentication

I'm facing some challenges with implementing Passport for authentication. I have set up my signup strategy in the following way: passport.use('local_signup', new localStrategy({ usernameField: 'username', passwordField:&apo ...

How to Utilize Raw HTML in GWT with the Power of Jquery/Javascript?

Below is the HTML code snippet: <!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("button").click(function( ...

Is it possible to incorporate an additional value into the jQuery widget 'Autocomplete' by using a second variable?

For several years, I have been utilizing the jQuery 'Autocomplete Widget' in my projects. This plugin allows me to pass a value labeled as 'term' to the PHP SQL code that works like this: $( "#cs1" ).autocomplete({ aut ...

Retrieve Next Element with XPath

I recently started working with XPATH and have a few questions about its capabilities and whether it can achieve what I need. The XML Document structure I am dealing with is as follows: <root> <top id="1"> <item id="1"> < ...

The HTML grid is causing an irritating excess space on the right side of my website

After brainstorming an idea, I decided to create this website for testing purposes. However, the grid layout seems to be causing an unwanted margin on the right side of the page that is not associated with any HTML tag, disrupting the zoom functionality. ...

Attempting to run the npm install command led to encountering a SyntaxError with an

Recently, I made some alterations to my npm configuration and ever since then, I have been consistently encountering the same error whenever I try to install various packages. It seems that due to a personal mistake in changing the npm settings, I am now u ...

Tips for generating an input element using JavaScript without the need for it to have the ":valid" attribute for styling with CSS

My simple input in HTML/CSS works perfectly, but when I tried to automate the process by writing a JavaScript function to create multiple inputs, I encountered an issue. The input created with JavaScript is already considered valid (from a CSS ":valid" sta ...

Distinguish between a function and a constructor during execution

As I work with TypeScript, I am creating a function that accepts an error factory as an argument. This factory can be either a class name or a function. The function looks something like this: // Alias from class-transformer package type ClassConstructor& ...

Using NicEdit for uploading to your personal server

I'm having trouble uploading images using the NicEdit WYSIWYG editor on my own server. When I click on the upload image button, it redirects me to another site where I can upload the image: imgur dot com You can find a demo of this here: However, I ...