Three.js从ObjLoader操作对象

Question

我试图操纵一个使用OBJLoader在Three.js中加载的对象(例如改变位置、比例、旋转)。虽然这一次很容易做到，但当我想要的时候，例如在动画循环期间，或者在初始加载回调之外的任何地方，我都无法解决如何做到这一点。

这是我的代码：

function loadObj( path, name )
{
    var obj;
    var mtlLoader = new THREE.MTLLoader();
    mtlLoader.setPath( path );
    mtlLoader.load( name+".mtl", function( materials ) {
        materials.preload();

        var objLoader = new THREE.OBJLoader();
        objLoader.setMaterials( materials );
        objLoader.setPath( path );
        objLoader.load( name+".obj", function( object ) {
            obj = object;
            obj.position.x = 20;
            scene.add( obj );
        });
    });
    return obj;
}

var myObj = loadObj( "assets/", "test" );

myObj.position.y = 20;

这里要注意的要点是：

• 我可以加载它并在循环中很好地操作它，并且不会引发错误；
• 如果我这样做，我将得到最后一行的一个错误，它声明：Cannot read property 'position' of undefined。
• 如果我将obj定义在函数外部(作为全局函数)，然后相应地引用它，则此错误仍然存在。

我在JSON加载程序中尝试了类似的代码，获得了相同的结果(我能够在加载中操作它，但在加载之后就不能了)。

Answer 1

THREE.js中的加载器是异步的，因此最好的解决方法是简单地使用Promise，或者使用新的等待。这是承诺的实现。我只需将所有THREE.js加载程序代码包装在承诺中，并在最后调用resolve。然后，只要在异步请求完成时使用.then执行即可。

​

function loadObj( path, name ){
  
  var progress = console.log;

  return new Promise(function( resolve, reject ){
  
    var obj;
    var mtlLoader = new THREE.MTLLoader();
    
    mtlLoader.setPath( path );
    mtlLoader.load( name + ".mtl", function( materials ){
    
        materials.preload();
        
        var objLoader = new THREE.OBJLoader();
        
        objLoader.setMaterials( materials );
        objLoader.setPath( path );
        objLoader.load( name + ".obj", resolve, progress, reject );
        
    }, progress, reject );
   
  });
  
}

// This way you can use as many .then as you want

var myObjPromise = loadObj( "assets/", "test" );

myObjPromise.then(myObj => {
  
  scene.add( myObj );
  
  myObj.position.y = 20;
  
});

​

Update纠正了一个小错误，即它将reject而onProgress。我的缺点，再读一遍THREE.js文档，注意到load的顺序是url, onSuccess, onProgress, onError，所以最终应该是url, resolve, () => {}, reject。