ThreeJS中如何将OBJLoader加载结果赋值给变量供动画调用

这是JavaScript异步执行逻辑导致的问题：

• Three.js的OBJLoader.load()是异步方法，调用后不会等待模型文件下载、解析完成，会立刻向后执行后续代码
• 你在回调函数外访问minObj时，模型还没加载完成，赋值操作minObj=obj还没执行，所以拿到的结果自然是undefined

你后续修改的代码已经是正确的实现思路，核心逻辑是保证只有模型加载完成、minObj完成赋值后，才执行调用minObj的动画逻辑，两种常用实现方式如下：

方式1：加载完成后再启动动画（就是你采用的方案） #

把requestAnimationFrame(animate)的触发逻辑放到加载完成的回调函数内，确保动画启动时minObj已经完成赋值：

function loadObjs () {
    minLoader.load(
        'models/min.obj',
        function (obj) {
            scene.add(obj);
            minObj=obj;
            // 加载完成后才启动动画
            requestAnimationFrame(animate);
        }
    );
};
function animate(time) {
    time *= 0.001;
    minObj.rotation.x = time * 0.5;
    minObj.rotation.y = time * 1;
    renderer.render(scene, camera);
    requestAnimationFrame(animate);
};
function winit () {
    canvasResize();
    loadObjs ();
};
window.addEventListener('load', winit, false);
window.addEventListener('resize', canvasResize, false);

方式2：动画逻辑加判空防护 #

如果不想调整动画启动时机，可以在animate函数内访问minObj前加非空判断，只有变量存在时才执行对应的操作：

function animate(time) {
    time *= 0.001;
    box0.rotation.x = time * 0.5;
    box0.rotation.y = time * 1;
    // 非空判断，避免加载完成前访问报错
    if (minObj) {
        minObj.rotation.x = time * 0.5;
        minObj.rotation.y = time * 1;
    }
    renderer.render(scene, camera);
    requestAnimationFrame(animate);
}

内容的提问来源于stack exchange，提问作者Mikey Muss