title: How to change the color of an Object3D after cloning the GLTF
body: <p>I want to duplicate my GLTF models with different positions/colors dynamically, to do so I have done:</p>
  <pre class="lang-js prettyprint-override"><code>...
  const L_4_G = new Object3D();
  ...
  const multiLoad_4 = (result, position) =&gt; {
      const model = result.scene.children[0];
      model.position.copy(position);
      model.scale.set(0.05, 0.05, 0.05);
  
      //
      L_4_G.add(model.clone())
  
      scene.add(model);
  };
  ...
  function duplicateModel4() {
  
      L_4_G.translateX(-1.2)
      L_4_G.translateY(0.0)//0.48
      L_4_G.translateZ(1.2)
  
      L_4_G.rotateY(Math.PI / 2);
  
      scene.add(L_4_G);
  }
  ...
  </code></pre>
  <p>I didn't find out how can I change the <strong>Object3D</strong> color from the <a href="https://threejs.org/docs/#api/en/core/Object3D" rel="nofollow noreferrer">documentation</a>, can you please tell me how can I do that? thanks in advance.</p>
  <p>Here is the <a href="https://github.com/bhomaidan1990/JS_Tutorial/blob/main/threejs_webpack/src/js/glbLoad.js" rel="nofollow noreferrer">full code</a> that I'm using, and here are the <a href="https://github.com/bhomaidan1990/JS_Tutorial/tree/main/threejs_webpack/src/assets/glb" rel="nofollow noreferrer">models</a></p>
  <h4>Update</h4>
  <ol>
  <li>I have seen this <a href="https://discourse.threejs.org/t/how-to-set-color-attribution-to-gltf-model/25749/2" rel="nofollow noreferrer">solution</a>, to store a set of colors in the object's <code>userData</code> and choose the color later:</li>
  </ol>
  <pre class="lang-js prettyprint-override"><code>L_2_G.userData.colors = {green : #00FF00, red : ..., ...}
  L_2_G.children[0].material.color(userData.colors[&quot;green&quot;])
  </code></pre>
  <p>But I'm getting an error that children[0] undefined, but I can see that this object has a child and a material, and color via the console: <code>console.log(L_2_G.children)</code>, <code>console.log(L_2_G.children.length)</code>--&gt; <code>0</code></p>
  <ol start="2">
  <li>Also I have tried <code>getObjectByName</code> as explained <a href="https://stackoverflow.com/a/47919411">here</a>:</li>
  </ol>
  <pre class="lang-js prettyprint-override"><code>scene.getObjectByName(name).children[0].material.color.set(color);
  </code></pre>
  <p>which also reslts: <code>children[0]</code> is undefined, <code>scene.getObjectByName(name).children.length</code> is <code>0</code>.</p>