Animate models in Three js from separate script with GSAP

[wpsoul]

Currently, I can't find answer on one simple question. Imagine that I have simple scene with Three js

 

I have special application with GSAP, but I load it in separate script file. So, how can I get scene object and model objects from activated Three js canvas? All examples which I found require to place GSAP code directly in animate function of three js init, but I need to modify it separately from another file

 

[ZachSaucier]

Hey wpsoul and welcome to the GreenSock forums! Thanks for being a Club GreenSock member. We couldn't do what we do without people like you.

 

I'm not sure that I understand the "issue" that you're bringing up. GSAP is effectively a fancy property manipulator and an animate function is generally just what calls the rendering process, so I am failing to understand why they can't be separate. Can you please try to create a minimal setup of something that you're looking to separate?

[wpsoul]

I will try to explain on example

 

See the Pen yqowk by bartuc (@bartuc) on CodePen

 

Check js file, in end of file we animate planets, like 

 

mercury.position.x = Math.sin( time * 4.5 ) * 5;

so, we can easily get mercury object and animate it via GSAP

 

But what if I have another script file, if I try to use the same code, mercury variable will be undefined. So, my question is how we can get access to this object and animate it via GSAP in fact that code will be in separate file?

[ZachSaucier]

6 minutes ago, wpsoul said:

But what if I have another script file, if I try to use the same code, mercury variable will be undefined. So, my question is how we can get access to this object and animate it via GSAP in fact that code will be in separate file?

In that demo, mercury is a global variable. That means that any scripts after it can access the variable. For example:

<script src="yourThreeJSCode.js"></script> <!-- mercury and other variables are global -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.4/gsap.min.js"></script>
<script src="yourGSAPCode.js"></script>  <!-- mercury and other variables are accessible -->

Does that make sense?

[wpsoul]

Ok. I think I found issue in my setup. By default, three js examples are placed on page as Module scripts

 

<script type="module">

This was reason why I could not get access to variables in separate scripts. Currently we can close this