Combine two objects within Three.js to create a single entity

I've developed a function that generates spheres for each vertex of a geometry and positions them accordingly. For instance, if there's a cube, the function will create a sphere for each vertex of the cube.

function makeSphereVertices(){
console.log("makesphere");

spheres = [];

for(var j=0 ; j<geometryContainer.length ; j++) {               
for (var i=0 ; i<geometryContainer[j].geometry.vertices.length ; i++){
var sphereGeometry = new THREE.SphereGeometry(0.04,10,10);//relative to dimension object : ToDo
var sphereMaterial = new THREE.MeshBasicMaterial({transparent: false,color: 0x000000 /*opacity: 0.01*/});
spheres = new THREE.Mesh(sphereGeometry,sphereMaterial);
spheres.position.set(geometryContainer[j].geometry.vertices[i].x,
                  geometryContainer[j].geometry.vertices[i].y,
                  geometryContainer[j].geometry.vertices[i].z);
                  console.log(geometryContainer[j].id);
    spheres.name = "sphere";            
scene.add(spheres);
verticesSphere.push(spheres);

 }
    }


  }

Following this, I have also implemented a function to enable dragging of my cube similar to the example shown here. However, I am facing an issue where moving the cube does not move the associated spheres with it. Is there a way to link the spheres to the cube so they move together? Any assistance on this matter would be greatly appreciated. Thank you.

Answer №1

One way to organize them is by consolidating them into a single object.

const container = new THREE.Object3D();//create an empty container
container.add( cube );//add a cube mesh to the container
scene.add( container );//finally, add the container to the scene

Advanced Example of Grouping Meshes in three.js (THREE.Object3D)

Remember to put both the cube and spheres inside the newly created group object for organization purposes.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ways to ensure that I return only after my callback has finished executing

I'm currently working on a Node.js app and I'm encountering an issue with returning the value of my web scrape to the main app.get function. The scraping process is successful, and the results reach the RETURN statement in my callback function. H ...

The Google Maps application is having trouble zooming in

I'm having trouble with my function that takes the zoom level and sets the center of the map. When I call setCenter with my positional coordinates and zoom level, the map doesn't zoom in where I want it to. However, the position of my info window ...

Employing condition-based require() statements in JavaScript

I am currently experimenting with conditionally loading modules that are Vue components. Review the code snippet below for a better understanding: index.js My goal is to dynamically load different components based on the window URL (since I cannot use vu ...

Switch from using `widthWidth` to `useWidth` in MUI v5 ReactJS

Currently, I am in the process of updating a project that utilizes MUI as the UI Library for my React application. I have started migrating to version 5 today, and one issue I've encountered is related to all functional components wrapped by withWidth ...

The Material UI Checkbox is displaying duplicate values within a single instance

Using React and Material UI checkbox I want the checkbox to update a specific value in the state when it's checked. While everything seems to be working fine, I've noticed that on the first 2 clicks of the checkbox the state doesn't update ...

Crack open a JSON object

I am struggling to parse a JSON object. It seems like the code is not working, can you help me? var mock_data = { "available": [{ "UserID": 7, "UserName": "Manoj", "Language": "Java", "Score": 9, "TimeLimit": 4.0 }, { "UserID ...

What benefits does Next.js offer compared to using plain React for rendering 3D models with three.js?

In a previous project, I utilized a 3D product configurator application and am now curious about the potential performance improvements (specifically FPS) that "server-side rendering" with Next.JS could provide compared to using plain React. ...

Is there a way to make the Return key act like the Tab key in a jQuery

When the tab and enter keys are pressed, the following code exhibits different behaviors: --tab replaces the text field's value with the selected item's value and shifts focus to the next input box. --enter also changes the text field's va ...

ng-model assigns the value to the select

Below is the angularjs directive I have created: dicApp.directive('listpanel', function ($resource) { return { restrict: 'E', template: '<select ng-model="selectedDictionary" ng-change="listChange()">&apo ...

Limitations of GitHub's rate limiting are causing a delay in retrieving user commit history

I have developed a code snippet to retrieve the user's GitHub "streak" data, indicating how many consecutive days they have made commits. However, the current implementation uses recursion to send multiple requests to the GitHub API, causing rate-limi ...

Testing JavaScript performance using the V8 engine

function add(x, y) { return x + y; } console.time("clock1"); for (var i = 0; i < 90000000; ++i) { add(1, 2); add('a','b'); } console.timeEnd("clock1"); function combineText(x, y) { return x + y; } fu ...

Tips for accessing a PHP file across multiple domains

Currently, I am working with Core PHP and incorporating Javascript into my project. In this particular module, I am facing a challenge where I need to access data from one domain to another domain hosting the PHP file using Javascript for database storage. ...

Utilizing Vue to create a button within a popup window

Utilizing the vue2-google-maps package, I have created a custom popup. Within this custom popup, there is a button that is intended to open a new popup in place of the existing one. Here is the HTML code: <gmap-info-window :options="infoOptions" : ...

Receiving blank response when trying to access server variable on the client side

Query: On the server side, I set the value of SessionData(EmployeeID) = "12345", which is first executed during page_load. Later, on the client side: function getEmployeeId() { return "<%# SessionData("EmployeeID")%>"; } When I use th ...

Confirming an authorization?

I have been working on this code and it is almost perfect, but I am struggling to understand why it needs to validate the 0 or 10 in order to work correctly. The issue I am facing is with a validation where the button should be deactivated when the counte ...

Explore and adjust the contents of a complex and nested JavaScript object

In my dataset, there are objects nested deeply with arrays, objects within arrays, and so on. Each nested object includes a property called sys, which contains another property called id. I have a list of specific id values that I want to remove from the ...

CSS3 Word Wrapping Tutorial

Are there alternative methods to word-wrap text within a div element? I am limited to using only CSS1 and some CSS2, so I cannot utilize word-wrap in CSS. *Consider using javascript or CSS Thank you! .test_wordWrap { position: absolute; top: 45px; ...

Create a jQuery script that generates clickable links when a user is mentioned in the

Hey there, I've been incorporating this fantastic plugin created by Hawkee into my project. It functions similarly to Twitter, allowing users to @mention others. However, I'm encountering issues with the output when using the following method: u ...

Tips on Handling Multiple Versions of jQuery

I'm seeking your guidance on a particular issue at hand. I am part of the development team for a large web application that heavily relies on jQuery and has been in constant development for the past 7-8 years. Over this time, several versions of jQue ...

Just work seamlessly with comparable features

Is there a more efficient way to simplify this function? I am faced with multiple tweens that share similar ease properties. While I acknowledge the broad nature of this query, I have yet to discover a satisfactory solution. $('input').chan ...