stl文件加載的預加載方法

Question

在我的場景中，我有2個網格屬性。其中一個是創建的，另一個是stl文件。當我加載頁面時，只有我創建的網格可見。 stl文件中的下一個文件根本沒有顯示。

據我所知，加載文件和渲染mesh需要時間。爲了解決這個問題，我添加了一個setTimeout函數。它運作良好。

但在加載全部mesh之後調用renderer函數的正確方法是什麼？

例如：在jQuery中我使用$when().done() - 如何在這裏處理？

我的代碼：

$(function() { 

    var scene, camera, renderer; 

    var init = function() { 

     scene = new THREE.Scene(); 
     camera = new THREE.PerspectiveCamera (45, window.innerWidth/window.innerHeight, 0.1, 1000); 
     renderer = new THREE.WebGLRenderer(); 
     renderer.setSize(window.innerWidth, window.innerHeight); 
     renderer.setClearColor(0xEEEEEE); 

     var axes = new THREE.AxisHelper(20); 
     scene.add(axes); 


     var cubeGeometry = new THREE.BoxGeometry(4, 4, 4) 
     var cubeMaterial = new THREE.MeshBasicMaterial({color: 0xff0000}); 

     var cube = new THREE.Mesh(cubeGeometry, cubeMaterial); 
     cube.position.x = -4; 
     cube.position.y = 3; 
     cube.position.z = 0; 
     scene.add(cube); 

     camera.position.x = -30; 
     camera.position.y = 40; 
     camera.position.z = 30; 
     camera.lookAt(scene.position); 

     var loader = new THREE.STLLoader(); 

     loader.load('stl/model.stl', function (geometry) { 

      var material = new THREE.MeshPhongMaterial({ color: 0xffffff }); 
      var mesh = new THREE.Mesh(geometry, material); 
      mesh.position.set(0, - 0.25, 0.6); 
      mesh.rotation.set(0, - Math.PI/2, 0); 
      mesh.scale.set(0.5, 0.5, 0.5); 
      mesh.castShadow = true; 
      mesh.receiveShadow = true; 
      scene.add(mesh); 

     }); 

     setTimeout(function() { 

      $('#webGL').append(renderer.domElement); 
      renderer.render(scene, camera) 

     }, 100) 

    } 

    function render() { 



    } 

    init(); 

}) 

Answer 1

一個正確的做法是，你已經使用的回調函數。當加載器加載模型執行 回調，只要將你的渲染調用它：

loader.load('stl/model.stl', function (geometry) { 
    // this is the callback function 
    // do some stuff with your model 
    scene.add(mesh); 
    renderer.render(scene, camera); 
}); 

在three.js所也有加載經理，看到我在這裏左右預緊OBJ + MTL其他職位： Preloading Obj+Mtl Objects in Three.js。

加載與經理：

var manager = new THREE.LoadingManager(); 
manager.onProgress = function (item, loaded, total) { 
    // this gets called after an object has been loaded 
}; 
manager.onLoad = function() { 
    // everything is loaded 
    renderer.render(scene, camera); 
}; 

var loader = new THREE.STLLoader(manager); 

loader.load('stl/model.stl', function (geometry) { 

    var material = new THREE.MeshPhongMaterial({ color: 0xffffff }); 
    var mesh = new THREE.Mesh(geometry, material); 
    mesh.position.set(0, - 0.25, 0.6); 
    mesh.rotation.set(0, - Math.PI/2, 0); 
    mesh.scale.set(0.5, 0.5, 0.5); 
    mesh.castShadow = true; 
    mesh.receiveShadow = true; 
    scene.add(mesh); 

});