Array of Object3D instances populated with meshes using a loop through an object literal

Currently, I am attempting to populate an object-literal in Three.js with Object3Ds and then add meshes to each of those Object3Ds. However, I am encountering unexpected results when running my code. After isolating the issue, I have found that thing1 and thing2 do not receive any meshes, while thing3 ends up with all three meshes:

var objSet = {
    thing1: new THREE.Object3D(),
    thing2: new THREE.Object3D(),
    thing3: new THREE.Object3D()
};

for (key in objSet) {
    objSet[key].add(aMesh);
    objSet[key].add(anotherMesh);
    objSet[key].add(yetAnotherMesh);
};

My ultimate objective is to dynamically generate an object-literal containing Object3Ds and then consistently iterate through them to include meshes within each one. Can you help me identify where the issue lies? Thank you for your assistance!

javascriptloopsthree.jsmeshobject-literal

Answer №1

After taking the advice from the individuals above in the comments section, I came to realize the root cause of the unusual behavior in my code. The console.logs revealed that each instance of Object3D in the object-literal was being populated with meshes during runtime, but by the end, all except the final Object3D were empty. This happened because meshes can only be used once, and I needed to duplicate them into the Object3Ds, otherwise they were simply transitioning from one to the next as I assigned them. Quite a revelation!

The solution turned out to be both quick and straightforward - I just had to append .clone() to the mesh variable at the conclusion of the .add() function:

var collection = {
    item1: new THREE.Object3D(),
    item2: new THREE.Object3D(),
    item3: new THREE.Object3D()
};

for (key in collection) {
    collection[key].add(aMesh.clone());
    collection[key].add(anotherMesh.clone());
    collection[key].add(yetAnotherMesh.clone());
};

A big thank you to everyone who contributed!

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

Executing a JavaScript Ajax request when the page has finished loading

I want the page to be completely loaded before making an ajax call to update the database. I can trigger a JavaScript function in the body's onload event to ensure the page is fully loaded, but I'm unsure how to initiate the Ajax call from there. ...

javascriptajax

Incorporate Vue into a template using variables and props

Currently in the process of building a vue app and wondering how I can seamlessly integrate it into a template while passing variables (props) into it. When I execute npm run dev, the app and all its components are coded with no issues. After running npm ...

javascriptvue.js

Guide to obtaining ngPrime autocomplete text when the button is clicked within Angular 6

I am currently utilizing the ngPrime autocomplete feature to retrieve data from a service. My goal is to capture the text entered in the autocomplete field whenever a button is clicked. I attempted to access the value using getElementById.value within th ...

javascriptangularautocomplete

Having trouble with V-For image paths not locating the image files? Need help on adding the right file path while using v-for?

I am currently using Vue/Nuxt and facing an issue with populating an image carousel. The images I want to insert into the carousel are stored in a folder named "AreaPictures" within my assets directory. This is how my v-for loop is structured: &l ...

javascriptvue.jswebpacknuxt.js

Sending data to API using AngularJS Http Post

Upon clicking "Add new User", a modal pop-up will appear with a form containing a text field and a checkbox. However, upon clicking the create button, the data is not being posted to the API and the modal pop-up remains open without closing. I would like ...

javascriptangularjshtmlapi

Invoke a function using the output of a different function

There is a function whose name is stored in the value of another function, and I need to invoke this function using the other one. The function I need to call is popup() random() = 'popup()' if ($.cookie('optin-page')) { } I attemp ...

javascriptjqueryhtmlcss

Installing different versions of a package in npm can be done by loading multiple versions

I am in the process of setting up a web API and I want to provide support for various versions of the underlying library. In essence, I would like to access it through: where x.y.z represents the version of the library I am utilizing. Using npm for mana ...

javascriptwebservicenpmversions

When running npm install -g, the package is being installed into a global directory on

For a considerable amount of time, I have been working with node and npm. Now, as I embark on a more extensive project using these tools, I've encountered an issue. Whenever I execute 'sudo npm install -g', the installation is directed to &a ...

javascriptnode.jsnpm

Having trouble retrieving parameters within the expressjs router.delete endpoint implementation

Check out my code snippet below where I utilized Express router and Mongoose Model. I am encountering an issue accessing the id parameter. router.delete('/task/:id', function (req, res) { Task.remove({ ...

javascriptnode.jsexpressmongoosemean-stack

Invoking a function from an external JavaScript file

Looking for a way to call a function from an external JavaScript file? Here are the specifics: Within the head tag, include the following script: <script type="text/javascript" src="JScript/FontSize.js"></script> The FontSize.js file yo ...

asp.netjavascriptpathcall

javascript context scope

As I delve into the world of JavaScript, please bear with me as I navigate through defining multiple namespaces. Here's an example of how I'm doing it: var name_Class = function(){ this.variable_name_1 = {} this.method_name_1 = function() { ...

javascriptoopscope

The tooltip failed to disappear even after clicking on the element (bootstrap v5.0)

After updating from Bootstrap version 4.5.x to 5.0.1, I made changes to how tooltips were initialized. Previously, it was done using $('[data-toggle="tooltip"]').tooltip({trigger: 'hover'});, but now it is done differently as ...

javascripttooltipbootstrap-5popper

Establishing standard emit actions in a Vue JS component layout

I am dealing with a complex situation involving two nested Vue JS components. The child component is emitting certain events to the parent function, which I have defined within the parent component declaration. The issue here is that these events are being ...

javascriptvue.jsvuejs2vue-componentvue-events

Passing the output of a nested function back to its containing function in JavaScript within Dynamics CRM

Is it possible for the code below to send the boolean value from the inner function back to the parent function displayButton()? This parent function is triggered when a button in Dynamics CRM is clicked. The expected behavior is for the function to retu ...

javascriptdynamics-crm-2015

Finding a specific JavaScript object within an array nested in an object using jQuery

Within my javaScript code, I have an object that contains arrays of objects: var stuffObject = { stuffArray1 : [object1, object2, object3], stuffArray2 : [object4, object5, object6] } The individual objects in the arrays are structured like thi ...

javascriptjquery

What is the best way to convert a query into Sequelize?

select reservation_datetime from LectureReservation Inner Join Lecture On LectureReservation.lecture_id = Lecture.id Where Lecture.mentor_id = 1 This is my initial query and now I am attempting to convert it into a sequelize format like: if (req.params ...

javascriptmysqlnode.jssequelize.js

An error occurred while trying to import a module due to an unexpected token

Take a look at this codepen link I encountered an error (line 10 in index.vue) with the following import: import { EffectComposer } from "three/examples/jsm/postprocessing/EffectComposer.js"; Any idea what could be causing this issue? All other ...

javascriptvue.jsthree.jsnuxt.js

Model transforming y and controls using loop regression

I have a DataFrame with various variables such as Country, Indicator, and data for multiple years. data<-data.frame(Country=c("USA","USA","USA","USA","India","India","India","Ind ...

rdataframeloopsregressionlinear-regression

What is the best way to make a div automatically scroll to the bottom of its height in

I've spent a considerable amount of time searching for an answer to this question, but unfortunately, none of the solutions I found were suitable for my specific scenario. Currently, I am developing a Chat Application and one key feature is displayin ...

javascripthtmlcssangularjsscroll

When text is mistakenly displayed over an image instead of only appearing on hover

My goal is to implement a jQuery effect that displays text over an image when the user hovers over it. However, I've encountered some issues while modifying the code. Changing ".img" on line 3 in the jQuery to "img" results in the code working cor ...

javascriptjqueryhtmlcssimage