Time of AnimationActions set to NaN, animation not playing.

Description of the problem

I followed the examples of the animations very closely but my animations wont play. when looking into the data, the time of my animationAction is NaN. Since I’m doing the same thing as on the example, and I’m using the same version of threejs; I’m unsure where the issue might be.

I’ve pushed my project to this repo:


So you can clone it and test it if you want.

Three.js version
  • [ ] Dev
  • [x] r93
  • [ ] …
Browser
  • [x] All of them
  • [ ] Chrome
  • [ ] Firefox
  • [ ] Internet Explorer
OS
  • [x] All of them
  • [ ] Windows
  • [ ] macOS
  • [ ] Linux
  • [ ] Android
  • [ ] iOS

Chrome
Version 67.0.3396.87 (Official Build) (64-bit)

Mac Os High Sierra
Version 10.13.4 (17E202)

I don’t see this NaN value in my console. One obvious error happens at another place:

You are overwriting the materials of the loaded FBX file with a custom one which is not prepared for skinning. I suggest you remove these lines for now and use the material provided by the loader. Besides, try to work with the latest FBXLoader from the repo. You are using a npm package which is not based on the latest FBXLoader.

Thanks for your input,
I’ll try that. I didn’t know the materials had an impact on this.

I’m using the module because all my other imports are also modules, so I can’t rely on THREE being in the global namespace, and three doesn’t expose an FbxLoader as a module.

It’s very easy to convert the loader to a module, you just need to put

import * as THREE from 'three';

Then change the THREE.FBXLoader = ... to

export default function FBXLoader ( ...

Plus a few other minor changes. Unfortunately this does need to be done manually for now though.

2 Likes

Thanks, I’m guessing I have to get it from /examples/js/loaders/FbxLoader.js?
I tried a couple things but since this module is written as a closure, I’m not sure if I’ll be able to do it this way without poluting the global space with THREE. Is this what you are suggesting, or is there a better way to do this?
Thanks again :slight_smile:

1 Like

Thanks, I’m guessing I have to get it from /examples/js/loaders/FbxLoader.js?

Yup, always use that one. At least until we figure out a way of creating a module version.

this module is written as a closure, I’m not sure if I’ll be able to do it this way without poluting the global space with THREE

You need to remove the closure as well. However, variables defined in modules are not in the global namespace, so you will not pollute it unless you do something like window.THREE = THREE.

Do you mean copying the file to my own codebase? I was trying to avoid that and do it via es6 imports or require.
if the closure would be written as (function .. )(THREE), you could do something like const loader = require('FbxLoader')(THREE) and use the existing codebase (and stay up to date)

Here’s one I converted earlier:

https://github.com/looeee/blackthreaddesign.com/blob/master/assets/js/src/modules/loaders/FBXLoader.module.js

It’s a pretty old version of the loader but the changes you’ll need to make are the same on the latest version. It’s works as an ES6 module. I’ve never used the require syntax so don’t know if it will work that way.

Do you mean copying the file to my own codebase?

Yes, there is currently no easy way around that, that I know of - unless you are using Webpack, then you could try some of the scripts people have shared on this thread: