The animations in three.js have come to a standstill

Currently, I am working on a real-time game using three.js and websockets. The project has been running smoothly until recently when I encountered a hurdle. While implementing animations, I noticed that the animations for the opposing client on the web page are stuck on a single frame. This seems odd considering both clients are supposed to use the same set of animations. Below is a snippet of my code focusing on loading and updating the animations:

Loading Function:

function AddPlayer(pid){
//pid represents player id
    players.push({
        three: new THREE.Object3D()
    });
    //All elements load correctly
    loader.load("Models/ybot.glb", function(gltf){
        var examp = gltf.scene;
        anim[ids.indexOf(pid)] = {idle: null, walk: null, leftPunch: null, rightPunch: null};
        players[ids.indexOf(pid)].three = examp;
        scene.add(players[ids.indexOf(pid)].three);
        mixers[ids.indexOf(pid)] = new THREE.AnimationMixer(players[ids.indexOf(pid)].three.children[0]);
        loader.load("Models/Animations/Idle.glb", function(glanim){
            var idle = glanim.animations[0];
            anim[ids.indexOf(pid)].idle = mixers[ids.indexOf(pid)].clipAction(idle);
            anim[ids.indexOf(pid)].idle.play();
        });
        loader.load("Models/Animations/Walking.glb", function(glanim){
            var walk = glanim.animations[0];
            anim[ids.indexOf(pid)].walk = mixers[ids.indexOf(pid)].clipAction(walk);
            anim[ids.indexOf(pid)].walk.play();
        });
        loader.load("Models/Animations/RightPunch.glb", function(glanim){
            var punch = glanim.animations[0];
            anim[ids.indexOf(pid)].rightPunch = mixers[ids.indexOf(pid)].clipAction(punch);
            anim[ids.indexOf(pid)].rightPunch.play();
        });
        loader.load("Models/Animations/LeftPunch.glb", function(glanim){
            var punch = glanim.animations[0];
            anim[ids.indexOf(pid)].leftPunch = mixers[ids.indexOf(pid)].clipAction(punch);
            anim[ids.indexOf(pid)].leftPunch.play();
        });
    });
}

Update function:

function UpdateAnim(){
    for (var i = 0; i < players.length; i++) {
        if (currAnim[i] == "idle"){
            anim[i].idle.weight += 0.1;
            anim[i].walk.weight -= 0.1;
            if (anim[i].idle.weight >= 1){
                anim[i].idle.weight = 1;
                anim[i].walk.weight = 0;
            }
        }else if (currAnim[i] == "walk"){
            anim[i].idle.weight -= 0.1;
            anim[i].walk.weight += 0.1;
            if (anim[i].walk.weight >= 1){
                anim[i].idle.weight = 0;
                anim[i].walk.weight = 1;
            }
        }
        mixers[i].update(clock.getDelta());
    }
}

Please forgive me if some variable names make it difficult to follow.

javascriptanimationthree.js

Answer №1

I discovered the issue I was facing. Running clock.getDelta(); in my update function and repeatedly calling it for all animatable objects was causing a problem. To solve this, I saved the result of clock.getDelta(); into its own variable.

function UpdateAnim(){
    var delta = clock.getDelta();
    for (var i = 0; i < players.length; i++) {
        if (currAnim[i] == "idle"){
            anim[i].idle.weight += 0.1;
            anim[i].walk.weight -= 0.1;
            if (anim[i].idle.weight >= 1){
                anim[i].idle.weight = 1;
                anim[i].walk.weight = 0;
            }
        }else if (currAnim[i] == "walk"){
            anim[i].idle.weight -= 0.1;
            anim[i].walk.weight += 0.1;
            if (anim[i].walk.weight >= 1){
                anim[i].idle.weight = 0;
                anim[i].walk.weight = 1;
            }
        }
        mixers[i].update(delta);
    }
}

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

Developing an ASP application using the MVP pattern to return JSON data can be transformed into a S

