three.jsでクラスから作成した配列をアニメーション化するにはどうすればよいですか？

Question

私はthree.jsを使用するのが初めてで、現時点ではいくつかの基本的なアイデアをつぶしています。私は、ランダムな場所にキューブを表示させるクラスと、forループで満たされるキューブの配列を作成しました。私はキューブをアニメーション化して、すべてが同時にゆっくりと落ちるようにしようとしています。問題は、それらをすべてアニメーション化して、最後のキューブだけを配列に配置するように見えることです。ここに私のコードです：

class Boxes { 

    constructor() { 

     this.boxGeo = new THREE.BoxGeometry(1,1,1); 
     this.boxMat = new THREE.MeshLambertMaterial({ 
    color: 0x673612 
}); 
    this.box = new THREE.Mesh(this.boxGeo, this.boxMat); 
    this.box.position.x = Math.random() * (10 - -10) + -10; 
    this.box.position.y = Math.random() * (6 - -6) + -6; 
    this.box.position.z = Math.random() * (6 - -6) + -6; 

    scene.add(this.box); 


    } 
    update() { 


    } 

} 

var randBoxes = []; 

for(var i = 0; i < 22; i++) { 
    var newBox = new Boxes(); 
    randBoxes.push(newBox); 

}; 

fall_speed = 0.01; 
var animate = function() { 
    requestAnimationFrame(animate); 

    newBox.box.position.y = newBox.box.position.y - fall_speed; 

    renderer.render(scene, camera); 
}; 


animate(); 

助けが素晴らしいだろう！あなたは配列にすべてのボックスオブジェクトをプッシュしているので、あなたはアニメーションのために再びそれをループする必要がありますあなたの

Answer 1

に感謝：

for (i = 0; i < randBoxes.length; i++) { 
    randBoxes[i].box.position.y = newBox.box.position.y - fall_speed; 
} 

あなたの現在のコードは、最後のnewBoxをアニメーション化された理由最初のforループでは、配列内の22番目のボックスとして変数newBoxを定義していたため、ループが停止していたので、それはオブジェクトです。