Changing dynamically emissiveMap texture of gltf object

Questions
,
1

Hi, I exported glb object from Blender which has image emission:

Screenshot 2023-02-25 201710
Screenshot 2023-02-25 2017101353×1065 122 KB

It all works fine, but is it possible to dynamically change image that’s being used on emissive mesh, for now I tried this but it doesn’t seem to work:

gltfLoader.load(
    './ipad3.glb',
    gltf => {
        scene.add(gltf.scene)
        gltf.scene.traverse(item => {
            if (item.name === "Screen"){
                btn.addEventListener("click", () => {
                    const map = imageBitmapLoader.load("./wallpaper.jpg", imageBitmap => {
                        console.log(imageBitmap)
                        item.material.emissiveMap.source.data = imageBitmap
                    })
                })
            }
        })

    }
)

I want when I click on button for image being used in emissiveMap to change. Is this thing even possible to do?

2

Your code looks close to right, but I’d suggest using TextureLoader instead of ImageBitmapLoader, at least until you’ve got things working. You’ll also need to reassign item.material.emissiveMap rather than modifying data within it. Should be something like this:

const textureLoader = new THREE.TextureLoader();

...

textureLoader.load('./wallpaper.jpg', (texture) => {
  texture.encoding = THREE.sRGBEncoding;
  texture.flipY = false;
  item.material.emissiveMap = texture;
});
2 Likes