Jump to content
Search Community

Threejs cylinder tween and GSDevTools

ronnys 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

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"});
Link to comment
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: 

 

Link to comment
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
Link to comment
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

Link to comment
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
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...