Refresh the texture mapping within ThreeJS

Question

Refresh the texture mapping within ThreeJS

Hey there! Just wanted to share that I was able to find a solution by using

mesh.material.map.image.src = texture;

Here was the original question:

I'm working on a ThreeJS project and I'm trying to change the texture on a mesh. Unfortunately, I'm having trouble getting Three to update to the new texture.

I've already tried everything mentioned in similar questions on Stack Overflow, but nothing seems to be working so far:

three.js change texture on material
How to update texture in ThreeJS with loaded image data?
Three.js Update Texture image
Changing texture and color on Three.js collada object
and more...

The specific texture I'm trying to change is

scene.children[0].children[1].material.map.sourceFile

and the hierarchy looks like this:

SCENE scene
- 3DOBJECT banner
  - MESH flag
    - MESHBASICMATERIAL flag_M
      - TEXTURE flag_MT

The texture I want to update is flag_MT. Here are the methods I've attempted:

flag_M.needsUpdate = true;
flag_MT.needsUpdate = true;

flag_MT = THREE.ImageUtils.loadTexture(texture);

where texture is a base64 data string

basically recreating the entire object and replacing it in the scene

Thank you for any help.

Edit: Here are some key parts of the code:

init()

// Code snippet here

app.setFlagTexture()

// Another code snippet here

javascript three.js

Answer 1

Answer №1

In a recent project, I encountered a similar issue where it seems that your initial attempt should have actually worked: flag_M.needsUpdate = true;

An alternative approach would be to recreate a texture using ImageUtils like so:

flag_MT = THREE.ImageUtils.loadTexture(texture);

, followed by setting flag_M.needsUpdate = true;. This method might suffice for occasional updates, but may not be ideal if textures are frequently changed. In such cases, manually updating the image source within the Texture Object and setting the needsUpdate flag to true could be more efficient.

For instance, in my implementation, the following steps were taken:

mesh.material.materials[0].map.image = { data: array, width: 20, height: 20 };
mesh.material.materials[0].map.needsUpdate = true;

Here, mesh refers to a cube with a FaceMaterial, and array represents an Uint8Array buffer containing RGB data. It is advisable to optimize performance by avoiding unnecessary deletion and creation processes purely for texture updates, as they can be resource-intensive for both the GPU and bus bandwidth.

If you continue to face issues, consider sharing your code for further assistance, as your initial approach should have achieved the desired outcome.

Answer 2

In a recent project, I encountered a similar issue where it seems that your initial attempt should have actually worked: flag_M.needsUpdate = true;

An alternative approach would be to recreate a texture using ImageUtils like so:

flag_MT = THREE.ImageUtils.loadTexture(texture);

, followed by setting flag_M.needsUpdate = true;. This method might suffice for occasional updates, but may not be ideal if textures are frequently changed. In such cases, manually updating the image source within the Texture Object and setting the needsUpdate flag to true could be more efficient.

For instance, in my implementation, the following steps were taken:

mesh.material.materials[0].map.image = { data: array, width: 20, height: 20 };
mesh.material.materials[0].map.needsUpdate = true;

Here, mesh refers to a cube with a FaceMaterial, and array represents an Uint8Array buffer containing RGB data. It is advisable to optimize performance by avoiding unnecessary deletion and creation processes purely for texture updates, as they can be resource-intensive for both the GPU and bus bandwidth.

If you continue to face issues, consider sharing your code for further assistance, as your initial approach should have achieved the desired outcome.

Refresh the texture mapping within ThreeJS

Answer №1

Similar questions

Moving Rows Between AgGrids

jQuery's Offset().left is experiencing some issues and not functioning correctly

In React, the entire component refreshes every time the modal is opened

In TypeScript, an interface property necessitates another property to be valid

What causes the disparity in functionality between simple html and css in an Angular 2 project compared to a vanilla html website?

What steps can I take to stop Highcharts from showing decimal intervals between x-axis ticks?

Recursive sorting and parsing of JSON data with multiple levels

When executing the app.delete function, the req.body is found to be empty

What is the best way to make a container 100% tall and display a navigation bar?

What is the best way to flip the direction of the text input for a Calculator?

Easily Update Your Div Content by Simply Clicking a Single Link/Button

Node application experiencing issues retrieving SVG files during production

The Beauty of Organized Data: Understanding Multiple Columns in VUE JS Projects

When an attempt to make a POST request using fetch() is made, a TypeError: Failed to fetch error is immediately thrown instead of

The notify.js fails to display notifications in the event of an error

The URL in an AJAX request includes a repeating fragment due to a variable being passed within it

Patience is key while waiting for Meteor.loggingIn() to be false

Manipulate all vertex positions in a circular motion centered around a specific pivot point or axis using Three.js and GLSL

When working with Angular1+ ES6 and using controller as a class, the utilization of Dependency Injections may be ambiguous within controller functions

Toggle the visibility of dropdown list items in different ways: Add or Remove, or Show or