I’m looking to incorporate the following code into a sails js Controller public JsonResult GetEvents() { //Using MyDatabaseEntities as our entity datacontext (refer to Step 4) using (MyDatabaseEntities dc = new MyDatabaseEntities()) { ...

javascriptnode.jssails.js

Utilizing the default event object in ag-Grid's event methods with JavaScript

I am a newcomer to ag-grid and I need help with calling event.preventDefault() in the "cellEditingStopped" grid event. Unfortunately, I am struggling to pass the default JavaScript event object into it. Is there a way to make this work? Additionally, I al ...

javascriptangularag-grid

Phonegap experiencing issues with executing JavaScript code

My attempt to utilize phonegap is encountering an issue where my javascript is not running. Here's what I've tried so far: <html> <head> <meta charset="utf-8" /> <meta name="format-detection" content="telephone=no" / ...

javascriptioscordovaios7

The issue you're encountering in React Native Expo is a restriction where Hooks can only be invoked within the body of a function

I'm currently working on a mobile app with React Native expo, but I've encountered an issue: Invalid hook call. Hooks can only be called inside the body of a function component.... I have checked other solutions on Stack Overflow and verified th ...

javascriptreactjsreact-nativeexpo

Create a mechanism in the API to ensure that only positive values greater than or equal to 0 are accepted

My goal is to process the API result and filter out any values less than 0. I've attempted to implement this feature, but so far without success: private handleChart(data: Object): void { const series = []; for (const [key, value] of Object.e ...

javascriptangulartypescripthighcharts

Adding a class to a Vue component using the $refs property

I am facing an issue where I need to add dynamic class names to various Vue components based on their reference names listed in a configuration file. Manually adding classes to each component is not feasible due to the large number of components. To addre ...

javascripthtmlcssvue.js

Flipping and rotating images using the power of HTML5 Canvas

Hello, I need assistance with my Electron app that arranges images for batch printing on an industrial printer. The issue I am facing is with images flipping or being mirrored unpredictably. Below is the code snippet responsible for determining whether an ...

javascriptnode.jshtmlhtml5-canvaselectron

Passing a Ruby session variable to a JavaScript tag: a step-by-step guide

I'm currently collaborating with a vendor who utilizes a JavaScript tag for sale attribution, and I need to pass session variables to the tag. The tag appears to be firing properly, as I can see the variables in the logs, but they aren't reflecte ...

javascriptrubytagshaml

Non-functioning function within object

this is a unique object var Manager = (function () { var self = this; self.fetch = function (request, response) { response.send({ message: 'Data fetched successfully' }); } return self; })() module.ex ...

javascriptnode.js

Is it more efficient to use Vue events or Vuex for transmitting data between components?

Working on a project where data needs to be shared between components in order to update a canvas element at 30-60fps for optimal performance on low-end devices. Currently utilizing Vuex store/get method for data transfer, but considering using events as ...

javascriptperformancevue.jsvuex

Implement functionality in JS to track the number of clicks on an element

I am dealing with a ul-list containing an unpredictable number of li-elements, ranging from 2 to 8. My goal is to capture votes using these li-elements and display the vote count on the specific element that was clicked. I have attempted to catch the click ...

javascriptjquery

Submitting a file using Ajax XMLHttpRequest

Currently, I am facing an issue while attempting to send a file using the following XMLHttpRequest code. var url= "http://localhost:80/...."; $(document).ready(function(){ document.getElementById('upload').addEventListener('cha ...

javascriptajaxjqueryfile-uploadxmlhttprequest

The AJAX request successfully retrieves data, but the page where it is displayed remains empty

I have come across similar questions to mine, but I have not been successful in implementing their solutions. The issue I am facing involves an AJAX call that is functioning correctly in terms of receiving a response. However, instead of processing the re ...

javascriptphpjqueryajax

Utilizing a Function Across Controllers in AngularJS: A Guide

When developing my angularjs application, I decided to create two separate modules - 'home' and 'templates'. I am now faced with the challenge of utilizing functions from one module in the other. Here's how I approached it: Modu ...

javascriptangularjs

Receive alerts in Swift from WKWebView when a particular screen is displayed in HTML

Check out this sample HTML file I have. I'm currently using the WKWebView to display this HTML. My goal is to receive a notification in our Swift code when the user finishes the game and the "high score" screen appears, so we can dismiss the view and ...

javascripthtmliosswiftwkwebview

Using dynamic tag names within React JSX can greatly enhance the flexibility and

I'm working on creating a React component for HTML heading tags (h1, h2, h3, etc.), where the heading level is determined by a prop. Here is how I attempted to approach it: <h{this.props.level}>Hello</h{this.props.level}> My expected out ...

javascriptnode.jsreactjsjsx

Is there a way to include a button at the top of the Notiflix.Loading() overlay for closing or stopping it?

I've integrated the "notiflix" library into my project, and I'm currently using notiflix.loading.pulse() for a lengthy process. While this works perfectly fine, I would like to add a button (for closing/stopping the process) on top of the loading ...

javascripthtmlcssnpm

By clicking anywhere, AngularJS will remove the specified class

Imagine having a search box that is displayed after the user clicks on a button. Great so far, right? But what if you want to add another feature - making the search box disappear when the user clicks anywhere else. How can this be achieved with AngularJS? ...

javascriptjqueryangularjs

Trigger next animation after the completion of current animation using Jquery animate callback

Is there a simpler way to achieve this task? var index = 0; while (index < 5) { $(this).find(".ui-stars-star-on-large:eq(" + index + ")").animate({ width: w + 'px' }, 200, "swing"); index++; } ...

javascriptjquery

Error: Unexpected TypeError occurred stating that 'map' cannot be read from undefined, although the map method is not being used in the code

I have recently developed an Ethereum application for conducting transactions using React and the ethers module. Below, you can see a snippet of my code, specifically focusing on the function sendTransactions: import {ethers} from 'ethers'; impor ...

javascriptreactjsethereumethers.js