Can not make a material blink

Questions
1

I am finding it difficult to make a material blink.

This is the original example with working scale, rotation, position animatios - https://www.babylonjs-playground.com/#CBGEQX#1

This is my result with adding color animation - https://www.babylonjs-playground.com/#CBGEQX#52

What I am doing is the following:

var animation3 = new BABYLON.Animation("colorAnimation", "material.color", 30, BABYLON.Animation.ANIMATIONTYPE_COLOR3, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);
    const originalColor = box1.material.color;

    keys = [];
    keys.push({
        frame: 0,
        value: new BABYLON.Color3(1,0,0)
    });

    keys.push({
        frame: 40,
        value: originalColor
    });

    keys.push({
        frame: 80,
        value: new BABYLON.Color3(0,0,1)
    });
    animation3.setKeys(keys)
    
    // Create the animation group
    var animationGroup = new BABYLON.AnimationGroup("my group");
    animationGroup.addTargetedAnimation(animation1, box1);
    animationGroup.addTargetedAnimation(animation2, box1);
    animationGroup.addTargetedAnimation(animation3, box1);

animationGroup.play(true);

This does not change the color of the materials and a nothing happens when I press play. How can I make the material blink?

Thanks.

Update:

The following error is logged in the console.

LerpToRef https://preview.babylonjs.com/babylon.js:16
    Lerp https://preview.babylonjs.com/babylon.js:16
    color3InterpolateFunction https://preview.babylonjs.com/babylon.js:16
    _interpolate https://preview.babylonjs.com/babylon.js:16
    animate https://preview.babylonjs.com/babylon.js:16
    _animate https://preview.babylonjs.com/babylon.js:16
    _animate https://preview.babylonjs.com/babylon.js:16
    animate https://preview.babylonjs.com/babylon.js:16
    render https://preview.babylonjs.com/babylon.js:16
    compileAndRun https://www.babylonjs-playground.com/js/main.js:135
    <anonymous> self-hosted:1007
    _renderLoop https://preview.babylonjs.com/babylon.js:16
    <anonymous> self-hosted:1009
2

Seems that there is no color property on the material even though the playground shows is as autocomplete

I’ve used material.diffuseColor and done the following

var animation3 = new BABYLON.Animation(“colorAnimation”, “material.diffuseColor”, 30, BABYLON.Animation.ANIMATIONTYPE_COLOR3, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);
const originalColor = box1.material.diffuseColor;

It seems to be working like this.

3 Likes