I encountered an issue while using three.js alongside tween.js. The problem arises when the timer for a tween.js animation begins before the texture of a sphere is actually displayed.
Currently, I am developing a panorama viewer with three.js specifically for Firefox. In this viewer, different panorama images are mapped onto spheres with the camera positioned at the center. Users can virtually navigate between rooms by switching between these spheres, each displaying a unique texture. When transitioning to a new room, an animation utilizing tween.js dims the light before illuminating it again with the new image.
The challenge lies in the delay experienced when loading and displaying an image for the first time in a room. Since the image is not preloaded into memory, there is a noticeable lag before it appears on screen.
This delay wouldn't pose a problem if the room stayed dark until the entire panorama was loaded and ready for display. However, the tween.js animation kicks in before the image is fully rendered.
As a result, instead of a gradual lighting effect as intended, the new panorama briefly appears and then the light abruptly switches on without any animation. The animation duration is set to 500 ms, which aligns with the time taken to load the panorama image.
Is there a way to determine if a texture has been rendered so that I can synchronize the animation accordingly?
The version of Three.js being used is r71.
//after dimming the light, switch panorama and illuminate scene
tweenDarkenLight.onComplete( function() {
roomModule.setRoomVisible(); //reveals new room
tweenEnhanceLight.start(); //initiates illumination animation
});
All textures for the panoramas/rooms are preloaded and attached to spheres upon launching the application. However, they remain hidden until a user selects them.
texture = new THREE.Texture();
loader = new THREE.ImageLoader( manager );
//the URL for each panorama is stored in roomAssetArray
loader.load( roomAssetArray.panorama,
function ( image ) {
texture.image = image;
texture.needsUpdate = true;
});