Three.js texture / image update at runtime

Question

I am trying to change a cube image at run time by selecting an option from Select Form element. When running the code, the image changes after selecting, but the previous cu

Answer 1

Complete Example With Loader:

First, create your mesh and apply any material

//Add SPHERE
this.earthMesh = new THREE.Mesh(
  new THREE.SphereBufferGeometry(3, 35, 35),
  new THREE.MeshPhongMaterial()
);
this.scene.add(this.earthMesh);

Now Load your Texture image and apply it on the mesh material

//LOAD TEXTURE and on completion apply it on SPHERE
new THREE.TextureLoader().load(
  "https://images.pexels.com/photos/1089438/pexels-photo-1089438.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260",
  texture => {
    //Update Texture
    this.earthMesh.material.map = texture;
    this.earthMesh.material.needsUpdate = true;
  },
  xhr => {
    //Download Progress
    console.log((xhr.loaded / xhr.total) * 100 + "% loaded");
  },
  error => {
    //Error CallBack
    console.log("An error happened" + error);
  }
);

Progress and Error Callbacks are optional

Answer 2

On select change you can update your existing mesh texture, don't need to remove or create new mesh :

mesh.material.map = THREE.ImageUtils.loadTexture( src );
mesh.material.needsUpdate = true;