如何在加载 three.js 资产时删除 p5.js 实例？

Question

我正在将 three.js gltf 文件加载到我的页面上，并想使用 p5 草图作为预加载动画。这是我制作的一个简单动画，因此在 gltf 负载很重时应该能正常运行。目前我正在使用我的加载管理器设置一个布尔触发器，但它根本不会被三个 js 触发。

下面是一些说明交互的示例代码。

P5

function playSketch(){
  var sketch = function(p){
      p.setup = function(){
        code;
      }
      p.draw = function(){
        code;
      }
  }
  var myp5 = new p5(sketch);
}

3js, 函数 main()

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();

不幸的是，这不起作用，setBool 没有被触发，草图继续运行。加载完成后如何删除我的 p5 实例？谢谢。

Answer 1

看起来有两个问题。第一个是在调用 main() 和 playSketch() 之后立即调用 setBool() 一次。 three.js LoadingManager 不太可能立即调用 onLoad 处理程序，因此当 setBool 运行时 loadSketch 仍然为假。要解决这个问题，您可以让 onLoad 处理程序直接调用 .remove() 函数，或者如果您不想紧密耦合这些东西，您可以将回调函数传递给 main 函数.另一个更笨拙的解决方案是用 setInterval 重复调用 setBool。只是不要尝试使用 while 循环来等待 loadSketch 为真，因为这会导致页面冻结（javascript 是单线程和全部）。

第二个问题是 myp5 变量的范围。它在 playSketch 函数内部声明，因此 setBool 函数无法访问它。

注意：如果您在问题中包含包含最小可重现示例的可运行代码段，那么在答案中向您展示修复会更容易。

Answer 2

我的错误是没有指定：

const gltfLoader = new GLTFLoader(manager);

在实例化我的加载程序时（呃！）。

如何在加载 three.js 资产时删除 p5.js 实例？

How to remove a p5.js instance when three.js assets load?

javascript

three.js

p5.js