Request Support for videosphere/360 images/skyboxes background in Studio

[XRDev_IceCubes]

Hi,

It would be a great addiction for Studio to have motion-enabled videospheres and 360-images sphere/skyboxes like the old A-Frame / Three.js based projects like

360 Livestream Portal | 8th Wall Playground | 8th Wall

and

three.js: Sky Effects | 8th Wall | 8th Wall

(which are now available only to paid subscriptions).

The door-portal is a Studio project quite similar to what I mean, but it uses a Splat instead of a 360 image - which is nice, but you might not have a splat to use and sometimes you just want to use a 360 still image linked to accelerometer motion.

[GeorgeButler]

Hi, welcome to the forums!

I was able to replicate this by creating a Sphere and setting the material to have the texture I want to display and setting the face mode to back.

[XRDev_IceCubes]

THANKS! Going to experiment with this

[XRDev_IceCubes]

Hi George, I started a thread on Discord on this stuff, I think it can be of general interest

[XRDev_IceCubes]

Just for the records: I replicated it. World Effects template, add a sphere, make it big, revert normals by setting the material to “Back”, disable SLAM in Camera so you are always at the center of the sphere, assign a 360 image to the sphere material.

[GeorgeButler]

For visibility: Here’s how I would add a VideoTexture to the sphere as a Custom Component. Until we get video support.

import * as ecs from '@8thwall/ecs'

ecs.registerComponent({
  name: 'Video Sphere',
  schema: {
  },
  schemaDefaults: {
  },
  data: {
  },
  // add: (world, component) => {
  // },
  // tick: (world, component) => {
  // },
  // remove: (world, component) => {
  // },
  stateMachine: ({world, eid, schemaAttribute, dataAttribute}) => {
    const {THREE} = window as any
    const video = document.createElement('video')
    video.setAttribute('playsinline', '')
    video.setAttribute('crossOrigin', 'anonymous')
    video.setAttribute('src', 'YOUR-URL-HERE')
    const texture = new THREE.VideoTexture(video)
    texture.colorSpace = THREE.SRGBColorSpace

    ecs.defineState('default')
      .initial()
      .onEnter(() => {
        video.play()
      })
      .onTick(() => {
        const object3D = world.three.entityToObject.get(eid)

        object3D.traverse((child) => {
          if (child.material) {
            child.material.map = texture
            child.material.emissiveMap = texture
            child.material.needsUpdate = true
          }
        })
      })
      .onExit(() => {
        video.pause()
      })
  },
})