Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Meds86

Threejs and TweenMax looping properties

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

I took a stab out how I thought it should be set up with each blip spawning after a delay. Still it looks like your whole scene fades out after a few seconds. Again I'm not familiar with Threejs or its mesh objects

 

See the Pen XzrVeo?editors=0010 by GreenSock (@GreenSock) on CodePen

 

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.
×