Jump to content
GreenSock

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

Threejs cylinder tween and GSDevTools

Recommended Posts

Hi, I have set up two cylinders with threejs and have added these two Geometries to TimelineMax, up to here everthing is working fine. When adding GSDevTools.create() the default GSDevTool play control is shown, but my threejs scene and TimelineMax animation is no longer displayed. Any help appreciated. Thx

 

const disk = new THREE.Mesh(
                  new THREE.CylinderGeometry(2, 2, 2, 10),
                  new THREE.MeshNormalMaterial({ color: 22222280 })
                );
 
                disk.position.set(-70, 20, 0);
 
const disk1 = new THREE.Mesh(
                  new THREE.CylinderGeometry( 2, 2, 2, 10),
                  new THREE.MeshNormalMaterial()
                );
 
                disk1.position.set(70, 10, 0);
 
var tl = new TimelineMax({id: "slider"})
                 tl.to(disk.position, 3, {x: 5, y: 10, z: 3, id:"disk"}, 0)
                 .to(disk1.position, 3, {x: 10, y: 15, z: 4, id:"disk1"}, 10);
 
GSDevTools.create({animation: "slider"});

Share this post


Link to post
Share on other sites

Hm, sorry to hear about the trouble. It's really difficult to troubleshoot blind - can you provide a reduced test case, perhaps in codepen? Are you getting any errors in the console? Did you load the GSDevTools file? 

 

To learn how to create a codepen demo, see: 

 

Share this post


Link to post
Share on other sites

Hi Ronnys,

 

I have tested your example pen and have found it does work with GSDevTools. I did have to include the GSDevTools to your pen as there was none there.

 

Can you confirm that you have included the GSDevTools script in your original test case?

 

Regards,

  • Like 1

Share this post


Link to post
Share on other sites

Hi Dipscom,

 

thank you, among others I have included following link: https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/TweenMax.min.js

Please also see the screenshot. Are there any other scripts I should consider?

 

Thx, regards

Screenshot_Scripts.png

Share this post


Link to post
Share on other sites

Yes Ronnys you need to add a separate script for the GSDevTools.

 

In CodePen you use the following special url: https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/GSDevTools.min.js?r=100

 

For your local projects, you will find the GSDevTools in your GSAP downloadble folder. Look into the 'src' folder and depending on how you are building your site/application, it will be in the 'bonus-files-for-npm-users' or it will be in 'utils' subfolder or the 'minified' and 'uncompressed' folders.

 

 

  • Like 2

Share this post


Link to post
Share on other sites

Great, now it's working, thank you!

Share this post


Link to post
Share on other sites

Anytime.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×