Three.js dynamic bone animation: bringing your project to life

Can transformations be applied to the bones of a 3D model in three.js to create a dynamic animation? I attempted to move and rotate the bones of a SkinnedMesh, but the mesh did not update.

        loader = new THREE.JSONLoader();
        loader.load('/JS-Projects/Virtual-Jonah/Modelos/initialPose.js',function jsonReady( geometry )
        {
            mesh = new THREE.SkinnedMesh( geometry, new THREE.MeshNormalMaterial({skinning : true}) );
            mesh.scale.set( 10, 10, 10 );
            mesh.position.z = mesh.position.y = mesh.position.x = 0;
            mesh.geometry.dynamic = true;
            scene.add( mesh );

            var index = 0;
            for (var i = 0; i < mesh.bones.length; i++)
            {
                if (mesh.bones[i].name == "forearm_R")
                {
                    index = i;
                    break;
                }
            }


            setInterval (function ()
            {
                mesh.bones[index].useQuaternion = false;
                mesh.bones[index].position.z += 10;     
                mesh.bones[index].matrixAutoUpdate = true;
                mesh.bones[index].matrixWorldNeedsUpdate = true;
                mesh.geometry.verticesNeedUpdate = true;
                mesh.geometry.normalsNeedUpdate = true;

                renderer.render(scene, camera);
            }, 33);

            renderer.render(scene, camera);
        });

The model I am working with was generated using makeHuman (nightly build), exported to Collada, imported into Blender, and then exported to the three.js JSON model format. You can find the model at the following link:

Thank you!

Answer №1

Absolutely, it is possible! To achieve this, you will need to manipulate both the mesh.skeleton.bones[i], as well as mesh.skeleton.bones[i].rotation and mesh.skeleton.bones[i].position. The rotation is represented as type Euler, while the position is represented as type Vector3. I have personally verified this functionality using my custom code available on GitHub at https://github.com/lucasdealmeidasm/three-mm3d (which includes a functional skinned mesh with bone-attachable objects).

It's important to note that the previous answer by Inateno is incorrect, as there are numerous scenarios where this capability is essential. For instance, in a first-person shooter game, both dynamic and non-dynamic animations are utilized. For a character running and holding a gun, the gun's pointing direction needs to be dynamically controlled (this can be achieved using mesh.skeleton.bones[i].rotation where "i" corresponds to the index of the bone assigned to the arm). The remaining animations, such as walking, are typically pre-made and loaded in the editor. In three.js, one can utilize "THREE.AnimationHandler.update(delta);" followed by adjusting individual bones' positions and rotations in the code to address these requirements.

Answer №2

There are resources available online that can guide you on exporting bone driven animations from Blender to JSON format for THREE.js. I wish you the best of luck in your endeavors.

Answer №3

If you're looking to create animations within your code, it's best to utilize Unity's animation editor instead of directly manipulating bones in the code. Doing so can be tedious, time-consuming, and inefficient. You can easily animate a model using the animation editor.

Check out this example of an animation with some bones manipulation:

For a tutorial on creating simple animations, you can refer to this guide:

If you encounter any issues with animations, you can also read this related post: Blender exports a three.js animation - bones rotate strangely

I hope this information proves helpful to you! :)

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 is the correct location to define the "env" setting in the eslint.config.js file?

In 2022, ESLint rolled out a new configuration system called the "flat config" here. Check out the documentation for the new "flat config". | Old configuration system documentation here. The "flat config" documentation shows that the `eslint.config.js` ...

Having trouble with enter key input not triggering?

I have scoured various resources for answers to my query, including Stackoverflow. Unfortunately, none of the posts I came across have helped me resolve my issue with getting the enter key to work in my project for FreeCodeCamp on Codepen. When I press the ...

What is the best way to display multiple files in a vertical stack when choosing a file?

<div class="selected-file-container align-items-center justify-content-between d-none"> <div class="selected-file d-flex align-items-center"> <img id="selectedImage" class="hidden" src="&qu ...

Switching between three div elements along with two icons can be done by using toggle functionality

