Modifying the clone() property in three.js affects all the meshes in my project

I am looking to create 100 identical cubes with a gradual decrease in opacity for each cube. This is my current loop implementation:

var geometry = new THREE.BoxGeometry(0.15,0.15,0.15);
var material = new THREE.MeshNormalMaterial();
var cube = new THREE.Mesh(geometry, material);
cube.material.transparent = true;
scene.add(cube);

for(let i = 0; i < 100; i++){
    window['cube'+i] = cube.clone();
    window['cube'+i].position.x = i;

    window['cube'+i].material.opacity = 1 - (0.01*i);
    scene.add(window['cube'+i]);
}

However, all the cubes end up having the same final opacity value. I'm puzzled as to why this is happening despite the x position increasing correctly.

If anyone has any suggestions on how to individualize the opacity property for each cube, I would greatly appreciate it. Thank you!

Answer №1

When cloning a mesh, the geometry and material are not automatically cloned for performance optimization. To adjust the opacity individually for each mesh, it is recommended to clone the material for every instance.

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

Enhancing Your Web Page: Updating Values Using Flask

Here is my code snippet: app = Flask(__name__) @app.route("/") def Tracking(): lower = np.array([35, 192, 65]) upper = np.array([179, 255, 255]) video = cv2.VideoCapture(1, 0) times = [] total = 0 is_round = Fals ...

Validation of phone numbers based on country codes

How can I validate phone numbers based on the selected country in Angular? Are there any Angular packages specifically for this task? I've attempted to use regex, but it only works for certain countries. I need a solution that can validate mobile an ...

What is the best way to remove words from an object's value that begin with a specific keyword using JavaScript?

Here is a sample array. I need to remove the words row-? from the className property. [ { type: "text", name: "text-1632646960432-0", satir: "1", className: "form-control col-lg-3 row-1" }, { ...

Executing a function on each page within the head tag in Nuxt.js

I successfully made my function accessible by using the plugin attribute in the nuxt.config.js file, allowing me to call the function under mounted on every page. I am looking for a more efficient way to run this function within the head tag and have it b ...

Running the npm install command will eliminate any external JS or CSS files that are being

For my project, I incorporated jquery-datatimepicker by including jquery.datetimepicker.min.css and jquery.datetimepicker.full.min.js in angular.json and placed them within the node_modules/datetimepick directory. Here is a snippet of my angular.json conf ...

Utilizing JQuery and Jade to extract and display information from a Node.js server

I am currently working with the Jade framework for frontend and using Node.js & express for backend development. When rendering a view with data, I am encountering an issue where I can't access this data using JQuery. Below is my service in Node.js ...

Troubleshooting: ng-disabled not function properly in Angular.js

My goal is to only allow the button to be enabled if there is text in the textfield, but for some reason I am unable to make ng-disabled work: <form novalidate> <button type="submit" ng-click="add('+')" ng-disabled="bittext.$invalid ...

Changing JSON variable letter case to lowercase using C#

Utilizing the JSONPEncoderFactory and JSONPBehavior method has allowed me to incorporate JSONP into WCF seamlessly. Everything is set up correctly and my service successfully returns data without any issues. However, I am faced with the challenge of conve ...

What could be causing this issue with my Mongoose.js program when it freezes during a 'nested' save operation?

[edit]: I made a revision to the previous question, providing a very precise reproducible example. This is the program I've created. I have developed two Schemas named ASchema and BSchema with collections A and B respectively. Then, I generated ...

Dealing with login session termination issues in Passport.js and Express 4

Check out the code snippet below for my node js application: "use strict"; var express = require('express'); var app = express(); var port = process.env.PORT || 8080; var passport = require('passport'); var LocalStrategy = require(&apo ...

jQuery UI Sortable: Efficiently Drag Items Across Multiple Interconnected Lists

One feature of using jQuery UI Sortable is the ability to make the sortable item container scroll when an item is dragged. This can be achieved by specifying the scroll option. In my case, I have several sortable lists that are connected within separate c ...

What is the best way to create an HTML form on-the-fly from a JSON object?

Could someone please assist me in understanding how to dynamically generate an HTML form based on a JSON object using JavaScript? ...

executing a javascript function in PHP following form submission

Having trouble calling a javascript function after submitting a form and experiencing errors? New to PHP and seeking assistance. Any advice is appreciated. if(!empty($varAccountType)) { <?php if($varAccountType=='Free Account') { ...

Determine the quantity of items currently in an active state

I created a function that toggles the active state of list items when clicked: React toggleActive: function(item){ item.active = !item.active; }, JSX <li key={property.id} onClick={() => this.toggleActive(property)}> Is there a way to count ...

What could be causing the error message "Why is property 'value' not found in null?" to appear in my code?

I keep encountering the "Cannot find property 'value' of null" error on line 2 of my JavaScript code. Despite entering text in the text-box, I am unable to resolve this issue. Is there a solution to fix this problem? HTML: <!DOCTYPE html> ...

React ensures that the page is not rerendered until after data has been fetched

I am dealing with the following code snippet. This is my React hook: const [isLoading, setIsLoading] = React.useState(true); useEffect(() => { setIsLoading(() => true); // I expect the page to rerender and display loading now. const select ...

Handling a JSON array error when working with a JSON string field

Attempting to create a JSONArray object with nested arrays and json strings, specifically looking at the "res" field. [{ "time": 123813213, "value": [{ "name": "task", "res": "{\"taskName\" : \"NAME\", \"ta ...

React code displaying misalignment between label and input

Can you help me align my URL and https:// on the same margin? https://i.sstatic.net/hxkkC.png <div className="card"> <div className="card-body"> <div className="form-group col-12"> <label cla ...

Check for the presence of a file in the directory and if it exists, load

Attempting to explain this query may lead to confusion. I have been searching for an answer for approximately three days with no success. It appears that the task at hand is either impossible or so straightforward that no one has encountered the need to in ...

What is the best way to manage a vuex dispatch response?

Despite feeling like the answer is right in front of me, I'm waving the white flag and seeking suggestions. The challenge lies in my login form that submits to an AWS API and reacts to the result. The trouble starts when the handleSubmit method is tr ...