The video is getting played inside out/ inverted

Questions
, ,
1

I have made a rough 3d model of the tv to play video on demand however i think the video is getting played inside out or inverted i am not able to make out


the relevant part of the code is
// Create a plane with video texture
const video = document.createElement(‘video’);
video.src = ‘…/tribute.mp4’; // Replace with your video file
video.crossOrigin = ‘anonymous’;
video.loop = false;
video.muted = false;

const videoTexture = new THREE.VideoTexture(video);
//const planeGeometry = new THREE.PlaneGeometry(16, 9); // Adjust the size accordingly
const planeMaterial = new THREE.MeshBasicMaterial({ map: videoTexture });
//const plane = new THREE.Mesh(planeGeometry, planeMaterial);
//scene.add(plane);

loader1.load(
‘tribute.glb’,
function (gltf) {
model = gltf.scene;
model.position.set(0, 0.01, 0);
model.traverse((child) => {
if (child.isObject3D) child.castShadow = true;
});

let child = model.getObjectByName( "screen", true );
child.material = planeMaterial;  

scene.add(model);
  
},
undefined,
function (error) {
  console.error('Error loading GLTF model:', error);
}

);

2

Not sure why is this happening, but try to unFlip the texture Y axis.
videoTexture.flipY = false;

3

Without a possibility to debug, I could only guess. It looks like the UV coordinates of the screen are making the video this way. Possible solutions are:

  • fix the UV coordinates of the screen (in the GLB file)
  • try to use rotate/repeat properties of the video texture (I’m no sure whether video textures support these properties)
  • draw the video on your own plane, positioned on top of the screen