Query: What is the most efficient way to swiftly update a sphere's material texture map with images (stored in an HTML5 canvas) at intervals of 50ms to 200ms without causing browser performance issues?
I have a collection of panoramic images that need to be mapped onto a sphere and updated every 50ms to 200ms. While the code appears to be functioning properly, it struggles during execution - resulting in delayed or skipped redraws that take 2s to 3s to display.
Below is the mesh code along with the placeholder texture:
var geometry = new THREE.SphereGeometry(100.0, 64, 64);
var material = new THREE.MeshBasicMaterial({
map: THREE.ImageUtils.loadTexture(image_path), // placeholder
side: THREE.DoubleSide,
});
Upon triggering playPanos(0), the intent is to update the material texture map with the image drawn on an HTML5 canvas stored in an array called “loaded_canvas”:
function playPanos(curr_id) {
if (curr_id >= loaded_canvas.length) return;
paintPanos(curr_id);
setTimeout(function() {
playPanos(curr_id + 1);
}, 100); // update every 100ms
}
function paintPanos(curr_id) {
material.map = new THREE.Texture(loaded_canvas[curr_id]);
material.map.needsUpdate = true;
}
Thank you for your understanding as this code follows a prototype style approach.