Adding video texture results in Error

Questions
, , , , , ,
1

Hey,
when I add a video texture to my plane (created in Blender, imported to three.js/editor, exported as gltf) I get an error. The whole project is working with images as texture but as soon as I add a video as texture the error below appears.
Any idea how to fix that?

creating / adding material script.js

let video = document.getElementById("video");
video.load();
video.play();
let videoTextureCard = new THREE.VideoTexture(video);
videoTextureCard.minFilter = THREE.LinearFilter;
videoTextureCard.magFilter = THREE.LinearFilter;
videoTextureCard.needsUpdate;
videoTextureCard.format = THREE.RGBFormat;
videoTextureCard.crossOrigin = "anonymous";

var movieMaterial = new THREE.MeshLambertMaterial({
  map: videoTextureCard,
  // side: THREE.FrontSide,
  // toneMapped: false,
});

renderer


const clock = new THREE.Clock();
function animate() {
 
  if (mixer) mixer.update(clock.getDelta());

  renderer.render(scene, camera);
 
}

updateCameraAspect(camera);
renderer.setAnimationLoop(animate);

index.html

<video
      id="video"
      playsinline
      webkit-playsinline
      loop
      autoplay
      width="1000"
      height="1000"
      src="./assets/textures/allgemein-front-card.mp4"
      style="display:none"
      muted="muted">
    </video>

errors

THREE.WebGLProgram: Shader Error 0 - VALIDATE_STATUS false

Program Info Log: Vertex shader is not compiled.

VERTEX

ERROR: 0:370: 'uvundefined' : undeclared identifier
ERROR: 0:370: 'constructor' : not enough data provided for construction

365: void main() {
  366: #ifdef USE_UV
  367: 	vUv = vec3( uv, 1 ).xy;
  368: #endif
  369: #ifdef USE_MAP
> 370: 	vMapUv = ( mapTransform * vec3( MAP_UV, 1 ) ).xy;
  371: #endif
  372: #ifdef USE_ALPHAMAP
  373: 	vAlphaMapUv = ( alphaMapTransform * vec3( ALPHAMAP_UV, 1 ) ).xy;
  374: #endif
  375: #ifdef USE_LIGHTMAP
  376: 	vLightMapUv = ( lightMapTransform * vec3( LIGHTMAP_UV, 1 ) ).xy;

and this error is following:

Uncaught TypeError: Cannot read properties of undefined (reading 'elements')
    at Matrix3.copy (three.module.js:1157:16)
    at refreshTransformUniform (three.module.js:26956:17)
    at refreshUniformsCommon (three.module.js:27077:4)
    at Object.refreshMaterialUniforms (three.module.js:26999:4)
    at setProgram (three.module.js:29792:15)
    at WebGLRenderer.renderBufferDirect (three.module.js:28645:20)
    at renderObject (three.module.js:29344:11)
    at renderObjects (three.module.js:29313:6)
    at renderScene (three.module.js:29182:36)
    at WebGLRenderer.render (three.module.js:28987:5)

Thanks!

2

can someone help?

3

Just out of curiousity, what are these lines for?

The official example has just this:

texture = new THREE.VideoTexture( video );
texture.colorSpace = THREE.SRGBColorSpace;
4

I guess I copied some stuff I found online. I removed these 2 line but the error remains.

5

Then better to provide a minimal editable working code example, that demonstrates the issue (codesandbox, glitch or something similar)

6

Here is a link to the codesandbox

When you remove line 198 and un-uncomment line 199 you see that the working animation stops working as soon as the movieMaterial is added.

7

if

var movieMaterial = new THREE.MeshLambertMaterial({
  map: videoTextureCard,
  // side: THREE.FrontSide,
  // toneMapped: false,
});

why is it so

//frontCard.material.map = movieMaterial;

?

Material’s .map expects a texture, not a material.
So the line has to be frontCard.material.map = videoTexture;
or
frontCard.material = movieMaterial;

Moreover, to start the video, you need a user interaction. :thinking: Like in the official example, video starts after user clicks that PLAY button.

8

Ups,
I fixed it to:

frontCard.material = movieMaterial;

and the error is gone BUT even after adding video.play(); to line 295 the video is not shown on the object.
Any idea why it is still not working?
Thanks so much for your help so far!

9

The official example

10

It doesn’t necessarily have to be a button, but for some time now browsers have required a prompt user action to play videos. In the past, this was also possible without any interaction with the user.

An example where a slider is used:
BeginnerExample step 4
from the Collection of examples from discourse.threejs.org