Skip to content

360 Videos in Hubs

360 images edited in Blender have been used to great effect in the Mozilla Hubs community but did you know this functionality is (sort of) built into Hubs already?

Spoke and the Blender Add-on has options to project textures onto spheres. These options inspired me to add an in-room convert image to 360 feature to my custom client and is a neat trick the Hubs client can do but what about 360 video?

Someone made this great template if you are just looking for an easy way to show your video with webXR and deploy it really quickly: 360 video template (spoke).

Although the Hubs client code doesn’t currently support equiangular-to-cube map conversion or stereo 360 videos, it should be possible to use three.js for this purpose. If you know of any examples in the wild, please share them with me.

Things to Consider with 360 Video Created this Way in Hubs

  1. Projection with Blender and Spoke: You can project the video to a 360 view with options in Blender and Spoke with the projection properties.

    Projection Blender
  2. Video Controls Accessibility: If you enable video controls, they are not very accessible from inside the sphere by default. Great opportunity for a plug-in here!

    video controls spoke
  3. Cursor Hover Effect: The video is subject to the cursor hover effect and this is why it appears to dim when hovered on desktop.

Here is a quick sample scene to check out so you can see what all this looks like:

The trick:

if (projection === "360-equirectangular") {
        geometry = new THREE.SphereBufferGeometry(1, 64, 32);
        // invert the geometry on the x-axis so that all of the faces point inward
        geometry.scale(-1, 1, 1);

        // Flip uvs on the geometry
        if (!texture.flipY) {
          const uvs = geometry.attributes.uv.array;

          for (let i = 1; i < uvs.length; i += 2) {
            uvs[i] = 1 - uvs[i];