Rearrange elements in an array

Question

Rearrange elements in an array

Currently, I have an array of sphere meshes and I am looking for a way to position them in a level. The meshes are currently set in a specific position (in the shape of a skeleton), but I would like to move the entire array and place it in a different location instead of moving each mesh individually. Is there a way to achieve this?

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);
}

javascript three.js

Answer 1

Answer №1

To simplify your scene organization, group all your meshes together using a Group element and then manipulate the entire group.

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

scene.add(group);
meshCollection.position.set(x, y, z); // changes to group position affect all children

A Group in Three.js serves as a container for multiple objects and can be transformed as a whole. Adjusting the position, rotation, or scale of a Group will automatically apply the same transformation to all its children. By setting the position of the Group, you can relocate all the Mesh elements simultaneously.

Answer 2

To simplify your scene organization, group all your meshes together using a Group element and then manipulate the entire group.

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

scene.add(group);
meshCollection.position.set(x, y, z); // changes to group position affect all children

A Group in Three.js serves as a container for multiple objects and can be transformed as a whole. Adjusting the position, rotation, or scale of a Group will automatically apply the same transformation to all its children. By setting the position of the Group, you can relocate all the Mesh elements simultaneously.

Answer 3

Answer №2

Technique 1

By combining these spheres using an additional geometric method:

const newGeometry = new THREE.Geometry();
newGeometry.merge(shape1.geometry, shape1.matrix);

You can simply adjust the position of the merged object and they will all move accordingly. For reference, check out this codepen: https://codepen.io/ThanosSar/pen/JjRgyQz

For more insights, refer to the three.js documentation:

:

.merge ( geometry : Geometry, matrix : Matrix4, materialIndexOffset : Integer ) : null
Merge two geometries or geometry and geometry from object (using object's transform)

Technique 2

UPDATE : (this method allows meshes to remain individual and movable separately)

Another approach is to establish an object3d hierarchy simply by:

mainMesh.add(shape1)

For demonstration, see this codepen : https://codepen.io/ThanosSar/pen/VwKoMLw

For further details, consult the three.js documentation:

:

.add ( object : Object3D, ... ) : this Adds object as child of this object. An arbitrary number of objects may be added. Any current parent on an object passed in here will be removed, since an object can have at most one parent.

Answer 4

Technique 1

By combining these spheres using an additional geometric method:

const newGeometry = new THREE.Geometry();
newGeometry.merge(shape1.geometry, shape1.matrix);

You can simply adjust the position of the merged object and they will all move accordingly. For reference, check out this codepen: https://codepen.io/ThanosSar/pen/JjRgyQz

For more insights, refer to the three.js documentation:

:

.merge ( geometry : Geometry, matrix : Matrix4, materialIndexOffset : Integer ) : null
Merge two geometries or geometry and geometry from object (using object's transform)

Technique 2

UPDATE : (this method allows meshes to remain individual and movable separately)

Another approach is to establish an object3d hierarchy simply by:

mainMesh.add(shape1)

For demonstration, see this codepen : https://codepen.io/ThanosSar/pen/VwKoMLw

For further details, consult the three.js documentation:

:

.add ( object : Object3D, ... ) : this Adds object as child of this object. An arbitrary number of objects may be added. Any current parent on an object passed in here will be removed, since an object can have at most one parent.

Rearrange elements in an array

Answer №1

Answer №2

Similar questions

Securing the connection between clients and servers through encryption

Angular - How child components can communicate with their parent components

ES6 Promises have a curious ability to accurately retrieve values from custom JavaScript objects

Error encountered while retrieving data from Firebase and storing it in an array within an IONIC application

How to determine the presence of 'document' in Typecsript and NextJS

Utilizing Regular Input with Material-UI's Autocomplete Feature

Implementing an API call in Vue JS on the app.vue component of a single page application

What is the method to make a CSS selector avoid selecting a specific element?

Executing mathematical calculations within a JavaScript object

Trigger the callback function once the datatables DOM element has finished loading entirely

Initiating an Ajax POST request when the onblur() event is triggered

What is the best method for implementing click functionality to elements that share a common class using only pure JavaScript

How can I use a JavaScript or jQuery function to choose a specific audio track that is currently playing locally?

Exploring the concepts of nested If statements, for loops, and else if ordering within Javascript programming (FreeCodeCamp - lookUpProfile)

What are the steps to implement an audio stream in a JavaScript React application?

Mastering the utilization of custom input events in PrimeNG with Angular

Using jQuery to adjust the input value up and down with buttons

UTF-8 characters not displaying correctly in Python 3 when received through WebSocket?

What is the importance of fulfilling a promise in resolving a response?

Is there a way to implement DnD functionality on a dynamically generated div element within an HTML page using Dojo