使用 THREE.js 加载数据并将结果推送到列表时，列表保持为空

Question

我运行数据使用以下函数：

function loadData(){
    const loader = THREE.FileLoader();
    let loadedData = [];
    loader.load( dataFileUrl,
        function (data) {
            console.log(data);
            for (let row of data.split('\n'))
            {
                loadedData.push(row);
            }
        },
        function (xhr) {console.log( ('Loading data : ' + xhr.loaded / xhr.total * 100) + '% loaded' )},
        function(err)  {console.error(err)}
    );
    return loadedData;
}

这里，dataFileUrl 是我打算加载的文件的正确散列 url（该文件只是一个 csv，其中每一行都有一些字符串）。我知道文件已正确加载，因为我可以记录它的内容，但是整个方法 returns 是一个空列表。我是 js 的新手，我不明白为什么这不能按我预期的方式工作。

Answer 1

加载是异步的，你应该return一个承诺

function loadData(){
    return new Promise((resolve) => {
        let loadedData = [];
        loader.load(dataFileUrl,
            function (data) {
                console.log(data);
                for (let row of data.split('\n')) {
                    loadedData.push(row);
                }
                resolve(loadedData)
            },
            function (xhr) { console.log(('Loading data : ' + xhr.loaded / xhr.total * 100) + '% loaded') },
            function (err) { console.error(err) }
        );
    })
}

像这样应该可以。

使用 THREE.js 加载数据并将结果推送到列表时，列表保持为空

When loading data using THREE.js and pushing the result to a list, the list remains empty

javascript

three.js