javascript - How to change the video on scroll according to sections of the page - Stack Overflow

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

Share Improve this question Follow edited Feb 1 at 17:47 James Z 12.3k1010 gold badges2727 silver badges4747 bronze badges asked Feb 1 at 11:39 Yashraj TarteYashraj Tarte 3111 bronze badge

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 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.org/docs/#api/en/materials/Material.needsUpdate