Jump to content
GreenSock

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

THREE JS use velocity to tilt camera

Go to solution Solved by OSUblake,

Recommended Posts

Hello,
So i used the ScrollTrigger skew example to tilt the three js camera instead the image skew property.

Apart from that, a text div  is being translated and sphereGroup is being rotated using gsap value & it is working nicely
 

The problems i face with velocity are:

1 ) there is no smoothing happening when going to the calculated position
2) the above problem also leads to  jerk when scroll direction is switched it
3) with mouse wheel the the incremental jumps does not look nice (which could also be solved with better smoothing maybe?)

any tips ?
suggestions for better gsap to three logic also welcome

last function in codpen has all the gsap properties

See the Pen LYyJjJx by orion_prime (@orion_prime) on CodePen

Link to comment
Share on other sites

Not sure what all the proxy stuff is for. 

 

Why don't you just tween the value directly?

onUpdate: (self) => {

  let currentTilt = clamp(self.getVelocity() / -100);

  gsap.to(camera.rotation, {
    x: "+=" + -THREE.MathUtils.degToRad(currentTilt)
  })
}

 

  • Like 1
Link to comment
Share on other sites

i was reverse engineering this skew example 

See the Pen eYpGLYL by GreenSock (@GreenSock) on CodePen



so yeah there's lot of useless stuff
Updated codepen

See the Pen ExmebQO by orion_prime (@orion_prime) on CodePen

  

its smooth on the first scroll but does not work later on

so basically
camera.x  is 0 at the start
then on scroll it needs to go smoothly to the velocity value
then come back to camera.x  is 0 smoothly

Link to comment
Share on other sites

Then just animate it back to 0.

 

gsap.killTweensOf(camera.rotation);
gsap.timeline()
  .to(camera.rotation, {
    x: "+=" + -THREE.MathUtils.degToRad(currentTilt),
    duration: 1
  })
  .to(camera.rotation, { x: 0 });

 

  • Like 1
Link to comment
Share on other sites

oh its really close now !
...the timing and easing seems off & not as polished as the skew example ... maybe this tilt logic is wrong  ?

current code

 let currentTilt = clamp(self.getVelocity()/100);
                
                gsap.killTweensOf(camera.rotation);
                gsap.timeline()
                    .to(camera.rotation, {
                        x: THREE.MathUtils.degToRad(currentTilt),
                        duration: 0.5,

                    })
                    .to(camera.rotation, {
                        x: 0,
                        duration: 0.5,
                    });



See the Pen GRmXXVd by orion_prime (@orion_prime) on CodePen

Link to comment
Share on other sites

  • Solution

I don't know how you want it to look, so I can't say how to improve it. 

 

If you're trying to use the same logic as the skew one, just do this.

 

let currentTilt = THREE.MathUtils.degToRad(clamp(self.getVelocity() / 100));

if (Math.abs(currentTilt) > Math.abs(camera.rotation.x)) {
  gsap.killTweensOf(camera.rotation);
  gsap.timeline()
    .to(camera.rotation, {
      x: currentTilt,
      duration: 0.5
    })
    .to(camera.rotation, {
      x: 0,
      duration: 0.5
    });
}

 

  • Like 1
Link to comment
Share on other sites


This pen should be easier to compare with the skew example.
The timing needs to be improved but apart from that this seems to working ! BIG THANKS @OSUblake !!

See the Pen KKmGwEE by orion_prime (@orion_prime) on CodePen



One thing i would like is for gsap to update a single value(scrollObj.velocity) then use that value to update multiple objects in the scene.(The number of objects getting tilted is dynamic)

let scrollObj = { velocity: 0 }



i achieved this by the timeline's  onupdate callback,
which calls the tiltboxes function,
which applies velocity as rotation on each box.

does this seem fine ? are there any redflags or tips ?

                let currentTilt = clamp(self.getVelocity() / 100);

               function tiltBoxes(){
                meshGroup.children.forEach(element => {
                    element.rotation.z =- scrollObj.velocity
                })
               }

                if (Math.abs(currentTilt) > Math.abs(camera.rotation.x)) {
                    gsap.killTweensOf(camera.rotation);
                    gsap.timeline({onUpdate:tiltBoxes})

                      .to(scrollObj, {
                        velocity: THREE.MathUtils.degToRad(currentTilt),
                        duration: 0.5,
                      })

                      .to(scrollObj, {
                        velocity: 0,
                        duration: 0.5,                            
                      })
                    
                }
               

 

Link to comment
Share on other sites

27 minutes ago, orion_prime said:

One thing i would like is for gsap to update a single value(scrollObj.velocity) then use that value to update multiple objects in the scene.

 

I added a class to do that. Right now it's just doing what your function is, but you could definitely add a lot more logic to it.

 

See the Pen RwVePQY by GreenSock (@GreenSock) on CodePen

 

 

  • Like 1
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.
×