等到装载完成

时间:2018-06-07 14:00:12

标签: javascript three.js

大家好,我现在有点卡住了。

我的问题是,在我的所有对象都被加载之前,我回到了起点。

创建我的架子后,我计算一个我需要计算我的对象的位置和平移的边界框。但是因为我回到了早期,我无法计算我的边界框,它说一切都是0或无穷大。 所以我需要一种等待一切都装满的方法。 我认为装载机上的onload部分可以做到,但它不起作用。

以下是我的代码的相关部分:

在我的init中我调用了一个函数

let shelf = this.creators.createShelf(parts);

我的创作者类构建一个对象

createShelf(parts) {

  let shelf= new THREE.Mesh();
  let mesh: THREE.Mesh;
  let props;
  for (let part of parts) {
    if (part.model == true) {
      let loadObject = this.helpers.loadObject(part);
      shelf.add(loadObject);
      // do stuff
      return shelf;

现在我加载一个用ObjectJoader为ThreeJS创建的3d对象

 loadObject(props: Object3D) {

    let object = new THREE.Mesh();
    let modelLoader = new THREE.ObjectLoader();
    modelLoader.load(part.modelObjPath,
        // onload
        function (obj) {
            // do stuff to the Object
            object.add(obj);  
        },
        function (xhr) {
            console.log( (xhr.loaded / xhr.total * 100) + '% ' + part.name + ' loaded' );
        },
        function (xhr) {
            console.error( 'An error happened' );
        }
    );
    return object;
}

我的边界框创建Box3或BoxHelper返回:

let box = new THREE.Box3().setFromObject(shelf);

bb object 
Ta {min: p, max: p}
max:
p {x: -Infinity, y: -Infinity, z: -Infinity}
min:
p {x: Infinity, y: -Infinity, z: -Infinity}

我希望我能解释一下我被困在哪里。

感谢您对此进行调查。

1 个答案:

答案 0 :(得分:0)

文档已经有了答案:https://threejs.org/docs/#api/loaders/managers/LoadingManager

您可以将管理器传递给所需数量的项目,使其成为一个方便的类,用于在操作场景和资源之前等待所有对象和项目加载。然后,您可以指定在开始,进度和onLoad期间要执行的操作。当传入经理的所有项目都已加载时,onLoad将触发。

var 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!');

};


manager.onProgress = function ( url, itemsLoaded, itemsTotal ) {

    console.log( 'Loading file: ' + url + '.\nLoaded ' + itemsLoaded + ' of ' + itemsTotal + ' files.' );

};

manager.onError = function ( url ) {

    console.log( 'There was an error loading ' + url );

};

var loader = new THREE.OBJLoader( manager );
loader.load( 'file.obj', function ( object ) {

    //

} );