javascript - Move items in an array

Question

Currently have sphere meshes in an array and would like to be able to place them in a level. Currently they are already set in a position (skeleton shaped) but I would like to move the whole array and place it in a location instead of individually moving each mesh. Is this possible?

var meshJoints = [];
for (var i = 0 ; i < 25 ; i++)
{
    var geo = new THREE.SphereGeometry(0.02, 18, 18);
    var mat = new THREE.MeshPhongMaterial({color: 0xCCCCCC});
    var mesh = new THREE.Mesh(geo, mat);
    meshJoints.push(mesh);
}

question from:https://stackoverflow.com/questions/65906576/move-items-in-an-array

Answer 1

Add all of your meshes to a Group, then move the Group.

var meshJoints = new THREE.Group();
for (var i = 0 ; i < 25 ; i++)
{
    var geo = new THREE.SphereGeometry(0.02, 18, 18);
    var mat = new THREE.MeshPhongMaterial({color: 0xCCCCCC});
    var mesh = new THREE.Mesh(geo, mat);
    meshJoints.add(mesh);
}

scene.add(group);
meshJoints.position.set(x, y, z); // setting group position will cascade to all children

A Group acts as a collection, and is its self transformable. Setting the position, rotation, or scale on a Group will cascade that change to all of its children. In this case, setting the Group's position will cause all of your Meshes to move by the same amount of change.