Question 285035 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – BabylonJS Dynamically generated Animation not playing

I’m developing a custom AnimationSequencer Class that, once provided with a group of keyframes, is able to dynamically generate an Animation instance for each keyframe group, append these animations to an an AnimationGroup and finally play the animation group on a call to the “playAll()” method. Here is the playground: https://playground.babylonjs.com/#7QN6ZM#54 On running the application, if you navigate the the developer tools, console window you will note the following error trace; its seems there is an issue with passing the Babylon scene to a JS class and then attempting to play animation from within the context of a JS class.
Console Error StackTrace

Curiously, as noted in the playground, everything works as expected when I attempt the process directly, (i.e non-dynamically and without use of the custom AnimationSequencer class) from a first class function.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I've found the source of the error. It was an oversight on my part; where an animation has been declared to update the position attribute then the data type must be also specified as a Vector3:

     let meshPositionAnim = new BABYLON.Animation(
    meshAnimSequence.objectId+"MeshPositionAnimation",
    "position",
    this.defaultFPS,
    BABYLON.Animation.ANIMATIONTYPE_VECTOR3,   //Must be ANIMATIONTYPE_VECTOR3
    BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT,
    true
    );

    I had been erroneously using BABYLON.Animation.ANIMATIONTYPE_FLOAT before now as I had been animating each axis independently prior, using position.x,position.y and position.z respectively (which are float values), rather than just position.


  2. 0

    It seems that the error might be related to the ObjAnimationSequence class and the way you’re setting the positionKeys and rotationKeys for the boxAnimationSequence.

    In your boxAnimationSequence, you’re setting the rotationKeys as below;

    const boxRotKeys=[
   { frame: 0,  value: new BABYLON.Vector3(0,0,0) },
   { frame: 120, value: new BABYLON.Vector3(0, 0, 0) }, 
   { frame: 180, value: new BABYLON.Vector3(0, Math.PI*2, 0) },
   { frame: 240, value: new BABYLON.Vector3(0, 0, 0) },
   { frame: 300, value: new BABYLON.Vector3(0, 0, 0) },
];
boxAnimationSequence.rotationKeys = boxRotKeys;

    The value for each keyframe is a BABYLON.Vector3 object, but when you’re setting the positionKeys for the boxAnimationSequence, you’re directly assigning box.position, which is a BABYLON.Vector3 , to the value field of each keyframe;

    const boxPosKeys=[
   { frame: 0, value: box.position },
   { frame: 120, value: new BABYLON.Vector3(20, 0, 20) },
   { frame: 180, value: new BABYLON.Vector3(40, 0, -20) },
   { frame: 240, value: new BABYLON.Vector3(20, 0, 20) },
   { frame: 300, value: new BABYLON.Vector3(10, 5, 10) },
];

    This could cause issues if box.position is not properly initialized or if it’s being modified elsewhere in your code. It’s possible that box.position is being converted to a string at some point, which would cause the error you’re seeing when Babylon.js tries to create the _isDirty property on it.

    This approach may help you to fix the error. First you need to do is to create a new BABYLON.Vector3 object for each keyframe in boxPosKeys, like you’re doing in boxRotKeys to ensure that each keyframe has its own unique BABYLON.Vector3 object, and which should prevent it from being modified elsewhere in your code.

    boxPosKeys code same as boxRotKeys;

    const boxPosKeys=[
   { frame: 0, value: new BABYLON.Vector3(box.position.x, box.position.y, box.position.z) },
   { frame: 120, value: new BABYLON.Vector3(20, 0, 20) },
   { frame: 180, value: new BABYLON.Vector3(40, 0, -20) },
   { frame: 240, value: new BABYLON.Vector3(20, 0, 20) },
   { frame: 300, value: new BABYLON.Vector3(10, 5, 10) },
];

    If the above code doesn’t fix the error, you might need to do some debugging to find out where the string is being created. You could console.log() the type and value of box.position and each keyframe’s value field. This should help you identify where the string is coming from.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search