I am trying to implement a preload animation using a p5 sketch while loading a three.js gltf file onto my webpage. The idea is to have the p5 animation play while the heavy gltf file loads in the background. However, I am facing issues with triggering the boolean trigger when using the loading manager in three.js.
Here's a snippet of code showcasing the interactions:
P5
function playSketch(){
var sketch = function(p){
p.setup = function(){
// Code for setup
}
p.draw = function(){
// Code for animation loop
}
}
var myp5 = new p5(sketch);
}
Three.js, inside the main() function
const manager = new THREE.LoadingManager();
manager.onStart = function ( url, itemsLoaded, itemsTotal ) {
console.log( 'Started loading file: ' + url + '.\nLoaded ' + itemsLoaded + ' of ' + itemsTotal + ' files.' );
};
manager.onLoad = function ( ) {
console.log( 'Loading complete!');
loadSketch = true;
};
manager.onProgress = function (itemsLoaded, itemsTotal ) {
console.log( 'Loading file: ' + '.\nLoaded ' + itemsLoaded + ' of ' + itemsTotal + ' files.' );
};
function setBool(){
if(loadSketch){
console.log('this works');
myp5.remove();
}
}
main();
playSketch();
setBool();
Unfortunately, the setBool function is not triggered as expected, and the p5 sketch continues running even after the loading is complete. How can I properly remove the p5 instance once the loading process is finished? Any help would be greatly appreciated. Thank you.