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

1 Like
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.

1 Like
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.