Jump to content
GreenSock

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

Search the Community

Showing results for tags 'threejs'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager

Categories

There are no results to display.


Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests

Found 12 results

  1. I'm working on animating a grid of threejs boxes and I would like to implement the grid option available in the stagger object of the timeline, but when doing so I get an error: The example code only shows how to use the stagger options applied to DOM elements so I wonder if I'll need to create my own objects with properties that the grid optins will understand, which I can easly do, but I dont know what it is required. Hope that makes sense. Here is my setup: - There is an array of threejs Meshes layout in a grid - I want to create a timeline to animate all elements in the grid using the stagger grid options like: stagger: { amount: 1.5, grid: "auto", from: "center" } - But I'm getting the error quoted above Any help will be much appreciated.
  2. I was trying to do directional rotations in Three.js and encountered some weird/interesting behaviors... Using "_ccw" will actually result in clockwise rotation while "_cw" lead to counterclockwise rotation. That effect is happening regardless of whether I put positive/negative radians before the string. I have checked this plugin "whipped together" by the almighty code god but it doesn't cover directional rotations in Three.js. Anyways.. at least I could do directional rotations now!! Just wanna share. Maybe it's because how Three.js use positive number for counterclockwise rotation and negative number for clockwise?
  3. 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
  4. Hi everybody, im new on gsap...playing with threejs, tween and audio visualizer. I have a group with some mesh as child 1 - I would like to animate each element of the mesh with a value created in RAF . 2 - I would like to make endless tween on rotation (unfortunally , "repeat: -1" its not working). Is there another elegant / better solution for do that. Thanks in advance for any help... On RAF i have some function: 1 for render() three scene and one for analyze the sound and pass the value on tween. So this... // The sound analyzer . function soundAnalyzer() { if ((cristal)&&(frequencyData)){ tl_cristal_rotationX = new TimelineMax({repeat:-1 }); analyser.getByteFrequencyData(frequencyData); if(typeof frequencyData === 'object' && frequencyData.length > 0) { scale_value = 9000 - frequencyData[1] * 35 ; scale_value_Low = 1800 - frequencyData[1] * 5 ; cristal.traverse( function ( child ) { if ( child instanceof THREE.Mesh ) { tl_cristal_rotation = new TimelineMax(); tl_cristal_rotation.to(child.rotation, scale_value_Low, { ease: Linear.easeNone, x: -360 , y: -360, repeat:-1 }) } }); tl_cristal_rotationX.to(cristal.rotation, scale_value , { ease: Linear.easeNone, x: -360 }) } } } // and here RAF loop and Render // animation loop function animate() { if(dae) { soundAnalyzer() } requestAnimationFrame( animate ); render(); stats.update(); } TweenLite.ticker.addEventListener("tick", render); //and render the scene function render() { renderer.clear(); camera.position.x += ( mouseX - camera.position.x ) * .015; camera.position.y += ( - mouseY - camera.position.y ) * .015; camera.lookAt(scene.position); composer.reset(); composer.render(scene, camera); composer.pass(OldVideoPass); composer.pass(BrightnessContrastPass); composer.pass(RGBSplitPass); composer.toScreen(); } Thank u very much and sorry for my English.. hope is readable..
  5. Hi all, first of all congrats on the great animation engine. I am using GreenSock, mainly TimelineMax and TweenMax for timing and tweening positions, rotations etc. of my WebGL / ThreeJS scene objects. The resulting format is always an interactive (Apple) iBook for children - basically a compressed website that runs with a WebKit standard similar to the one used in Safari Mobile. Performance was never a real issue until a colleague recently discovered that certain animations freeze or behave different (jumpy, stuttery) after running for several minutes (about 10-15 minutes dependent on the device) while others still run smoothly. It occurs only on the mobile device and only on generations < iPhone 6. What helps is to throttle the TweenMax ticker fps down to 30, but of course this doesn't look as smooth. I also tried playing with the lagSmoothing - with no success. Do you have an idea where these freezes come from? Since they occur only after a certain amount of time.. could it be that the JS execution stack suddenly becomes too big because the device isn't really capable of doing 60fps? Turning RAF on and of also didn't change much. Thanks for any hints or input.
  6. Hi I would like to tween the scale of an array of Three JS objects. I am able to do this on requestAnimationFrame, but I would like to use Tweenmax: for ( var i = 0; i < meshes.length; i ++ ) { meshes.scale.x = meshes.scale.y = meshes.scale.z = boost; } Any idea how to? Thanks!
  7. Hello, A few weeks ago I started with GSAP and now I also learned some basic skills in Three.js I have made a object and I am able to rotate it with GSAP, but I would like to make it draggable with the mouse. Can anyone help me making this happen? When I create a drag for the mesh ( the object). The object dissapears. This is my Codepen: http://codepen.io/xleooow/pen/YGvjNA Any help is appreciated.
  8. Hello everyone, I am new to this place and I'm quite new to the GSAP world. I'm very excited about working with this library and watching the examples I was really impressed with this one. I have seen that there is a huge use of three.js library and I was wondering about how three.js and GSAP works togheter. For example, the camera movements are just made with three.js or there is a way to replicate that animation only with GSAP or both? I'm just looking for some hints! Thank you in advance! P.S. If I'm in the wrong section or off-topic, please forgive me!
  9. I recently started using GSAP for animating three.js as an alternative to https://github.com/sole/tween.js, commonly used for this. It made it really easy to do something like: make a cube spin and when it stops, wait until one of the faces are square (through a 90 degree rotation with repeat -1 switched on/off). However, I'm struggling with severe performance issues in tweening many objects at a time. I think this has to do with having to create a duplicate copy of the objects to store the tween data rather than just being able to directly tween object variables without having to write in onUpdate. This makes writing the tween a tad more tedious than tween.js, and it has been no easy task to convert from tween.js to GSAP. Once I finally did figure out how to do this, I found the performance was severely worse than using tween.js. I created an example modification of a three.js example which closely relates to the project I'm working on: Original, using tween.js: http://jsfiddle.net/justin_hackin/J3k9N/ (Tweening @ 292) Single variable for closure in loop, not working: http://jsfiddle.net/justin_hackin/dHLcg/ TweenMax demo: http://jsfiddle.net/justin_hackin/6bFJc/ (Tweening @ 298) I'm wondering, are these performance issues happening because each TweenMax closure is trying to store the whole object copy array ? I don't quite understand the deeper aspects of JS, excuse my ignorance. Am I doing something wrong here ? I really love these GSAP libraries so I hope I can make it work for the project I'm working on. If not, I really hope the developers will consider making the code more friendly to this kind of use. The project I'm working on might eventually be willing to invest in such a feature if it would take some efforts to implement, please let me know what could be possible. Thanks, ~Justin
  10. Hi, I'm trying to use GSAP to animate objects in a ThreeJS project, within the requestAnimationFrame loop. Obviously this loop is firing much faster than the time it takes each tween to complete. I'm getting lots of overlapping Tweens on each object and I'm trying to figure out the best way to have each Tween run and then run it's onComplete function to tween itself back properly without losing it's references. Would TimelineLite be better suited for this or is there a better approach using TweenLite? Thanks in advance! function animate() { if(animation === true ) requestAnimationFrame( animate ); TweenLite.killTweensOf(object); TweenLite.to(object, 0.5, { x: _radius * Math.cos( num ), y: _radius * Math.sin( num ), ease: Expo.easeOut, onComplete: function(_this,_x,_y) { // animate the object properties back to what they were before we started this tween }, onCompleteParams: ["{self}",object.position.x,object.position.y] }); }
×