title: Change part of object color in three.js
body: <p>I want to change the color of some part of the object displayed on the scene. However, I'm unable to do it. I tried the code below :</p>
  
  <pre><code>        var loader = new THREE.OBJMTLLoader();
          loader.load('LFPL_IDRun01a_body.obj', 'LFPL_IDRun01a_body.mtl', function(object){
              object.position.set( 0, -90, 0 );
              object.rotation.x = -Math.PI / 2;
  
              object.traverse(function(child){
                  if(child instanceof THREE.Mesh){
                      child.material.color.setRGB(25,0,0);
                  }
              });
  
              scene.add(object);
          }, onProgress, onError );
  </code></pre>
  
  <p>However, the object turns totally red. How can I change the color of the object without loosing the texture? Also, I only want some parts to be colored. I have another file with red parts that define areas where the color should be applied. How can I do that?</p>
  
  <p>Edit :</p>
  
  <p>Here is the whole code</p>
  
  <pre><code>&lt;script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r71/three.min.js"&gt;&lt;/script&gt;
  &lt;script src="OrbitControls.js"&gt;&lt;/script&gt;
  &lt;script src="DDSLoader.js"&gt;&lt;/script&gt;
  &lt;script src="MTLLoader.js"&gt;&lt;/script&gt;
  &lt;script src="OBJMTLLoader.js"&gt;&lt;/script&gt;
  &lt;script src="Detector.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
      window.onload = function() {
          var WIDTH = window.innerWidth;
          var HEIGHT = window.innerHeight;
          var PIXELRATIO = window.devicePixelRatio;
  
          var VIEW_ANGLE = 45;
          var ASPECT = WIDTH / HEIGHT;
          var NEAR = 1;
          var FAR = 2000;
  
          var mouseX = 0, mouseY = 0;
  
          var windowHalfX = window.innerWidth / 2;
          var windowHalfY = window.innerHeight / 2;
  
          var container = document.getElementById('container');
  
          var scene = new THREE.Scene();
  
          var camera = new THREE.PerspectiveCamera(VIEW_ANGLE, ASPECT, NEAR, FAR);
          camera.position.set( 0, 0, 200 );
          scene.add(camera);
  
          var ambient = new THREE.AmbientLight( 0x444444 );
          scene.add(ambient);
  
          var directionalLight = new THREE.DirectionalLight( 0xffeedd );
          directionalLight.position.set(0,0,1).normalize();
          scene.add(directionalLight);
  
          var onProgress = function(xhr){
              if(xhr.lengthComputable){
                  var percentComplete = xhr.loaded / xhr.total * 100;
                  console.log(Math.round(percentComplete, 2) + '% downloaded');
              }
          };
  
          var onError = function(xhr){};
  
          THREE.Loader.Handlers.add(/\.dds$/i, new THREE.DDSLoader());
  
          var loader = new THREE.OBJMTLLoader();
          loader.load('LFPL_IDRun01a_body.obj', 'LFPL_IDRun01a_body.mtl', function(object){
              object.position.set( 0, -90, 0 );
              object.rotation.x = -Math.PI / 2;
  
              object.traverse(function(child){
                  if(child instanceof THREE.Mesh){
                      child.material.color.setRGB(25,0,0);
                  }
              });
  
              scene.add(object);
          }, onProgress, onError );
  
          var renderer = new THREE.WebGLRenderer({antialias:true});
          renderer.setPixelRatio(PIXELRATIO);
          renderer.setSize(WIDTH, HEIGHT);
          container.appendChild(renderer.domElement);
  
          camera.lookAt(scene.position);
  
          animate();
  
          function animate(){
              requestAnimationFrame(animate);
              render();
          }
  
          function render(){
              renderer.render(scene, camera);
          }
      };
  &lt;/script&gt;
  </code></pre>