Three.js experiencing issues with FBX animations running erratically

Having trouble with animations on some fbx models. When an animation lasts 20 seconds, the model remains stationary for 19 seconds and then suddenly moves within the last second or so. However, other fbx models animate correctly. The code used to run the animation is as follows: The loader.load callback is:

var clock = new THREE.Clock();
var mixers = [];

function(object){
    object.position.set(0,0,0);
    object.mixer = new THREE.AnimationMixer(object);
    mixers.push(object.mixer);
    console.log(object);
    for (var a = 0; a < object.animations.length; a++){
        var action = object.mixer.clipAction(object.animations[a]);
        action.play();
        console.log(action);
    }

    scene.add(object);
    animate();
}

And here's the animate code:

function animate() {
    requestAnimationFrame(animate);
    for(var i = 0; i < mixers.length; i++){
        mixers[i].update(clock.getDelta());
    }
    render();
    stats.update();
}

function render() {
    if (mixer) {
        mixer.update(clock.getDelta());
    }
    renderer.render(scene, camera);
}

Any suggestions or ideas would be greatly appreciated! Thanks!

Answer №1

In my personal experience, I have encountered issues with the fbx ASCII export process in Autodesk Maya. This process does not always provide accurate start and end times within Maya or may output numbers that are not properly imported by threejs.

  1. the correct start and end times set in Maya or
  2. gives a set of numbers that threejs doesn't import properly.

This can result in sections of animation where nothing occurs, often trailing towards the end but potentially also at the beginning. While manual fixing of the fbx file is an option, it may be simpler to incorporate a function that sets the beginning time to align with your first frame (or adjust accordingly if the issue lies with the first frame).

I have a solution for this problem stored somewhere; once located, I will update this answer with the necessary code.

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

Transforming Javascript into Typescript with node modules in Visual Studio 2015

After developing a JavaScript web app using npm and webpack, I successfully converted all the .js files to .ts using the PowerShell command found here. Now, I am looking to transition to a VS2015 TypeScript project but struggling to find guidance on how ...

The usage of event.returnValue has been phased out. It is recommended to utilize the standard event.preventDefault()

Here's the code snippet I'm working with: <script> $(document).ready(function () { $("#changeResumeStatus").click(function () { $.get("{% url 'main:changeResumeStatus' %}", function (data) { if (data[&apos ...

Parent's hover element

I am currently working with the following loop: <?php if( have_rows('modules') ): $counter = 0; while ( have_rows('modules') ) : the_row(); ?> <div class="col span_4_of_12 <?php if($counter == 0) { ?>firs ...

I am looking to dynamically alter the CSS background URL using JavaScript

Currently, I am looking to update the background image url using JavaScript. Most tutorials I've come across involve having the image downloaded on the desktop and then providing its path. However, in my scenario, the user will input an image link whi ...

How can I make my modal box appear after someone clicks on selecting a college?

Can someone help me figure out how to display my modal box after clicking into the selecting list? I've already coded it, but I'm struggling with getting it to show up after the click event. Any assistance is appreciated! In the image provided, ...

Does the positive Z axis move inward in threejs? The behavior of camera.near and camera.far seems strange

My goal is to display only a slice of my 3D object. I have tried setting the orthographic camera's camera.near to 2.0 and camera.far to 1.5, then iterating with values of camera.near = 1.5 and camera.far = 1.0. However, this approach is not yielding t ...

Ways to navigate to a different page while displaying an alert message?

Desperately seeking assistance with redirecting to another page and then triggering an alert("HELLO") once the new page is loaded. I have attempted the following approach: $.load(path, function() { alert.log("HELLO"); }); But using window.location o ...

Column alignment issue detected

Can you help me with aligning the data in my column status properly? Whenever I update the data, it doesn't align correctly as shown in the first image. https://i.stack.imgur.com/300Qt.png https://i.stack.imgur.com/4Dcyw.png $('#btn_edit' ...

update the dropdown values in the database by submitting the form

Members sign up for the website. The administrator will log in and access a list of users. I am attempting to provide an option for the admin to select a checkbox and update the user's status through a dropdown menu submission. When I tested the code ...

Juggling PHP scripts within javascript

Can you help me with a question I have? I am working on multiple JS scripts, such as this one: <script> $('#mapveto1').click(function() { $('#mapveto1').addClass('banned'); $('#map1').text('cobble ...

The method defined in user.model.js cannot be utilized in mongoose and node

When developing an app with node and mongoose, I encountered a peculiar issue while testing. Below is my auth.index.js file for user login. auth.index.js: var express = require('express'); var mongoose = require('mongoose'); var passp ...

React component stuck in endless loop due to Intersection Observer

My goal is to track the visibility of 3 elements and update state each time one of them becomes visible. Despite trying various methods like other libraries, useMemo, useCallback, refs, etc., I still face challenges with my latest code: Endless loop scenar ...

What is the best way to ensure webpacker compiled javascript only runs once the page has finished loading in a rails application

What is the best location to place window.onload for it to execute on every page within a Rails 6 application? ...

Tips for filling in the values for the options in a select dropdown menu

Currently, I am facing a strange bug related to the select element. Whenever I open the dropdown, there is always a mysterious black option at the top. This is how my HTML looks like: This particular element is part of my test controller. <select ng- ...

Personalized HTML selection list

When a select option is too long, it stretches the container to accommodate its length. I have created a truncate function to limit the display to 20 characters and add ellipses to prevent this stretching. I have been searching for a way to show the entir ...

Why do developers opt for getServerSideProps() over a standard asynchronous function in their code?

Recently, I decided to experiment with the getServerSideProps() function. While I understand it must have its purpose, to me it seems similar in utility to a typical async function. Take for example my current task of retrieving user data using Prisma and ...

Issues with artifacts appearing on the edges of PNG textures in THREE.js version 76

I've noticed some artifacts appearing on the top and bottom sides of certain sprites. If it helps, here are the shaders I'm using and I'm currently on v76. This is how I'm creating these sprites: var object = new THREE.Object3D(); var ...

Having trouble with window.setInterval in AngularJS?

My coding snippet involves the use of the setInterval method: function MyController($scope) { $scope.clock = new Date(); var updateClock = function() { $scope.clock = new Date(); }; setInterval(updateClock, 1000); }; The HTML asso ...

jQuery not refreshing properly

I'm currently in the process of creating a script to switch the language on a website using PHP and Ajax/jQuery. I would like the page content to refresh without having to reload the entire page. So far, this is what I have come up with: $( "a[data-r ...

Creating custom mesh and material for GPU Instantiation in three.js

Currently exploring how to implement GPU instantiation, inspired by the instances/gpu three.js example. Unfortunately, I'm encountering some issues with loading in my own implementation: (if you'd like to see a non-gpu instantiation version, yo ...