Stuttering Animation in threejs (Blender imported)

Questions
,
1

Hi there,
I created a pretty complex animation in Blender and importet it to threejs.
I use @react-spring/three to play the animation (i know i could just play the animation exported but it has to be in sync with other animations). The problem i am experiencing is a slight stuttering in the beginning of the animation, that is not visible in blender, like in the vid below:

I prepared a small codesandbox to debug the code here:
https://codesandbox.io/p/sandbox/hmdl8s

Has anybody experienced something similar? Is there a precision problem of some sort?
Any hint could be helpful, thanks!

Greetings Tom

2

The door in your codesandbox moves perfectly smooth.

On a side note: I like the detailed modelling of the hinge :+1:

3

Works smooth. When i used new fflate.module.js for fbx animation then was bug with animation, which absent in old version.

4

Hey, in my sandbox, there is still a stuttering… is it a me problem? :thinking:

it is barely noticable, bu if you change the duration of the animation to 10 seconds it becomes clear.

5

I see it. Maybe need check animation position Y values if its contain it. Maybe some rounding value issue.
Here too shaking: https://gltf-viewer.donmccurdy.com/

6

Yes, chaser that’s what i was thinking. I do not see any stuttering in blender so there has to be an issue when exporting with the values of some sort

7

Have you, by any chance, configured “Units” in Blender, like “Metric” and “Millimeters”? You’ll find those under “Scene Properties”.

Those are not respected during glb export. Blender instead exports its internal representation of numbers, which may be by a factor 1’000 smaller than what you would expect. Which would exacerbate a possible rounding issue.

8

Yes i use Metric there, what would be the solution? Use no unit system?

9

If open glb into blender then cant see shakes.

10

That’s what I’ve finally ended up doing. The Blender “unit” thing becomes only then important, when you are adding assets to an existing scene which has been using a certain unit system already. For a standalone visualization it is perfectly sufficient, that all assets use the same “unit”, which may well be “none”.

The way I tracked my unit issues down was to do a full end-to-end run (modelling in Blender, export to glb, then visualize in three.js) with a very simple geometry, like e.g. a cube. Then check in the debugger the values of your imported mesh:

scene.children.[* groups].mesh.geometry.attributes.position.array

Repeat as needed, varying settings in the “Scene Properties/Units” panel, until the raw values shown in the debugger match those which you entered in Blender.

More info:

https://www.reddit.com/r/blender/comments/l0flt0/having_trouble_with_blenders_unitsscale/

Note that some of the linked discussions pertain to previous releases of Blender.

11

Thanks for the detailed answer, ill look into those resources.
So the problem could be the mesh which i imported into my blender scene? Because when it was created, they used a different unit system right?

12

Let’s assume, you created a cubic box in Blender using a ‘Metric’ unit system and ‘Millimeters’.
If the box’s dimensions are entered (and shown!) in Blender as e.g. 2.0 * 2.0 * 2.0 mm, centered about the coordinate origin, those dimension would Blender-internally be stored
as 0.002 * 0.002 * 0.002.

The latter would be the coordinate values you are going to see in your browsers debugger, when you run your viewer program. Well, actually you’d be looking at ±0.001 values because the box is centered.