Trying to run a video texture on a box


I’m trying to make a simple code in my codepen, where I run a video texture by url on a box.

I followed all the exemples I could found about the topic, but for some reason the video wouldn’t play, and I’m facing much touble to find what I’m doing wrong.

I would be very grateful if someone could help me :slight_smile:

my codepen link:

Your getVT function was returning the video DOM element, not the video texture.

There were some other minor issues too. See code below.

Fixed code:

// Create a PlayCanvas application
var canvas = document.getElementById("application-canvas");
var app = new pc.Application(canvas, {});

// Fill the available space at full resolution

// Create box entity
var cube = new pc.Entity();
cube.addComponent('model', {
    type: "box", 

var meshCube = cube.model.meshInstances[0].material;
meshCube.emissiveMap = getVT();
meshCube.diffuse = new pc.Color(0,0,0);
//meshCube.useLighting = false;
//meshCube.emissiveMap = getVT();

// Create camera entity
var camera = new pc.Entity();
camera.addComponent('camera', {
    clearColor: new pc.Color(0.1, 0.2, 0.3)

// Create directional light entity
var light = new pc.Entity();

// Set up initial positions and orientations
camera.setPosition(0, 0, 3);
light.setEulerAngles(45, 0, 0);

// Resize the canvas when the window is resized
window.addEventListener('resize', function () {
    app.resizeCanvas(canvas.width, canvas.height);

// video texture implementation
function getVT(){
   var app =;
   var video = document.createElement('video');
    video.loop = true;
    video.muted = true;
    video.playsInline = true;
    video.crossOrigin = "anonymous";
    // Make sure that the video is in view on the page otherwise it doesn't
    // load on some browsers, especially mobile
      "display: block; width: 1px; height: 1px; position: absolute; opacity: 0; z-index: -1000; top: 0px; pointer-events: none"
  // Create a texture to hold the video frame data
    var videoTexture = new pc.Texture(app.graphicsDevice, {
        format: pc.PIXELFORMAT_R8_G8_B8,
        minFilter: pc.FILTER_LINEAR_MIPMAP_LINEAR,
        magFilter: pc.FILTER_LINEAR,
        addressU: pc.ADDRESS_CLAMP_TO_EDGE,
        addressV: pc.ADDRESS_CLAMP_TO_EDGE,
        mipmaps: true

    video.addEventListener('canplaythrough', function() {
    // set video source
    video.src = '';

    var upload = false;
    var time = 0;
    app.on("update", function (dt) {
      time += dt;

      // Upload the video data to the texture every other frame
      upload = !upload;
      if (upload) {
  return videoTexture;
1 Like

thank you so much!

Still…I’m just a little confused about the importance of emissiveMap and diffuse

TLDR, emissiveMap is a texture mapping that ignores lighting. Diffuse is affected by lighting so to avoid the material looking blown out, its set to black.

1 Like

I see
Thanks a lot for the help :slight_smile: