Image not refreshing in a scene. I am using Javascript, Three, and CSS3DRenderer on my client within Chrome. I have embedded an image in a scene via a THREE.Object3D. When the image is updated on the server, it does not update in the scene. I have implemented a cache-breaking technique and confirmed that the browser cache is being updated. Here is a summary of the code:
var camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 1, 10000);
var scene = new THREE.Scene();
var renderer = new THREE.CSS3DRenderer();
var controls = new THREE.TrackballControls(camera, renderer.domElement);
var element = document.createElement('div');
var img = document.createElement('img');
img.src = images[i].src+'?t='+new Date().getTime(); // utilizing cache-busting technique
element.appendChild(img);
var object = new THREE.CSS3DObject(element);
scene.add(object);
The initial display of the image works perfectly fine. However, when I update the image on the server with the cache-busting technique, no changes occur in the scene. I've attempted to refresh the scene with various statements like:
scene.remove(x);
scene.add(x);
camera.updateProjectionMatrix(); // did not have any noticeable effect
renderer.render(scene, camera); //
If anyone has any insights or solutions, they would be greatly appreciated. Thank you.