(In the Awwwards website referred) Camera Path and lookAt are working in their own way


I’m currently trying to figure out how this SOTD website is well made and got stuck on this question.

I know that we can create a camera path in Blender using a curve, converting it to mesh, and then using CatmullRomCurve3 in three.js. (btw I’m not sure this website has approached in the same way :sweat_smile:)

But I don’t fully understand how the lookAt path animation in this website is working, like in my captured video.

I guess it seems like it is looking at each edge side, as shown in my drawn picture.

However, in the video, at a specific point, the lookAt method is controlled to look at a specific point.

Do you guys think this lookAt animation is controlled by GSAP, Theatere.js, or just another second path in Blender? Or is it something else?

Please help, it would save my life :sob:

You can export camera animations in GLTF models, so they’re probably not using lookAt. Instead, they animation controls the camera’s position and rotation (through its quaternion).

I think I could assume what you are explaining since in development tool > Network, I have found suspicious 'frame.[hash].glb and camera.path.[hash].bin.

but it would really helpful if you explain more detail how the keyword is so I can find some clue or solution for this.

Do you mean the camera position and rotation animation is made with Keyframe animation in Blender? then it is exported as .glb file and then keyframe are controlled by scrollY position?

Most likely its done like that. Another way to do this, is create 2 curves, one for camera, and the other for an object you can lookAt. The object, which you are looking should be placed behind the models. Then simply getPointAt and change the values of your camera and object when you scroll your mouse.

Thanks for the reply.
“Most likely its done like that.” do you mean this is about Camera Keyframe animation and it is the most common way? if so and easiest way, I would like to study in Blender

Not sure if its the most common and easiest way, but its a way. Just create two curves in Blender, and constrain camera to curve and track to an object/empty that is also constrained on a curve. Then either export those curves, object and use getPointAt. Or just create a full animation with the camera and scroll through keyframes.

thanks for approaching two way to figure out! it helps me a lot! I might try both way and select the easy one. :pray: