Jump to content
Search Community

Threejs and TweenMax looping properties

Meds86 test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

I'm trying to create randomly placed circles with each render loop. I can't seem to animate a fade out opacity for each circle one after another(as a new circle would start with a opacity of 1). It seems to animate the opacity of them all at once. Any help would be appreciated

 

See the Pen dZbzbB by Meds (@Meds) on CodePen

Link to comment
Share on other sites

Sorry, I don't know much about Three.js but you seem to have some dangerous recursion in there.

 

At 60 frames per second you are creating a new mesh, pushing that mesh to an array and then looping through the array and creating new tweens on each mesh that is already in the array. Sorry, I don't know much about Three.js but you seem to have some dangerous recursion in there.

 

At 60 frames per second you are creating a new mesh, pushing that mesh to an array and then looping through the array and creating new tweens on each mesh that is already in the array.

 

if you add the console.log as shown below you will see how quickly it gets out of control.

    function newBlips() {
        var i;
        const mesh = new THREE.Mesh(geometry, material);
        mesh.position.set(rand(-1000, window.innerWidth), rand(-500, window.innerHeight), -1000);
        scene.add(mesh);
        blips.push(mesh);
        for (i=0; i < blips.length; i++) {
       
console.log("no!!!")

            TweenMax.to(blips[i].material, 3, {opacity: 0, ease:Power2.easeOut}, 0.2);
        }
    }

 

 

 

Definitely get rid of that loop. You should only need one tween per mesh after it is created. 

I don't think you want to call newBlips on each render either. 

 

  • Like 1
Link to comment
Share on other sites

Allow me to have a stab at it:

 

 

There are a few things to consider:

1) You might not want to be generating a new geometry at each tick. Better to have them all generated to begin with and then just animate their properties if you have a set, limited number of them.

2) You will need to create a material for each of the individual meshes that you want animated separately. Because if you are linking all meshes to a single material, when you change any of that material's property, you will affect all linked meshes.

 

Do forgive if I missed some detail but I'm short on time today.

 

:)

 

Hope this is helpful.

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...