Three.js texture / image update at runtime
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
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;