Videos on GLTF

🧑‍💻 Technical Support
, ,
1

is there a way to put videos on glb? i have a project in which i need a lot of animations and a video inside that model.
i can incrust that video on a plane, but how do you manage the activation time so it coincides with the model animation?

2

Check out this sample project - it apples video textures to GLB models:

If you went down the video on a plane route (positioned relative to the 3d model) then in your javascript code you could, for example, add the animation-mixer component to your model and call play() on the video at the same spot in your code

Also, the animation-mixer component emits events when a loop is finished, or the entire animation is finished. You could implement callbacks that manipulate your video at that time.

3

Here is a simple component from the sample project shared that plays a video on the entire mesh of a 3D model.

AFRAME.registerComponent('video-texture', {
  schema: {
    'video': {type: 'string'},
  },
  init() {
    const video = document.querySelector(this.data.video)
    const texture = new THREE.VideoTexture(video)
    video.play()
    const applyVideoMaterial = (mesh) => {
      if (!mesh) {
        return
      }
      if (mesh.material) {
        // replaces every material that can take a diffuse map with video texture
        mesh.material.map = texture
      }
      mesh.traverse((node) => {
        if (node.isMesh) {
          node.material.map = texture
        }
      })
    }
    this.el.addEventListener(
      'model-loaded', () => applyVideoMaterial(this.el.getObject3D('mesh'))
    )
  },
})

Then add it to your 3D model like so:

    <a-entity
      id="model"
      gltf-model="#yourModel"
      video-texture="video: #your-video">
    </a-entity>

also make sure your video is muted via your assets. Something along the lines of

   <video
      id="my-video"
      muted
      autoplay
      playsinline
      crossorigin="anonymous"
      loop="true"
      src="./assets/video.mp4"></video>
1 Like