加載 three.js 資產時如何刪除 p5.js 實例？

Question

我正在將 three.js gltf 文件加載到我的頁面上，並且想使用 p5 草圖作為預加載 animation。 這是我制作的一個簡單的 animation，因此在重載 gltf 時應該可以正常使用。 目前我正在使用我的加載管理器來設置一個 boolean 觸發器，但它根本不會被三個 js 觸發。

這是一些說明交互的示例代碼。

P5

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

3js ，在 function 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處理程序，因此當loadSketch運行時setBool仍然為 false。 要解決此問題，您可以讓onLoad處理程序直接調用.remove() function，或者如果您不想緊密耦合這些東西，您可以將回調 function 傳遞給您的main ZC1C4252078E68384F1AB457A。 另一個更笨拙的解決方案是使用setInterval反復調用setBool 。 只是不要嘗試使用 while 循環來等待loadSketch為真，因為這會導致頁面凍結（javascript 是單線程的）。

第二個問題是myp5變量的 scope。 它在playSketch function 中聲明，因此setBool function 無法訪問它。

注意：如果您在問題中包含一個包含最小可重現示例的可運行片段，那么在答案中向您顯示修復會更容易。

Answer 2

我的錯誤沒有指定：

const gltfLoader = new GLTFLoader(manager);

實例化我的加載器時（呃。）。