I have developed this 360 Virtual Tour. Now I am working on optimization. I am facing lags after switch from one image to another. I have implemented same code as this Three.js Example.
Any suggestion would be appreciated. I am beginner in Three.js. Let me know if you need more details about the issue.
Is it possible to share your application without minified code? I guess you app-level code is in 360Viewer.min.js, right? It would be great if you host the application just with 360Viewer.js for debugging purposes.
Can you try to change your animation loop to something like:
function animate() {
requestAnimationFrame(this.animationLoop);
this.stats.begin();
this.update();
this.stats.end();
}
The idea is to avoid the creation of a new function when calling requestAnimationFrame(). animationLoop is a new member variable with the value this.animate.bind(this) which is set in the constructor.
I made suggested changes, There is an improvement in FPS rate.
requestAnimationFrame(this.animationLoop);
was throwing error as its not a callback function.
Uncaught (in promise) TypeError: Failed to execute ‘requestAnimationFrame’ on ‘Window’: The callback provided as parameter 1 is not a function.
Should I define animationLoop? Also I changed it to below code which is same as my earlier code, just not the ES6 version. I had to write this to avoid error.