How to dynamically modify bufferGeometry color attributes on a loaded model?

Questions
, ,
1

Hi,

based on that example: https://threejs.org/examples/webgl_geometry_colors

I wrote that function

function changeSkinMeshColor(skinMesh,x,y,z){   

         skinMesh.material.vertexColors = true; 

        const geometry =  skinMesh.geometry    

        let count      =   geometry.attributes.position.count;         

        if(!geometry.attributes.color){     

        geometry.setAttribute( 'color', new THREE.BufferAttribute( new Float32Array( count * 3 ), 3 ) );        

        }; 

         const colors = geometry.attributes.color;        

        for (let i = 0;i < count ;i++)colors.setXYZ(i,x,y,z); 

        colors.needsUpdate = true;

    }

i am it using it like so :

skinMeshConsole-before
skinMeshConsole-before970Ă—290 26.2 KB

const skinMesh = characters[0].children[2]
changeSkinMeshColor(skinMesh,0.3,0.3,0.3)

skinMesh-after
skinMesh-after800Ă—235 6.47 KB

but nothing happened…
I am missing something but I don’t understand what.

Thanks for your help!

2

it’s crazy,

I copy past line by line in the console and had the result as expected

inConsole
inConsole866Ă—699 50 KB

I wrapped the code into a function and it’s not working…

function
function780Ă—500 57.7 KB 

 function changeSkinMeshColor(){   
        let  skinMesh =  characters[0].children[2];
        skinMesh.material.vertexColors = true; 
        const geometry =  skinMesh.geometry;    
        let count      =   geometry.attributes.position.count;         
        if(!geometry.attributes.color){	    
       	geometry.setAttribute( 'color', new THREE.BufferAttribute( new Float32Array( count * 3 ), 3 ) );        
        };   

         for (let i = 0;i < count ;i++){
           geometry.attributes.color.setXYZ(i,0,1,0);
           }; 
         geometry.attributes.color.needsUpdate = true;
    }

should I take a Javascript course or what? :slight_smile: .
Seriously could someone explain to me what is going on here?

thanks

1 Like
3

Where and when do you call changeSkinMeshColor() function?

4

I called the function in the console (i was trying to make that work ) as shown in the second picture of my second post.
As you can see I don’t have any errors.

I first tried line by line in the console, once I was able to change the color,
I created the function then reloaded the page and called the function with no effect.

Your question pushed me to try to call the function in the onLoad callback of the GLTFLoader…and it worked !!

But why it does not work in the console? there are concepts that I am missing here?
I waited a long time to call it in the console.

5

actually, this code is correct.

    function changeSkinMeshColor(skinMesh){
       const x =  Math.random();
       const y =  Math.random();
       const z =  Math.random() ;      
       skinMesh.material.vertexColors = true; 
       const geometry =  skinMesh.geometry;    
       const count    =   geometry.attributes.position.count; 
       if(!geometry.attributes.color){	    
       const buffer =  new THREE.BufferAttribute( new Float32Array( count * 3 ), 3 )
       geometry.setAttribute( 'color', buffer );        
       };   
        for (let i = 0;i < count ;i++)geometry.attributes.color.setXYZ(i,x,y,z);   
        geometry.attributes.color.needsUpdate = true;
    }

Indeed, I attached a button to it, but for some reason, I HAVE TO first call the function in the onLoad function of the GLTFLoader… otherwise, the button has no effect.

If I comment the call of the function in the onLoad callback then I HAVE TO execute the code in the console line by line …to make that button works. Calling the function directly in the console has no effect ! ( with no errors…)

I am very curious about the reason for these behaviors.

Thanks in advance.