VideoTexture as envMap doesnt work

Questions
, , ,
1

I am trying to use video texture as env map but all i got is black color, alltough this video texture works fine as just map

        const videoDom = document.querySelector('.video');
      
        this.texture1 = new THREE.VideoTexture(videoDom);

        this.texture1.mapping = THREE.EquirectangularReflectionMapping
        this.texture1.generateMipmaps = false;
        this.texture1.magFilter = THREE.NearestFilter;
        this.texture1.minFilter = THREE.NearestFilter;

        const box = new THREE.Mesh(
            new THREE.BoxGeometry(4, 4, 4),
            new THREE.MeshBasicMaterial({
                envMapIntensity: 1,
                combine: THREE.MixOperation,
                reflectivity: 1,
                envMap: this.texture1,
                
            })
        );

      this.scene.add(box)

can not understand what am i doing wrong? Help please

2

I noticed that in latest three.js versions equirectangular map don’t used immediately - it is re-rendered to the cubemap before. Therefore you need to use custom shader code in your materials from earlier versions of three.js… Or simply use an earlier version.

3

it actually doesnt work with any mapping, and using an earlier version, doesnt fix this, i guess i am doing something wrong, but i can not understand what exactly

4

Maybe video from other domein? Is its cross-domain use allowed? Does the video have an correct crossorigin attribute?

5

You would have to use a very old version where PMREM was not integrated within the renderer.

1 Like
6

Since the OP uses MeshBasicMaterial, PMREM is unrelated.

The below PR changed the behavior in r120.

Equirectangular maps are still supported but only by converting them internally to the cube map format. However, video textures used as environment maps stopped working with built-in materials, see Make equirectangular reflections / refractions backwards compatible. by mrdoob · Pull Request #19911 · mrdoob/three.js · GitHub.

Since you are using MeshBasicMaterial, I suggest you implement a custom shader based on ShaderMaterial which can directly sample the equirectangular video texture.

2 Likes
7

i end up using version before 120 and it works, thank you very much! i am not really good at shaders, can u please give me a hint how to create effect same as envMap, i only can imagine how to just map texture to thing