ThreeJS camera Ellipse motion as I scrolldown.

[Yusuke2223]

So I'm working right now in ThreeJS but I want to figure out something. I've created a lot of boxes and with a camera. In my own understanding in ThreeJS somehow the animation there is somehow kinda different in gsap because I don't know how can I applied in gsap. I want my camera to move in an ellipse revolution in the boxes. It is somehow like this in normal ThreeJS . 

See the Pen QWQeYvE by yowyow3322 (@yowyow3322) on CodePen

but when I'm trying to apply this in gsap I don't know how could I figure it out cause there is no information here about the ellipse movement in Threejs so I'm wondering if its fine to ask for help here? I want to get the idea of ellipse revolution in my codepen. As you see in this part of my another codepen that show the demo of Ellipspe revolution of camera 

let curve = new THREE.EllipseCurve(0, 0, 10, 5);

let line = new THREE.Line(new THREE.BufferGeometry().setFromPoints(curve.getSpacedPoints(100)), new THREE.LineBasicMaterial({
  color: "yellow"
}));
line.rotation.x = -Math.PI * 0.25;
line.rotation.z = Math.PI * 0.125;
line.position.x = 5;
scene.add(line);

let cam = new THREE.PerspectiveCamera(25, 1, 1.5, 25);
let camHelper = new THREE.CameraHelper(cam);
scene.add(camHelper);

let clock = new THREE.Clock();
let v = new THREE.Vector3();

renderer.setAnimationLoop(() => {

  let t = (clock.getElapsedTime() * 0.05) % 1;
  
  // magic is in these lines //////////////////
  cam.position.copy(curve.getPointAt(t, v));
  cam.position.applyMatrix4(line.matrixWorld);
  cam.lookAt(obj.position);
  /////////////////////////////////////////////

  renderer.clear();
  renderer.setViewport(0, 0, innerWidth, innerHeight);
  renderer.render(scene, camera);
  renderer.setViewport(0, innerHeight - 256, 256, 256);
  renderer.render(scene, cam);
})

This is somehow annoying for me because I wanna do it in scrollTrigger as it keeps rotating in an ellipse also. In my original code which are the boxes. I want them to rotate in ellipse but I don't know how I will do it with. You can see the code at this part when you scrolldowning.. the camera it will coming near to you and going upward since I put z:5,y:5, but I don't know how I will apply with Math.sin Math.cos cause it way more confusing.
 

            gsap.to(camera.position,{
                scrollTrigger:{
                    trigger:".main",
                    start:"top top",
                    end:"3000px",
                    pin:true,
                    scrub:true,
                    toggleActions:"restart pause resume pause",
                },
                y:5,
                z:5,
            })
            
        }

Does anyone understand my question barely enough? Help haha.

See the Pen RwQXvKO by yowyow3322 (@yowyow3322) on CodePen

[Yusuke2223]

Okay I update the code with some Math.sin Math.cos but still doesn't make it perfect.. Here is the new update of codes.

 

        var update = function (per, bias, secs) {
            // update aspect and fov
            camera.aspect = container.clientWidth/container.clientHeight ;
            camera.fov = 50 + 25 * bias;
            camera.updateProjectionMatrix();
            // change position
            var radian = Math.PI * 2 * per;
            camera.position.set(
                Math.cos(radian) * 5, 
                5 * Math.sin(Math.PI * 4 * per), 
                Math.sin(radian) * 5);
            camera.lookAt(0, 0, 0);
        };

        var per = 0,
        bias = 0,
        now = new Date(),
        secs = 0,
        lt = now,
        frame = 0,
        frameMax = 300,
        fps = 30;

        function name(params) {
            now = new Date();
            secs = (now - lt) / 1000;
            per = frame / frameMax;
            bias = 1 - Math.abs(0.5 - per) / 0.5;
            if(secs > 1 / fps){
                update(per, bias, secs);
                renderer.render(scene, camera);
                frame += fps * secs;
                frame %= frameMax;
                lt = now;
            }
        }

        
        gsap.to(camera.position,{
            scrollTrigger:{
                trigger:".main",
                start:"top top",
                end:"3000px",
                pin:true,
                scrub:true,
                toggleActions:"restart pause resume pause",
                onUpdate:() => {
                    name()
                }
            },
        })

It doesn't look in the center and making it looks like an ellipse rather than just going up and down and closing in. I do some changes to in the camera.fov but still wasn't made it out clear.

[GSAP Helper]

We love helping with GSAP-related questions, but unfortunately we just don't have the resources to provide Three.js consulting (that's not a GreenSock product). Your question isn't really about GSAP (if I understand correctly) - it's about Three.js. Of course anyone else is welcome to post an answer if they'd like - we just want to manage expectations.  

 

GSAP works great with Three.js - just think of GSAP as a very fast property interpolator. It can animate literally any property of any object. So my encouragement to you would be to just focus on creating an object with a property/getter/setter that handles positioning your object on that ellipse progressively. For example, yourObject.progress(0) might place it at the start of the oval, yourObject.progress(0.5) places it halfway through the rotation (like 180 degrees), and yourObject.progress(1) places it at the end (360 degrees, back to the start). Then, all you need to do is set up a gsap.to(yourObject, {progress: 1, scrollTrigger: {...}}) to make it go all the way around that ellipse, connected to the scroll position. 

 

If you need more help, you can post in the "Jobs & Freelance" forum for paid consulting.

 

Otherwise, if you've got a GSAP-specific question just post that here along with a minimal demo and we'd be happy to take a look.