Is there a way to make the icon change back when clicked again without making major changes to the existing code? Looking for suggestions on how to achieve this functionality. function myFunction() { var element = document.getElementById("demo"); el ...

Stop the default drag behavior on an input range element in VueJS

Is there a way to disable the default drag functionality of an input range element without affecting the click feature? Users should be able to change values by clicking instead of dragging. <input type="range" min="0" max=& ...

Enhance the CSS styling for the React-Calendly integration in a React project

I am trying to customize the CSS of an Inline Widget called React Calendly. I have attempted to use React Styled Component Wrapper, Frame React Component, and DOM javascript but unfortunately, the design changes are not reflecting as desired. Specifically, ...

The occurrence of an unhandled promise rejection is triggered by the return statement within the fs

In my code, I have a simple fs.readFile function that reads data from a JSON file, retrieves one of its properties (an array), and then checks if that array contains every single element from an array generated by the user. Here is the snippet of code: co ...

Utilizing ESLint to Conditionally Import External Packages

I'm attempting to bring in a package and utilize it within my Vue application like so: import ExternalSamplePackage from 'external-sample-package' export default { directives: { ExternalSamplePackage } } Since I am in SSR mode, I want ...

The most secure method for retrieving User Id in AngularFire2

I'm currently facing a dilemma in determining the most secure method to obtain an authenticated user's uid using AngularFire2. There seem to be two viable approaches available, but I am uncertain about which one offers the best security measures ...

The animation freezes when trying to create geometry and mesh using Three.js

I'm currently working on developing a text animation that scrolls and dynamically adds more content as it runs. Here is the function I have created for generating the text geometry and mesh: function createText(){ textGeo = new THREE.TextGeometry( ...

The wonders of jQuery popup windows

A code was discovered that displays a popup, but it currently relies on transparency (opacity: 0). I would like to modify it to use display: none instead, as the transparent window in the center of my website is causing issues. Here is the JavaScript code ...

What is the significance of a listener signaling an asynchronous response with a return of true, only to have the communication channel close before the response could be received?

Currently, I am developing a React application that involves the use of various npm modules. One of these modules is a self-built NPM package called modale-react-rm (available at this link). This package serves as a simple modal component that utilizes the ...

AngularJS restructured the homepage to function as a shell page instead of the traditional index page

As a newcomer to angularJS, I am learning that it is typically designed for Single Page Applications. Most example logins I come across define the index.html as the main page, with the ng-view portion contained within. However, in my situation, the Login ...

There seems to be an issue with d3js bar charts as they are not displaying on the screen and there

Recently, I started delving into the world of D3js and decided to try my hand at creating some bar charts. However, despite my efforts, the bar charts failed to display on the screen. <!DOCTYPE HTML> <html> <head> <title> My D3 Pra ...

I'm facing an issue with SSRProvider in my NextJs application

My application is developed using NextJs and Typescript, utilizing the react-bootstrap library for creating components. I am facing an issue where I keep receiving an error message stating that When server rendering, you must wrap your application in an &l ...

Create a vibrant PNG image background that changes dynamically based on the dominant color of the

Is it possible to dynamically set the background color of a PNG image, either white or black, based on the dominant color in the image? For example, this image should have a dark background: https://i.stack.imgur.com/cerjn.png And this one should have a ...

Utilize the converse.js plugin to set up a secure room with password protection

I'm looking to set up a password-protected room. Currently, I can create a public room and add a password in the configuration settings. However, I have to start by creating an unsecured, public room first. Is there a way to create a room with a pas ...

Tips on specifying a default value when receiving data from an API

I am working with a dropdown list that is populated from an API call. Here is my code snippet: <label>User Code:</label> <select ng-options="c as c.User for c in userList" ng-model="selectedUser" id="search3"> </select> To fet ...

Transferring data from ng-init to <script> in AngularJS

Take a look at this code snippet: <div ng-init="companyData"> <script type="text/javascript"> window.timeline = new TL.Timeline('timeline-embed', sampleJson); </script> </div> Is there a method to include company ...

Access the contents of MUI Modal (Dialog) even when it's closed

I'm currently working on an app using Material-ui and firebase authentication. My goal is to integrate firebaseui's authentication within a MUI Dialog component. The issue I've encountered is that in order for the authentication component t ...