Youtube Video as Texture

10

If you’d like to make certain scene object types act as a trigger for video textures fetched from external sources, then body-end.html seems like the best way to go.

I’ve sketched a sample script showing how to do it in the “example-room” scene. Please make copy the vanilla “example-room” scene from C:\Users\<USER>\AppData\Local\Shapespark\app-<VER>\resources\ under a different name in the Document\Shapespark directory, and add the following body-end.html file:

<script>
  const viewer = WALK.getViewer();

  viewer.setMaterialEditable('Curtain fabric');
  viewer.setMaterialEditable('Rug');
  
  function createVideoTexture(src, muted, loop) {
    const video = document.createElement('video');
    video.src = src;
    video.autoplay = false;
    video.muted = muted;
    video.loop = loop;
    return viewer.createTextureFromHtmlVideo(video);
  }
  
  function setUpExternalVideoTexture(triggerNodeTypeName, materialName,
                                     videoSrc, muted, loop) {
    let videoTexture = null;
    viewer.onNodeTypeClicked(triggerNodeTypeName, function() {
      // Create the video texture only once.
      if (!videoTexture) {
        videoTexture = createVideoTexture(videoSrc, muted, loop);
        const material = viewer.findMaterial(materialName);
        material.baseColorTexture = videoTexture;
      }
      if (!videoTexture.isPlaying) {
        videoTexture.play();
      } else {
        videoTexture.pause();
      }
      viewer.requestFrame();
      return true;
    });
  }

  setUpExternalVideoTexture('Rug', 'Rug', 'https://cdn0.shapespark.com/demo/ASSETS/textures/dots-video.mp4', false, true);
  setUpExternalVideoTexture('Curtain A', 'Curtain fabric', 'https://cdn0.shapespark.com/demo/ASSETS/textures/lines-video.mp4', false, true);
</script>

When you click the curtains or the rug the original texture will be replaced with a video texture from external source.

That said, I’d first try to use video textures from the scene, as you write in Triggers, video textures and model accessibility - #3 by ville . I believe paused textures shouldn’t consume much memory or computational resources, even after they have been loaded.

3 Likes