Creating duplicates of a parent mesh in THREE.js with its children and additional materials


I am inquiring about a cloning issue I am having with a mesh that has a parent and 4 children, each with different materials. When I clone the parent mesh using this code:

let result = cloudObjects.sideCloudGeometry[texture].clone();

The cloned mesh looks great with all children included, however, there is an issue when trying to change the opacity of one cloned mesh as it applies to all textures (including children).
Is there a way to clone the parent and children objects' textures separately to apply opacity individually?
Thank you for your help!

javascriptthree.js

Answer №1

Finally, after some trial and error, I managed to figure it out. Here's the solution:

const obj = cloudObjects.sideCloudGeometry[texture].clone();
obj.material = cloudObjects.sideCloudGeometry[texture].material.clone();
obj.children[0].material = cloudObjects.sideCloudGeometry[texture].children[0].material.clone();
obj.children[1].material = cloudObjects.sideCloudGeometry[texture].children[1].material.clone();
obj.children[2].material = cloudObjects.sideCloudGeometry[texture].children[2].material.clone();
obj.children[3].material = cloudObjects.sideCloudGeometry[texture].children[3].material.clone();

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

What could be causing the malfunction of my token rotation feature in nextAuth?

I am developing a web application that involves working with an external API alongside my team member. We are making API requests using Next.js. I have implemented nextAuth for authentication, but I am facing issues with token rotation. After successful lo ...

javascriptreactjsnext.jsjwtnext-auth

Having trouble with localstorage.setitem function in Angular?

Check out the function below. I can see an object in the console.log using res: login2(){ console.log(this.user_form_value); console.log(this.password_form_value); this._loginService.login(this.user_form_value, this.password_form_value).subscr ...

javascriptangularjsjsonlocal-storage

Exploring the Integration of Node Modules with React

I am still learning about Node and I'm struggling to integrate an NPM package with my React project running on Node. Currently, I have a React component that successfully uploads a zip file through Node server scripts. Now, I am working on the next s ...

javascriptnode.jsreactjsunzipadm-zip

Having trouble with the pagination feature while filtering the list on the vue-paginate node

In my current project, I have integrated pagination using the vue-paginate node. Additionally, I have also implemented filtering functionality using vue-pagination, which is working seamlessly. Everything works as expected when I enter a search term that d ...

javascriptnpmvue.jsvuejs2

What's the best way to ensure a div's height and width are equal when implementing responsive design?

I am currently working on a responsive design and facing challenges in making div's height and width equal. Initially, I set the div's width as a percentage and height as auto, but this caused the divs to not display properly. To resolve this iss ...

javascriptjqueryhtmlcssresponsive-design

The state object in Next.js appears to be missing

const [ values , setValues ] = React.useState({ input_type: '', elements: [] }) const addOption = () => { let newElements = values.elements newElements.push({ type: "option", ...

javascriptreactjsnext.js

A guide to extracting and storing JSON data in JavaScript variables

I have integrated the CheckPoint API into my web application and I need to store the "sid" in a variable for further use. How can I achieve this? Below is the code snippet I am using to log in: var myHeaders = new Headers(); myHeaders.append("Content-Type ...

javascriptjsonreactjs

Transfer a csv file from a static webpage to an S3 bucket

Looking to create a webpage for uploading csv files to an S3 bucket? I recently followed a tutorial on the AWS website that might be helpful. Check it out here. I made some modifications to accept filename parameters in my method, and everything seems to ...

javascriptamazon-web-servicescsvamazon-s3static-html

Manipulate the text within a canvas element using JavaScript

In this scenario, suppose json.mes represents the received message from Ajax. There is a button implemented to display the message in a canvas box. Although I have attempted to retrieve the message using getElementById (as shown below), it seems to be in ...

javascriptjqueryajaxcanvas

Struggling with jquery .append issue

Here is the HTML code snippet: <div class="expand"> <div class="title" id="SectionTitle2">Academics</div> <input type="button" onclick="showTitleForm('2');" name="editTitle2" value="Edit Title"> <form id="titleForm2" m ...

javascriptjqueryajax

What is the best way to manage the 'content' attribute in TSX?

I'm currently developing an application that utilizes schema.org. In the code snippet below, you can see how I've implemented it: <span itemProp="priceCurrency" content="EUR">€</span> According to schema.org do ...

javascripthtmltypescriptschema.orgtsx

Are the fetch functions within getStaticProps and getServerSideProps equivalent to the fetch API native to web browsers?

I've been working with Next.js for some time now and I'm questioning the fetch API used in both getStaticProps and getServerSideProps. Below is my understanding of these functions: getStaticProps runs during build time and ISR getServerSidePro ...

javascriptnode.jsreactjsnext.jsfetch-api

Utilizing v-model for dynamic binding within a v-for iteration

I'm currently working on binding v-model dynamically to an object property within an array of objects. I am unsure about how to accomplish this task. The objective is to choose a user using the Select HTML tag and then display the list of that user&ap ...

javascriptarraysvue.jsvuejs2v-model

Pressing the button will add text into the input field

Below is a jsfiddle link showcasing the current issue I am trying to address: http://jsfiddle.net/YD6PL/61/ Here is the HTML code snippet: <input type="text> <input type="text> <input type="text> <div> <button class="buttons"& ...

javascripthtml

Why does the Formik form only validate after the second button click in this React Hooks, TypeScript, Formik, NextJS setup?

Looking for fresh perspectives on my code. The issue lies in the fact that it takes two submission attempts to validate the data inputted into a form successfully. It appears that the post request to Airtable happens before the validation schema, resulting ...

javascriptreactjsreact-hooksnext.jsformik

The npm copy script is not functioning properly on the Windows 8.1 operating system

I am working on a sapui5 project and I need to execute the following npm script from my package.json: "scripts": { "flatten": "copy -r \\dist\\resources\\test\\commonjslib\\* dis ...

javascriptnode.jsnpmvisual-studio-codedeployment

The value is undefined until a new Resource object is pushed with the item

I've encountered an issue while testing a factory and I can't seem to find anyone else with the same problem. Can someone help me figure out what's causing this strange error? TypeError: 'undefined' is not a function (evaluating & ...

javascriptangularjsunit-testingkarma-jasmine

Using the ref callback to access getBoundingClientRect values in React Components

I'm having some trouble extracting data using the getBoundingClientRect() method from a set of animated div elements. The issue I'm facing is that the refCallback function is returning empty DOMRect objects. If you're interested, feel free t ...

javascriptreactjsmaterial-ui

Dealing with error handling in NUXT using asyncData and Vue actions

The URL I am trying to access is http://mywebsite.com/[category that doesn't exist]. Despite the code snippet provided below, I am unable to reach the catch block in asyncData. async asyncData({ params, store }) { try { await store.dispatch(&ap ...

javascriptvue.jsnuxt.js

What sets apart toBeInTheDocument from getBy* in @testing-library/react?

Can you distinguish between these two methods in react-testing-library? expect(screen.queryByText('<something>')).toBeInTheDocument(); And screen.getByText('<something>'); (The specific getBy* and queryBy* operation are no ...

javascriptreactjstestingjestjsreact-testing-library