How can I update a Three.js object's texture based on scroll sections?

Below is an example of how you could update the computer screen texture based on the scroll position. In this example, we assume that you’ve loaded several screen textures into your resources (for instance, screen1, screen2, etc.) and that your page is divided into sections (or you calculate scroll percentage) to decide which screen to display.

Below is one possible implementation:

JAVASCRIPTCopied
// Example: Assume you have three different screen textures loaded in your resources
// this.resources.items.screen1, this.resources.items.screen2, this.resources.items.screen3

// A function that determines which texture to use based on scroll position
function updateScreenTexture(child) {
  // Get current scroll position relative to the total scrollable height
  const scrollTop = window.scrollY;
  const windowHeight = window.innerHeight;
  const totalScrollHeight = document.body.scrollHeight - windowHeight;
  
  // Calculate a percentage value (0 to 1) for the current scroll position
  const scrollPercent = scrollTop / totalScrollHeight;

  // Decide which texture to use based on scroll percentage
  let newTexture;
  if (scrollPercent < 0.33) {
    newTexture = this.resources.items.screen1;
  } else if (scrollPercent < 0.66) {
    newTexture = this.resources.items.screen2;
  } else {
    newTexture = this.resources.items.screen3;
  }

  // Update the texture on the computer screen material and mark material for update
  if (child.name === "Computer") {
    child.children[1].material.map = newTexture;
    child.children[1].material.needsUpdate = true;
  }
}

// Listen for scroll events
window.addEventListener('scroll', function() {
  // Assuming "child" is available in this scope; if not wrap this in the appropriate context
  updateScreenTexture(child);
});

Explanation

• Scroll Calculation:
  The code calculates the current scroll percentage by dividing the current scroll position (scrollTop) by the total scrollable height.

• Texture Selection:
  Depending on the scroll percentage, a different texture is chosen. You can adjust the thresholds (0.33 and 0.66 in this example) or even use more sections based on your needs.

• Updating the Material:
  When the computer object is identified (child.name === "Computer"), the texture on its screen (assumed to be child.children[1]) is updated. The material.needsUpdate = true; statement forces the Three.js renderer to apply the change.

• Event Listener:
  A scroll event listener is added on the window to call the update function every time the user scrolls.

You can extend this logic further by using more precise section detection (for example, using the Intersection Observer API) if needed, especially if your sections are not strictly based on scroll percentage.

This approach ties together your Three.js scene change with JavaScript's scroll events to give you dynamic control over the textures based on the user's scroll interaction.