Rotating an animated object in ThreeJs: A simple guide

Question

Rotating an animated object in ThreeJs: A simple guide

I have modeled a spaceship in Blender, added some random wobbling and rotation animations to it, and then exported the 3D model to ThreeJs.

When the user presses the LEFT ARROW key, I want the spaceship to rotate to the left on the X-Y plane, and similarly for the RIGHT ARROW key.

However, the animation is causing the rotation coordinates to reset, as shown in the images below:

This is the console output displaying the rotation of my spaceship mesh: https://i.sstatic.net/yoQKc.png

But immediately after the rotation: https://i.sstatic.net/g1vjI.png

What I desire: is for the mesh to rotate and then wobble AROUND the new axis of rotation, rather than its original axis. In simple terms, I want the animation to be based on relative rotation, not absolute rotation. Is this achievable?

javascript animation three.js 3d rotation

Answer 1

Answer №1

If you are using the GLTFLoader in three.js to add a model, you will notice a clear object hierarchy. After loading your object with the code snippet below...

GLTFLoader().load('something.glb', (gltf) => {
  //... code goes here
})

You can simply run...

console.log(gltf)

This will show you the object hierarchy, helping you locate where your animations are stored. If they are under gltf.scene.animations, you will need to place your model inside a group. By animating the group separately, you can control the model's animations using the group, which is a new variable — essentially a new Object3D.

Alternatively, you can directly animate the gltf.scene object to achieve the desired animation effects.

Answer 2

If you are using the GLTFLoader in three.js to add a model, you will notice a clear object hierarchy. After loading your object with the code snippet below...

GLTFLoader().load('something.glb', (gltf) => {
  //... code goes here
})

You can simply run...

console.log(gltf)

This will show you the object hierarchy, helping you locate where your animations are stored. If they are under gltf.scene.animations, you will need to place your model inside a group. By animating the group separately, you can control the model's animations using the group, which is a new variable — essentially a new Object3D.

Alternatively, you can directly animate the gltf.scene object to achieve the desired animation effects.

Rotating an animated object in ThreeJs: A simple guide

Answer №1

Similar questions

If you scroll quickly, watch out for the flickering of the fadeIn and fadeOut

Are there other options besides Chrome Frame for enhancing Raphael performance on Internet Explorer?

Are there any alternatives to Google Charts for creating charts?

Accessing external data in Angular outside of a subscription method for an observable

JavaScript can be used to append multiple array values within double brackets in Spring MVC

Just a simple canvas animation

Angular 4: Triggering a function by clicking a link with specific parameters

Is there a way to create an HTML select element where each option has a unique background color, and will display properly

The Chrome Extension Javascript popup appears to be empty

The object is given a value in the form of a string, even though it is a strongly-typed variable

Is it possible to dynamically call a component in Vue.js using a variable name

Issue encountered where Moment locale functionality is working in local development environment, but not functioning properly in the

Issue with Retrieving the Correct Element ID in a Loop with JavaScript Function

Display a clock showing the Central Standard Time (CST) on an HTML webpage using

Attempting to showcase the information in my customized SharePoint Online list through a Web Part Page utilizing AngularJS

Match rooms using Socket.io

Angular's Conditional ng-if Error

Forge: Securely encrypting massive files

Issue with PHP causing Jquery alert to trigger twice rather than once

Utilizing PHP to create an interactive website