javascript - 三个 js 动画克隆网格体

Question

最近我一直在使用 ThreeJS 模型。我设法实现了一个自定义函数，该函数加载每个所需的 .obj 一次，如果有更多对象使用相同的模型，则克隆它们而不是再次加载它们。

问题是我需要以特定方式为每个克隆网格体设置动画。

我创建了一个对象数组，其中包含每个需要动画的网格的函数，该函数将在需要时循环并执行。问题是，由于某种原因，实际上只有第一个模型被动画化。

这是我用于对网格进行动画处理的代码。

function loadModel(m){
    for(var i = 0; i<objects.length; i++){
        if(m.name === objects[i].modelData.model){
            mesh = m.mesh.clone();
            mesh.position.x = objects[i].positionX * distanceAmplifier;
            mesh.position.y = objects[i].positionY * distanceAmplifier;
            mesh.position.z = objects[i].positionZ * distanceAmplifier;
            mesh.scale.set(1000,1000,1000);
            //Adding animation
            animations.push(function(){
                mesh.rotation.z +=  1.0005;
            });
            scene.add(mesh);
        }
    }
}

在动画中我这样做:

if(animations.length === objects.length){
        animations.map(function(anim){
            anim();
        });
}

如果我加载不同的 obj 网格物体，每个物体的第一个实例都会被动画化，但克隆本身不会被动画化。

希望有同样问题的人可以帮我解决这个问题

Answer 1

对我来说似乎是范围问题。我认为这不是正在动画化的克隆的第一个实例，而是最后

在此处检查您的代码:

animations.push(function(){
    mesh.rotation.z +=  1.0005;
});

您正在做的是将匿名函数插入数组。但是该函数在被推送时不会立即执行，它只是等待被调用。当它最终被执行时，mesh 早已不再是你将函数插入数组时的样子了。由于您在循环范围之外的某个位置声明了 mesh 变量，因此对 mesh 的每一个引用都指向完全相同的变量。

有两种方法可以解决这个问题。一种简单的方法是为循环的每次迭代创建一个新的 mesh 变量，而不是不必要地引用当前范围之外的变量:

var newMesh = m.mesh.clone(); // declare a brand new var instead of reusing 'mesh'
...
animations.push(function(){
    newMesh.rotation.z +=  1.0005;
});

如果您有某种疯狂的原因在循环范围内实际使用mesh，您可以在执行for循环时“关闭”它的值，而不是让它推迟到以后再说。这称为“闭包”，在 JavaScript 中理解这一点很重要:

// Create an anonymous function and pass it 'mesh'
// Then execute it immediately to capture the current 'mesh' value
(function(_mesh){
    animations.push(function(){
        _mesh.rotation.z +=  1.0005;
    });
})(mesh);

请注意，现在匿名函数不仅被创建，而且立即执行，并传递mesh 变量以同时捕获其值。

(function(){console.log("Hello.");})(); // this is executed immediately!

它有一个名称:“立即调用函数表达式”。顾名思义，声明一个函数，然后立即执行它。这是创建闭包的常见方法。

我建议您阅读一下 JavaScript 中作用域和闭包的工作原理:

What is the scope of variables in JavaScript?

How do JavaScript closures work?

祝你好运!