CODEWITHSUNDEEP
typescriptthree.js
horytnik
horytnik

Reputation: 65

How to dynamically change vertex colors in Three JS

I am adding model elements via STL loader and I am able to set there vertex colors. I also need to change this colors later and I am trying to do it via following code. Unfortunately colors are not changed. Does someone know how to change it?

let geometry = this.scene.getObjectByName("myFile.stl").geometry   
const color = new THREE.Color(0xFF0000);  
// @ts-ignore 
for(let idx = 0; idx < geometry.attributes.color.count; idx++) 
{ 
    // @ts-ignore 
    geometry.getAttribute("color").setXYZ( idx, color.r, color.g, color.b ) 
}

Upvotes: 2

Views: 873

Answers (1)

Mugen87
Mugen87

Reputation: 31076

After changing the values, you have to set the needsUpdate flag of the buffer attribute to true. Try it with:

let geometry = this.scene.getObjectByName("myFile.stl").geometry; 
const color = new THREE.Color(0xFF0000);  
const colorAttribute = geometry.getAttribute("color");
for(let idx = 0; idx < colorAttribute.count; idx++) 
{ 
    // @ts-ignore 
    colorAttribute.setXYZ( idx, color.r, color.g, color.b ) 
}
colorAttribute.needsUpdate = true;

Upvotes: 2

Related Questions