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?

1 Like

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