GLTF Adding animations to my model doesn't work?

CesiumJS
1

I'm a developer in China. My English is not very good. I'm so sorry~
I have a.Dae model And convert to gltf by tool, Information follows:

[geometry] 829226 bytes
[animations] 72 bytes
[scene] total bytes:829300
[completed conversion]
Runtime: 0.23 seconds

I will convert the format after the gltf file loaded to the cesium code as follows:

  var scene = viewer.scene;
  var modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(
                Cesium.Cartesian3.fromDegrees(100, 40, 10));
   var model = scene.primitives.add(Cesium.Model.fromGltf({
                url : 'Apps/SampleData/models/Mymodels/siyiwurenji-donghua89.gltf',
                modelMatrix : modelMatrix,
                scale : 100000.0
            }));

   Cesium.when(model.readyPromise).then(function(model) {
                model.activeAnimations.addAll({
                    loop : Cesium.ModelAnimationLoop.REPEAT
                });
     });

But there is no animation after loading,What is the reason?

2

在 2017年9月12日星期二 UTC+8下午11:58:18，4214...@qq.com写道：

I'm a developer in China. My English is not very good. I'm so sorry~
I have a.Dae model And convert to gltf by tool, Information follows:

[geometry] 829226 bytes
[animations] 72 bytes
[scene] total bytes:829300
[completed conversion]
Runtime: 0.23 seconds

I will convert the format after the gltf file loaded to the cesium code as follows:

  var scene = viewer.scene;
  var modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(
                Cesium.Cartesian3.fromDegrees(100, 40, 10));
   var model = scene.primitives.add(Cesium.Model.fromGltf({
                url : 'Apps/SampleData/models/Mymodels/siyiwurenji-donghua89.gltf',
                modelMatrix : modelMatrix,
                scale : 100000.0
            }));

   Cesium.when(model.readyPromise).then(function(model) {
                model.activeAnimations.addAll({
                    loop : Cesium.ModelAnimationLoop.REPEAT
                });
     });

But there is no animation after loading,What is the reason?

My cesium version is 1.36
My browser is Google Chrome, and the version is 50.0+

3

The code looks fine me… if you send over your model I could help figure out why the animations aren’t playing.

4

在 2017年9月12日星期二 UTC+8下午11:58:18，4214…@qq.com写道：

I’m a developer in China. My English is not very good. I’m so sorry~
I have a.Dae model And convert to gltf by tool, Information follows:

[geometry] 829226 bytes
[animations] 72 bytes
[scene] total bytes:829300
[completed conversion]
Runtime: 0.23 seconds

I will convert the format after the gltf file loaded to the cesium code as follows:

var scene = viewer.scene;
var modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(
Cesium.Cartesian3.fromDegrees(100, 40, 10));
var model = scene.primitives.add(Cesium.Model.fromGltf({
url : ‘Apps/SampleData/models/Mymodels/siyiwurenji-donghua89.gltf’,
modelMatrix : modelMatrix,
scale : 100000.0
}));

Cesium.when(model.readyPromise).then(function(model) {
model.activeAnimations.addAll({
loop : Cesium.ModelAnimationLoop.REPEAT
});
});

But there is no animation after loading,What is the reason?

My cesium version is 1.36
My browser is Google Chrome, and the version is 50.0+

siyiwurenji-donghua89.gltf (1.23 MB)

5

The problem is that each animation has two keyframes and the values are both (0, 0, 0, 1). So the animation is working, just not doing anything.

I can see how this would have happened. The keyframes are probably 0 degrees and 360 degrees but during export and conversion to gltf the angle representation is converted to quaternions, where those values are both (0, 0, 0, 1). You may need to insert a keyframe between the two that represents 180 degrees.

6

Thank you very much, Sean Lilley,I changed the keyframe to 180,The animation will work! Very nice