THREE JS use velocity to tilt camera

[orion_prime 1 Likes (Newbie)]

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

[OSUblake 18,364 Likes (Superhero)]

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)
  })
}

 

[orion_prime 1 Likes (Newbie)]

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

[OSUblake 18,364 Likes (Superhero)]

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 });

 

[orion_prime 1 Likes (Newbie)]

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

[OSUblake 18,364 Likes (Superhero)]

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
    });
}

 

[orion_prime 1 Likes (Newbie)]

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,                            
                      })
                    
                }
               

 

[OSUblake 18,364 Likes (Superhero)]

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