if (child.name === "Computer") {    
   child.children[1].material = new THREE.MeshBasicMaterial({       
      map: this.resources.items.screen,     
   }); 
}

For example in this scenario i need to add different screens on scroll of different sections of page

How to achieve it?

if (child.name === "Computer") {    
   child.children[1].material = new THREE.MeshBasicMaterial({       
      map: this.resources.items.screen,     
   }); 
}

For example in this scenario i need to add different screens on scroll of different sections of page

How to achieve it?

• javascript
• reactjs
• deployment
• three.js
• vite

1 Answer 1

You just have to update it once you change the map. It would be better if you create the material first, outside any function and surly out side the for loop, the apply it like:

const myMaterial = new THREE.MeshBasicMaterial({
  map: this.resources.items.screen,
});


if (child.name === "Computer") {
  child.children[1].material = myMaterial;
} 

And once you update this.resources.items.screen, you can do this:

myMaterial.needsUpdate = true;

Ref: https://threejs./docs/#api/en/materials/Material.needsUpdate