# Change colors problem

**URL:** <https://discourse.threejs.org/t/change-colors-problem/75827>\
**Category:** Questions\
**Created:** [December 30, 2024, 4:14pm UTC](https://discourse.threejs.org/t/change-colors-problem/75827 "2024-12-30T16:14:13Z")\
**Posts on this page:** 18\
**Page:** 1

<div class="post-metadata">

**Author:** ![ADI3DXP](https://avatars.discourse-cdn.com/v4/letter/a/2acd7d/32.png) [@ADI3DXP](https://discourse.threejs.org/u/ADI3DXP)\
**Post date:** [December 30, 2024, 4:14pm UTC](https://discourse.threejs.org/t/change-colors-problem/75827/1 "2024-12-30T16:14:13Z")

</div>

Hi i’d like some help if i needed to use a function to change each object color on press of buton?

```javascript
function multico() {
        scene.traverse( function( tested ) {
        for (let i=0; i<= tested.lengtht; i++){
            console.log('tested');
        };

```

so i got to use traverse to visit all geometry gltf  
so i’m visibly wrong with tested.lenght its type is wrong  
and after maybe some of you know to adress each ‘object.material’ to change it,  
in the for loop?  
like this that i got previously  
object.material.color.set( Math.random() \* 0xffffff );  
but now into a ‘for’ in a ‘traverse’ , well its more harsh than expected. Cheers!

---

<div class="post-metadata">

**Author:** ![Chaser\_Code](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/chaser_code/32/20199_2.png) [@Chaser\_Code](https://discourse.threejs.org/u/Chaser_Code)\
**Post date:** [December 30, 2024, 7:04pm UTC](https://discourse.threejs.org/t/change-colors-problem/75827/2 "2024-12-30T19:04:26Z")

</div>

`for (let i=0; i<= tested.lengtht; i++){`  
to  
`for (let i=0; i<= tested.length; i++){`

```javascript
function multico() 
scene.traverse(function(child){
if(child.isMesh && child.material.length==undefined){
child.material.color.set( Math.random() * 0xffffff );
}
});

```

---

<div class="post-metadata">

**Author:** ![vielzutun.ch](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/vielzutun.ch/32/21366_2.png) [@vielzutun.ch](https://discourse.threejs.org/u/vielzutun.ch)\
**Post date:** [December 30, 2024, 7:11pm UTC](https://discourse.threejs.org/t/change-colors-problem/75827/3 "2024-12-30T19:11:02Z")

</div>

that’s a very subtle correction, if i may say so. You might have wanted to point out the initially wrong spelling of “length”, which had a surplus “t” at its end. I myself had to look more than twice until I realized that … 🧐

---

<div class="post-metadata">

**Author:** ![ADI3DXP](https://avatars.discourse-cdn.com/v4/letter/a/2acd7d/32.png) [@ADI3DXP](https://discourse.threejs.org/u/ADI3DXP)\
**Post date:** [December 31, 2024, 7:42am UTC](https://discourse.threejs.org/t/change-colors-problem/75827/4 "2024-12-31T07:42:17Z")

</div>

that looks amazing, thanks for your 2 feedbacks.

---

<div class="post-metadata">

**Author:** ![ADI3DXP](https://avatars.discourse-cdn.com/v4/letter/a/2acd7d/32.png) [@ADI3DXP](https://discourse.threejs.org/u/ADI3DXP)\
**Post date:** [January 1, 2025, 12:02pm UTC](https://discourse.threejs.org/t/change-colors-problem/75827/5 "2025-01-01T12:02:44Z")

</div>

ok i’m back i really’ve been searching on this, but why ’ child.material.color is undefined ’ when pressing my function

```javascript
function multico(child) {
	//change of colors random
	scene.traverse( function(child) {
		if(child.isMesh){
		child.material.color.set( Math.random() * 0xffffff );
	}});
};

```

maybe the child is not a unique object everytime? It’s a medium-to-good level custom code. Thanks,

---

<div class="post-metadata">

**Author:** ![Chaser\_Code](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/chaser_code/32/20199_2.png) [@Chaser\_Code](https://discourse.threejs.org/u/Chaser_Code)\
**Post date:** [January 1, 2025, 12:34pm UTC](https://discourse.threejs.org/t/change-colors-problem/75827/6 "2025-01-01T12:34:31Z")

</div>

Maybe is array material not single

---

<div class="post-metadata">

**Author:** ![ADI3DXP](https://avatars.discourse-cdn.com/v4/letter/a/2acd7d/32.png) [@ADI3DXP](https://discourse.threejs.org/u/ADI3DXP)\
**Post date:** [January 1, 2025, 5:57pm UTC](https://discourse.threejs.org/t/change-colors-problem/75827/7 "2025-01-01T17:57:13Z")

</div>

> [@Add children to a group break traverse method](https://discourse.threejs.org/t/add-children-to-a-group-break-traverse-method/12642):
>
> Hi there! I would like to traverse the whole scene looking for a certain child (which is actually a grand-child) and then add it to another group in order to change its pivot point (it’s a door). Here’s my code: pivot(nome, lato) { scene.traverse(child =\> { if (child instanceof THREE.Mesh){ if (child.name.includes(nome)) { let box = new THREE.Box3().setFromObject( child ); let pivotAnta = new THREE.Group(); scene.add(piv…

thanks. Maybe, to create array , and use it to stock materials, i’m very new to this (see subject) medium-to-good problem here 🤓 !!

---

<div class="post-metadata">

**Author:** ![ADI3DXP](https://avatars.discourse-cdn.com/v4/letter/a/2acd7d/32.png) [@ADI3DXP](https://discourse.threejs.org/u/ADI3DXP)\
**Post date:** [January 2, 2025, 7:13am UTC](https://discourse.threejs.org/t/change-colors-problem/75827/8 "2025-01-02T07:13:29Z")

</div>

as per this topic

> As per [docs](https://threejs.org/docs/?q=object#api/en/core/Object3D.traverse) - you should not add / remove / modify any elements when using `Object3D.traverse`. If you need to do that - you can use `children.forEach` or save referenced to the elements you’d like to remove in an array outside of thetraverse callback.

that i read here _[Cannot read property 'traverse' of undefined when traverse object in scene and remove it - #2 by mjurczyk](https://discourse.threejs.org/t/cannot-read-property-traverse-of-undefined-when-traverse-object-in-scene-and-remove-it/28672/2)_  
i will try to build my fonction using ‘children.forEach’ but,  
problem: where is this technique children.foreach, documented? 🕶

---

<div class="post-metadata">

**Author:** ![ADI3DXP](https://avatars.discourse-cdn.com/v4/letter/a/2acd7d/32.png) [@ADI3DXP](https://discourse.threejs.org/u/ADI3DXP)\
**Post date:** [January 2, 2025, 7:34am UTC](https://discourse.threejs.org/t/change-colors-problem/75827/9 "2025-01-02T07:34:28Z")

</div>

maybe using ‘needsupdate’ see here _[GLB Replace mesh material on traverse with MeshPhysicalMaterial results in black](https://discourse.threejs.org/t/glb-replace-mesh-material-on-traverse-with-meshphysicalmaterial-results-in-black/35951)_

> mesh.material.needsUpdate = true;

---

<div class="post-metadata">

**Author:** ![mjurczyk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mjurczyk/32/10995_2.png) [@mjurczyk](https://discourse.threejs.org/u/mjurczyk)\
**Post date:** [January 2, 2025, 7:49am UTC](https://discourse.threejs.org/t/change-colors-problem/75827/10 "2025-01-02T07:49:34Z")

</div>

> [@ADI3DXP](#):
>
> where is this technique children.foreach, documented?

[Here](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach) for example - it’s just a method of JavaScript arrays (acts pretty much the same as any for-loop, loops through the items in an array.)

---

<div class="post-metadata">

**Author:** ![ADI3DXP](https://avatars.discourse-cdn.com/v4/letter/a/2acd7d/32.png) [@ADI3DXP](https://discourse.threejs.org/u/ADI3DXP)\
**Post date:** [January 2, 2025, 2:28pm UTC](https://discourse.threejs.org/t/change-colors-problem/75827/11 "2025-01-02T14:28:25Z")

</div>

Veery very cool. Will study this, thanks

---

<div class="post-metadata">

**Author:** ![ADI3DXP](https://avatars.discourse-cdn.com/v4/letter/a/2acd7d/32.png) [@ADI3DXP](https://discourse.threejs.org/u/ADI3DXP)\
**Post date:** [January 2, 2025, 3:32pm UTC](https://discourse.threejs.org/t/change-colors-problem/75827/12 "2025-01-02T15:32:06Z")

</div>

Hi! been really looking into it, so close now

```javascript

function(){

var newMats = [];
//i add an array
scene.traverse(child => {
//i traverse
if ( child.isMesh ) {
if ( child.material )
//i found using 'push' to fill my array
newMats.push( { newMats: child.material.color, child : child} );	}});

//here i read my array is now full
newMats.forEach((element) => console.log(element));

for (var i = 0, n = newMats.length; i < n; i++){
newMats[i].object.color = material.color.set( Math.random() * 0xffffff );
}
};
	
//why my material is not defined ?

```

it’s mega tuned code yet simple

---

<div class="post-metadata">

**Author:** ![ADI3DXP](https://avatars.discourse-cdn.com/v4/letter/a/2acd7d/32.png) [@ADI3DXP](https://discourse.threejs.org/u/ADI3DXP)\
**Post date:** [January 2, 2025, 3:48pm UTC](https://discourse.threejs.org/t/change-colors-problem/75827/13 "2025-01-02T15:48:24Z")

</div>

[this](https://discourse.threejs.org/t/how-to-change-the-color-of-two-objects-or-parts-of-them-gltf/33093/15) looks very much the next step.

---

<div class="post-metadata">

**Author:** ![mjurczyk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mjurczyk/32/10995_2.png) [@mjurczyk](https://discourse.threejs.org/u/mjurczyk)\
**Post date:** [January 2, 2025, 4:14pm UTC](https://discourse.threejs.org/t/change-colors-problem/75827/14 "2025-01-02T16:14:31Z")

</div>

The `.traverse` thread you’ve linked does not really apply here, since you’re not modifying the order / count of children. Your entire function can be cleaned up and simplified to just:

```js
const updateMaterialColors = () => {
  scene.traverse(child => {
    if (!child.isMesh || !child.material) {
      return;
    }

    child.material = child.material.clone();
    child.material.color = new THREE.Color(Math.random() * 0xffffff);
  });
};

updateMaterialColors();

```

No additional arrays or `needUpdates` necessary, just make sure this function is called _after_ model is 100% loaded (keeping in mind that model loading is async.)

---

<div class="post-metadata">

**Author:** ![ADI3DXP](https://avatars.discourse-cdn.com/v4/letter/a/2acd7d/32.png) [@ADI3DXP](https://discourse.threejs.org/u/ADI3DXP)\
**Post date:** [January 2, 2025, 4:21pm UTC](https://discourse.threejs.org/t/change-colors-problem/75827/15 "2025-01-02T16:21:41Z")

</div>

My bad! i should have told they all share a _one_ same material  
maybe, that’s why i get '_child.material.color undefined_ ’ , idk?

 ![2025-01-02 17_1](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/c/1/c16d52e51419b773443514ca325f318d79845156.jpeg)

soo 🤠 MANY THANKS to you @mjurczyk , i’m all so close.

---

<div class="post-metadata">

**Author:** ![ADI3DXP](https://avatars.discourse-cdn.com/v4/letter/a/2acd7d/32.png) [@ADI3DXP](https://discourse.threejs.org/u/ADI3DXP)\
**Post date:** [January 2, 2025, 4:23pm UTC](https://discourse.threejs.org/t/change-colors-problem/75827/16 "2025-01-02T16:23:51Z")

</div>

maybe, to ‘live duplicate’ the materials or something?

---

<div class="post-metadata">

**Author:** ![mjurczyk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mjurczyk/32/10995_2.png) [@mjurczyk](https://discourse.threejs.org/u/mjurczyk)\
**Post date:** [January 2, 2025, 9:32pm UTC](https://discourse.threejs.org/t/change-colors-problem/75827/17 "2025-01-02T21:32:04Z")

</div>

In that case it means the material you’re trying to edit color of does not have a color (at least assuming you used the snippet above.)

Instead of color.set simply assign a new THREE.Color (edited the snippet above to include that.)

---

<div class="post-metadata">

**Author:** ![ADI3DXP](https://avatars.discourse-cdn.com/v4/letter/a/2acd7d/32.png) [@ADI3DXP](https://discourse.threejs.org/u/ADI3DXP)\
**Post date:** [January 3, 2025, 4:48pm UTC](https://discourse.threejs.org/t/change-colors-problem/75827/18 "2025-01-03T16:48:28Z")

</div>

Yes i’ve use your snippet as is, thank you. It works as needed . Many thanks, it’s so satisfying, as you said _Instead of color.set simply assign a new THREE.Color_ was the problem, and it did the trick. 👍 It’s a huge step