A capture from inside of a Three.js example scene.

Capture Facebook-Compatible 4K 360 Videos of 3D Scenes in Your Browser

This article describes how to generate buzz-making 360 videos and photos in 4K that will play right on your Facebook timeline or YouTube page, using the popular Three.js graphics library for browser-based 3D scenes.

The code is available on Github.

Overview

1. Setup a 3D environment and include the modified capture libraries.
2. Export a 360 photo sequence. Write metadata for any 360 photos.
3. Stitch all the 360 photos together into a 360 video and add metadata.
4. Post to social media and see the magic!

Set the scene in 3D in Three.js

I started with the boilerplate from the Three.js GitHub page, which puts a rotating cube in front of the camera. Since we’re in 360, we want to put geometry at the following locations in our test scene so that there’s something to look in each of the major directions: front, behind, above, below, left, and right. I changed the geometry to a…