I have an angular threejs project where the page loads a model and you can choose a texture (image file [.png or .jpg]). There is also a GUI for texture mapping.
When a texture is mapped and exported, the exported model’s texture is different from the texture mapped on the page.
The full code of the component is full code.
But the main export function code is below:
exportModifiedModel(): void {
if (this.gunModel) {
// Save the current model state
this.saveModelState();
// Create a new exporter instance
const exporter = new GLTFExporter();
// Export the modified model
exporter.parse(this.gunModel, (gltf: any) => {
// Include the saved model state in the exported data
if (!gltf.userData) {
gltf.userData = {};
}
gltf.userData.modelState = this.modelState;
// Convert the GLTF data to a JSON string
const output = JSON.stringify(gltf, null, 2);
// Create a Blob object to save the GLTF data
const blob = new Blob([output], { type: 'application/json' });
// Create a download link for the GLTF data
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'modified_model.gltf'; // Set the filename here
// Simulate a click to trigger the download
a.click();
// Release the URL object
URL.revokeObjectURL(url);
}, (error) => {
console.error('Failed to export the model:', error);
});
} else {
console.error('The mesh is not available.');
}
}
saveModelState(): any {
if (this.gunModel) {
// Create an object to store the model state
const modelState = {
position: this.gunModel.position.clone(),
rotation: this.gunModel.rotation.clone(),
// Add more properties as needed
};
// Return the saved model state
return modelState;
} else {
console.error('The mesh is not available.');
return null;
}
}
}
