How to make a movie of my three.js project?

I have done a project in 3D and now I want to make a short video as a small demo showcasing its main functionality and eventually what we have come up with.
I would like for example the camera to start as a predefined location, then travel though the scene following some path before it lands at another (predefined too) location. I would also like (if possible) to activate some mouseover events where this is appropriate.

I would also like to do this programmatically, ie not by using my mouse manually to move the camera, then screen capture the whole thing and export it as a gif or something similar.

How can I do something like this please? Have you guys got any pointers to help me get started with this?

You could just use your mouse to control the movements and events, and use a screen recorder to capture your screen. Just use the CSS rule cursor: none; to hide the mouse from the screen recorder so nobody knows you’re controlling it. On MacOS, I like QuickTime because it’s already built in, and on Windows I like OBS Studio because it’s very simple to use, and it outputs small MP4s, ready to share.

But just out of my own curiosity, why would you code a scene that you can’t interact with? At that point you lose the benefit of real-time rendering, so it might be better to use a pre-rendered image sequence and export to video.

1 Like

Thanks Marquizzo

The reason is, I want to make a small clip/gif of my project that will be included in a powepoint presentation. I was also thinking to somehow program the path that the camera would follow in my 3d scene and then record it. I am afraid that If I record the screen when I am using the mouse, the whole movement wont be as smooth as when this is done automatically based on a path that I have predetermined somehow

1 Like

use GSAP to animate your camera or any object in your scene

1 Like

Something related: [SOLVED] Tweening the rotation of a camera

thanks, that gsap lib is pretty nice actually! Didnt know about it till now

This example shows how to animate a camera on a path.

1 Like