3D Object Fade After Animation Complete

  • Hi Jessie,

    You can actually do this effect without writing any code, using the Tween System and Behavior Script.

    You can follow the tweening guide to import the tween manager to your project, then you can set up an alpha tween that looks something like this:

    Next, follow the Behavior Script guide to download and add BehaviorScript.js to your project. Add BehaviorScript to an object and set it up like this:

    For Target Object in the Response section, set it to the object that holds your alpha tween.

    Here's a quick example project I made to show this in action: download project

    Let me know if you have any questions!

    Comment actions Permalink
  • Hey Jacob,

    following the above example, I am looking for a solution that lets me fade out Objects as soon as they are reaching a certain height above ground. My context is a Wall that scatters and the rocks are falling down. To avoid that "people get hit" by the falling pieces, I´d like to fade them out before "hitting" the ground. I imported the wall and the "destruction" as an animated 3d mesh, so I have many pieces to deal with (about 20 pcs). 

    Would you lead me to a working solution?
    Thanks in advance,

     

    cheers eL 

    Comment actions Permalink
  • Hey eL Be,

    Assuming each rock has its own Mesh Visual, you can add a script like this to each object to make it fade out based on height:

     

    // @input float startFadeHeight = 80
    // @input float fadeOutHeight = 20

    // @input bool copyMaterial = true

    var transform = script.getTransform();

    var meshVisual = script.getSceneObject().getFirstComponent("Component.MeshVisual");

    if (script.copyMaterial) {
    meshVisual.mainMaterial = meshVisual.mainMaterial.clone();
    }

    var mainPass = meshVisual.mainPass;

    function invLerp(a, b, t) {
    return (t-a) / (b-a);
    }

    function setAlpha(pass, alpha) {
    var col = pass.baseColor;
    col.a = alpha;
    pass.baseColor = col;
    }

    script.createEvent("UpdateEvent").bind(function(){
    var height = transform.getWorldPosition().y;

    var heightRatio = invLerp(script.fadeOutHeight, script.startFadeHeight, height);
    heightRatio = Math.max(0, Math.min(1, heightRatio));

    setAlpha(mainPass, heightRatio);
    });

     

    Adjust "startFadeHeight" to the height you want the object to start fading out. Adjust "fadeOutHeight" to the height you want the object to be completely invisible. 

    Also, make sure the rock material has blend mode set to "Normal" or anything else that supports transparency.

    Let me know if you need any more help!

    Jacob

    Comment actions Permalink
Have a comment?

Please sign in to leave a comment.

We're here to help! We just need a little bit of information...

What system are you using?

Have you downloaded the latest version of Lens Studio?

Please download the latest version of Lens Studio. If you still run into this issue, please come back and report it!

Is this issue causing Lens Studio to crash?

What system do you run Lens Studio on?

Version

Graphics

Follow the next steps to help us solve your issue:

  • Copy and paste this text into your TerminalCommand Window
    open ~/Library/Preferences/Snap/Lens\ Studio/ %LOCALAPPDATA%\Snap\Lens Studio Copy Text
  • Press ReturnEnter to run the command. The Lens Studio folder will automatically open
  • Prepare to upload your files: zip the "Log" Folder by right-clicking and choosing "compress."
    Locate the Log.txt file right above it.

    Attach a screenshot of the issue:

Name:

Email:

What is this most relevant to?

Please enter a brief description of your issue:

Thanks for submitting this issue.

Unfortunately, it's likely due to the operating system or hardware you're using – since they don't meet the system requirements for Lens Studio.

Still, we hear you loud and clear, and are logging the issue in case there's ever a workaround we can provide!

Minimum Requirements

Operating System: Windows 10 (64 bit); MacOS 10.11+

Hardware: Minimum of Intel Core i3 2.5Ghz or AMD Phenom II 2.6Ghz with 4 GB RAM; Intel HD Graphics 4000 / Nvidia GeForce 710 / AMD Radeon HD 6450 or better; screen resolution of 1280x768 or higher

We'll try to resolve this issue as soon as possible. Thanks for letting us know about it!

Keep an eye out for a followup email from us. We may have a couple more questions for you, or we might already have a solution to offer.

Happy creating!