Performance impact

[BenEaston]

Hello,

Loving this effect!

However i'm noticing a dramatic impact on performance in my site. I just need to use it for the beginning intro, the effect is then removed and it is not needed again.

Despite removing the canvas and the animation having finished, performance of the whole site is permanently reduced. If I reload without this effect performance returns to its normal state.

For reference the canvas and relevant images are inside a React element (though the same is occurring when they're not) and the project is using Ruby on Rails. When i say removing the effect I am calling

ReactDOM.unmountComponentAtNode(ReactDOM.findDOMNode(this).parentNode) from inside the react element containing the canvas and aquarelle object. Thus the canvas is removed from the DOM.

Is there a way to use the aquarelle effect for the beginning and then completely remove it from memory? That is close any Three.js items, clear everything and effectively return the site to a state if the effect had never been run?

Thanks

[proov]

i'm interested too ! i try to call .stop() when animation is finished but it still render the scene :(

console.log(progress) is still firing 1 about 60 times per seconds :(

[BenEaston]

I tried all sorts of different solutions and couldn't solve the issue. In the end I had to remove the effect which is a great shame. I feel like there should be a solution contained in the three.js framework somewhere, but I'm yet to find it. Though that's interesting that the progress is still firing, I hadn't noticed that. If you have any ideas would be great to hear them!

[thiervoj]

I have the same problem here. I want to use Aquarelle as an intro during the page loading. But after the animation is complete, the requestAnimationFrame is still running even if no modifications are applied to Aquarelle. It would be nice to have an option to disable everything and cancel the animation frame when everything is completed !