Hello there. For learning purpose I’m working on a project where I decided to introduce a videoTexture as texture for my TV mesh, in order to render a video on it (thought it would be cool).
I’ll start saying that I have been working with three.js for less than a month,so this could totally be a school boy error.
This being said, here it is my code:
videoTexture = new THREE.VideoTexture( video );
videoTexture.minFilter = THREE.LinearFilter;
videoTexture.magFilter = THREE.LinearFilter;
videoTexture.format = THREE.RGBFormat;
boundingBoxTV = new Physijs.BoxMesh( new THREE.BoxGeometry(1,1,1), new THREE.MeshBasicMaterial({map : videoTexture}), 0 );
boundingBoxTV.material.visible = true;
boundingBoxTV.receiveShadow = true;
boundingBoxTV.castShadow = true;
boundingBoxTV.position.set(-26.5,20.35,0.7);
boundingBoxTV.scale.set(1,5.69,9.8);
scene.add(boundingBoxTV);
While in my html file I have a simple:
< video id=“video”>
< source src=“MyVideo.mp4” type=“video/mp4”>
< /video>
And it’s frozen at the very first frame of the video.
In the render video Im calling the following function(here I’m not totally sure of its correctness): videoTexture.update();
(p.s. it says that this .update() method is deprecated but I’m getting no warning about it and searching through the web I couldn’t really find a substitute so I decided to go with it)
Is anyone able to help me? Have been stuck here for a while, I would really appreaciate a help! Thanks in advise:)
Just noticed that the video in the VideoProjection example is no longer running. Neither in the fiddle @Mugen87 nor in my version. In my version the copied three.js version
…/js/three.min.93.js has not been changed. If you call the video directly with the address, both the .ogv and the .mp4 version will run.
Are there any changes in the browsers since 2018? I do not usually deal with this topic.
first of all, thank you both for spending your time answering me,I appreciate that:)
I have been looking the videoProjection example code,and it’s confusing me even more because I’m doing exactly the same things done in that code.
I’m creating the texture,setting it to the material.
The only main difference is that in that example there is not .update() called anywhere… thought it was needed. I have tested it without that videotexture.update() in the render function,and nothing changed.
So my questions are the following:
-Do you confirm me that I don’t need to call any update anywhere? I ask this because the freezing frame on the videoTexture makes me thing that I need to update it somehow.
-All this being said, do you have any clue on why the videotexture I’m using is freezing, considering how similar the code I wrote and the example are?
I specify that the video I’m trying to use as videotexture is not too big, being a 6 seconds video.
Any idea on how to go further with this?
UPDATE: removing the loop and leaving only the autoplay,the video starts! Huge steps
Though,right now, the problem is that once the video is finished, it just got stucked because it does not “loop” itself.
The loop makes pop those errors though. Any help? We are on the right path!
2° UPDATE: trying to get some results I tried re-adding the loop word after the autoplay, and now the error has disappeared. I tried to recreate the error but I didn’t managed to do it,sadly. It looked like a one-time-thing.
We can consider this closed,and the solution will be considered the following(I’ll rewrite what @seanwasere suggested) :
Adding the autoplay loop in the html allowed the video been played.
<video autoplay loop>
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
