I’m working on a Three.js project where I have a model and a time slider. The goal is to change the model’s color with each value of the time slider and then export the model as a GLTF file to capture the color changes over the entire time period.
To achieve this, I’m calling a function that updates the model’s color for each time slider value. I’ve also added animations to the scene using requestAnimationFrame() to make the transitions smoother. However, when I export the scene as a GLTF model, the resulting model only displays the color of the last time slider value, rather than showing the color changes over the entire time period.
Could anyone provide insights into how to properly record the color changes over time and export an animated GLTF model that accurately captures these color transitions?
Thank you for your help!
I want all color changes to be seen in the GLTF model as a time slider (kind of !)
Code:
function animate() {
requestAnimationFrame(animate)
render()
}
function updateSliderValue(index) {
globalIndex = parseInt(index); //globalIndex is the slider value for the time slider(html element)
let time = timeData[globalIndex];
timeLabel.innerHTML = `t = ${time.toFixed(2)}s`; //sets the timeLabel to the current time
for (let modelNum in modelsData) {
colorModel(modelsData[modelNum]) //colors the model
}
// render();
}
function download(){
const exporter=new GLTFExporter()
const options = {
trs: false,
onlyVisible:true,
binary:false,
maxTextureSize:4096
};
exporter.parse(
scene,
function(result){
// console.log(result);
let model = new URL(window.location.href).searchParams.get('model');
let exoerimentId=dictOfResults[`${experimentSelector.value}`]
for (let key in dictOfResults) {
if (dictOfResults[key] === exoerimentId) {
exoerimentId =key;
break;
}
}
if ( result instanceof ArrayBuffer ) {
saveArrayBuffer(result, exoerimentId+'_'+model+'.glb');
}else {
const output = JSON.stringify( result, null, 2 );
console.log( output );
saveString( output,exoerimentId+'_'+model+'.gltf' );
}
},
function ( error ) {
console.log( 'An error happened during parsing', error );
},options);
}
function saveArrayBuffer(buffer,fileName){
const blob = new Blob([ buffer ], { type:'application/octet-stream' });
// console.log(blob)
save(blob,fileName)
}
function saveString( text, filename ) {
save( new Blob( [ text ], { type: 'text/plain' } ), filename );
}
function save(blob,fileName){
link.href=URL.createObjectURL(blob)
link.download=fileName
link.click()
}