Animate the intensity on an emissive material

Help & Support
#1

Hiya, is it possible to animate the intensity on the emissive part of a material in play canvas?

thanks!

Tweening a value always stays at zero
#2

Hi @davidj2022,

Yes, one way to do it is using the tween library. Check at the bottom of this page on how you can animate the colour of a material.

In a similar way you can animate any numeric material property.

https://developer.playcanvas.com/en/tutorials/tweening/

1 Like
#3

thanks for this… I’m having some trouble getting it to work with the emissive intensity however.

This is the project:
https://playcanvas.com/editor/scene/1357123

this is the error message I get:

this.fromemissiveintensity.clone is not a function

many thanks

#4

So this code won’t work:

    this.tween = this.app.tween(this.tweenedProperties.emissiveintensity)
        .to(this.toemissiveintensity, this.duration, pc[this.easing])
        .delay(this.delay);

If you check the link I posted, the way to tween a material property is different:

image

To that regard, tweening emission intensity will be something like this:

const material = this.entity.render.material;

const data = {
    intensity: material.emissiveIntensity
};

this.app
    .tween(data)
    .to({intensity: 1.0}, 1.0, pc.Linear)
    .loop(true)
    .yoyo(true)
    .on('update', function () {
        material.emissiveIntensity = data.intensity;
        material.update();
    })
    .start();
2 Likes
#5

For other who arrive here and try to cut/paste this code…it should be…

emissiveIntensity

…and not…

emissiveintensity

:slight_smile:

1 Like
#6

Thanks @Grimmy, I’ve updated the code.