在另一个(Three.js)Javascript中使用一个函数的变量

Question

我使用three.js加载了一个obj文件我尝试获取它的顶点"X"位置，并将其保存在init((函数中的objloader函数内的"pos"中。我想在另一个函数中使用变量的值，比如displayposition((当我尝试时

var pos;
function init() {
var objLoader = new THREE.OBJLoader();
objLoader.load('objectfile.obj', function(object) {
scene.add(object);
pos = scene.children[5].children[0].geometry.attributes.position.getX(0);
console.log(pos); //This displays the vertex position value
});
}
function displaypos() {
console.log(pos); //It doesn't display the vertex position value
}

如何使其全局化，并使变量值"pos"在整个程序中可用。。

Answer 1

OBJLoader.load是一个异步函数，用于下载和解析OBJ文件。这可能根本不需要时间，也可能需要几秒钟。

您说您正在呼叫init，然后立即呼叫displaypos。这些函数调用是连续的，因此displaypos将在init退出后立即调用。

这里的操作顺序是：

1. 创建全局变量pos
2. 定义init函数
3. 定义displaypos函数
4. 致电init
   1. 将objloader定义为THREE.OBJLoader
   2. 定义objLoader.load的回调
   3. 调用objLoader.load<--这是异步的，可能需要一些时间
   4. init退出，因为对objloader.load的调用与回调是连续的
5. 致电displaypos
   1. 将undefined打印到控制台

几秒钟后

1. 调用objloader.load的回调
   1. 将object添加到scene
   2. 设置pos的值
   3. console.log将正确的值打印到控制台

所以您的displaypos调用没有打印值，因为没有要打印的值。。。然而

您可以将自己的回调添加到init中，使其按预期工作，也可以重新编写代码以使用Promise+async/await。

回调版本

var pos;
function init(callback) {
var objLoader = new THREE.OBJLoader();
objLoader.load('objectfile.obj', function(object) {
scene.add(object);
pos = scene.children[5].children[0].geometry.attributes.position.getX(0);
console.log(pos); //This displays the vertex position value
callback(); // The real exit point
});
}
function displaypos() {
console.log(pos);
}
init(function(){
displaypos(); // will now display the correct value
});
// alternately: init(displaypos);

Promise+async/await

var pos;
async function init() {
return new Promise(function(resolve){
var objLoader = new THREE.OBJLoader();
objLoader.load('objectfile.obj', function(object) {
scene.add(object);
pos = scene.children[5].children[0].geometry.attributes.position.getX(0);
console.log(pos); //This displays the vertex position value
resolve(); // the real exit point
});
});
}
function displaypos() {
console.log(pos);
}
(async function(){
await init();
displaypos(); // will display the correct value
})();