GLTF changing 1 part of the model/mesh color

Questions
1

So In my GLTF there are 2 meshes I am trying to change the color of 1 of those meshes I know

    newMaterial = new THREE.MeshStandardMaterial({color: 0xff0000});    
    model.traverse((o) => {
          if (o.isMesh) o.material = newMaterial;
        });

The above will change the entire .gltf model but lets say I want to just change “LowpolyBlood_Bake_Blood_0.001” that’s in the gltf model how could I go about just changing that mesh instead of everything in the model?

the model is not textured it just has base colors applied

2

There are several methods .getObjectByXXX()
https://threejs.org/docs/index.html#api/en/core/Object3D.getObjectById
So you can do it like this:
model.getObjectById("LowpolyBlood_Bake_Blood_0.001").material.color.set( _some_color_ );
You can find object by id, by name, by property, using respective methods.

3

I was trying to use that but like this:
newMaterial = new THREE.MeshStandardMaterial({color: 0xff0000});
model.getObjectById(“LowpolyBlood_Bake_Blood_0.001”).newMaterial;

Should this work? I have my global var’s defined

4

model.getObjectById(“LowpolyBlood_Bake_Blood_0.001”).material = newMaterial; ?

5

Uncaught TypeError: Cannot set property ‘material’ of undefined
I’ll post the full code:

var container, controls;
	var camera, scene, renderergl;
	var model, blood, newMaterial;
      
	init();
	animate();

	function init() {
	    container = document.createElement('div');
	    container.className = "experience-div";
	    $('body').prepend(container);
	    $('.experience-div').addClass('transformv-active');
	    camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 10000);
	    scene = new THREE.Scene();
	
	    new RGBELoader().setDataType(THREE.UnsignedByteType).load('https://ui-unicorn.co.uk/hostinger-exp/royal_esplanade_1k.hdr', function(texture) {
	        var envMap = pmremGenerator.fromEquirectangular(texture).texture;
	        scene.environment = envMap;
	       
	        texture.dispose();
	        pmremGenerator.dispose();
	        var roughnessMipmapper = new RoughnessMipmapper(renderergl);
	        var loader = new GLTFLoader();
	        loader.load('sam.gltf', function(gltf) {
	             model = gltf.scene;
	             
	            gltf.scene.traverse(function(child) {
	                if (child.isMesh) {
	                    roughnessMipmapper.generateMipmaps(child.material);
	                }
	            });
	            gltf.scene.scale.set(.0065, .0065, .0065);
	            gltf.scene.position.set(0, -0.8, 0);
	            gltf.scene.rotation.set(0, 1.5, 0);
	            scene.add(model);
	            roughnessMipmapper.dispose();
	           
	        });
	    });
	    renderergl = new THREE.WebGLRenderer({
	        antialias: true,
			alpha: true
	    });
	    
	  
	   
	    renderergl.setPixelRatio(window.devicePixelRatio);
	    renderergl.setSize(window.innerWidth, window.innerHeight);
	    renderergl.toneMapping = THREE.ACESFilmicToneMapping;
	    renderergl.toneMappingExposure = 0.8;
	    renderergl.outputEncoding = THREE.sRGBEncoding;
		renderergl.setClearColor( 0x000000, 0 );
	    container.appendChild(renderergl.domElement);
	    $('.experience-div canvas').attr('id', 'canvas');
	    var pmremGenerator = new THREE.PMREMGenerator(renderergl);
	    pmremGenerator.compileEquirectangularShader();
	  


	     
}


	
	
	function FullPage() {
		
		if( $('#showcase-slider').length > 0 ){	
		 
	             
			$('#showcase-slider').fullpage({
				navigation: true,
        		navigationPosition: 'left',
				afterLoad: function(anchorLink, index, direction){	
				   	if(index === 1){
				   	     $('#about-slide-tx1').css('opacity','0.00');
				   	    if ($('body').hasClass('opaci')){
				   	            $('.experience-div').fadeTo('slow', 1.00);
				   	             $('.home-slide-title').fadeTo('1000', 1.00);
				   	               TWEEN.removeAll();
          
 var tweenScale = new TWEEN.Tween(model.scale)
        .to({x:.0065, y:.0065, z:.0065}, 2500).easing(TWEEN.Easing.Quadratic.InOut).start();
         var tweenRotation = new TWEEN.Tween(model.rotation)
        .to({x:0, y:1.5, z:0}, 2500).easing(TWEEN.Easing.Quadratic.InOut).start();
				   	           
				   	    }
				   	$("#fp-nav, .chat-on-page").removeClass('move-right');
						$("#fp-nav, .chat-on-page").css({opacity: '1'});
				   	}
					if(index === 2){
					   
					     $('body').addClass('opaci');
					     if ($('body').hasClass('opaci')){
					         
					         
					         $('#about-slide-tx1').delay(850).fadeTo(1000, 1.00);
					       
				   	          $('.experience-div').fadeTo(500, 0.55);
				   	                 $('.home-slide-title').fadeTo('1000', 0.00);
				   	                  TWEEN.removeAll();
				   	                   var tweenScale3 = new TWEEN.Tween(model.scale)
        .to({x:.01, y:.01, z:.01}, 2500).easing(TWEEN.Easing.Quadratic.InOut).start();
         var tweenRotation3 = new TWEEN.Tween(model.rotation)
        .to({x:0, y:3, z:0}, 2500).easing(TWEEN.Easing.Quadratic.InOut).start();
				   	                 
				   	    }
				   	    
				   	   
  
   //CHANGE MATERIAL COLOR OF THE BLOOD MESH
   //CHANGE MATERIAL COLOR OF THE BLOOD MESH
   //CHANGE MATERIAL COLOR OF THE BLOOD MESH
   newMaterial = new THREE.MeshStandardMaterial({color: 0xff0000});
   model.getObjectById('LowpolyBlood_Bake_Blood_0.001').material = newMaterial;
					    
					  
						$("#fp-nav, .chat-on-page").removeClass('move-right');
						$("#fp-nav, .chat-on-page").css({opacity: '1'});
					}
					
				}
							
       		});
			
		}
			

	}

I can’t see any obvious errors…

6

method didn’t find an object by id, so maybe try to use the method that gets an object by name?

7

I have tried both they are throwing ‘material’ of undefined for some reason…

newMaterial = new THREE.MeshStandardMaterial({color: 0xff0000});
model.getObjectByName('LowpolyBlood_Bake_Blood_0.001').material = newMaterial;

I’m totally lost and can’t see any obvious error

8

Just log your model to console and take a look at its structure, trying to realise what children of what type in has. Be creative :slight_smile:
Or you can provide a working live code example, so you’ll get help much quicker :slight_smile:

9

Yeah i’m doing that now if that fails I’ll rename the meshes in blender

10

So apparently because the name has a “.” in it the dot gets removed/and or renamed to
LowpolyBlood_Bake_Blood_0001 instead of LowpolyBlood_Bake_Blood_0.001
Thank you for you help :slight_smile: