How to export VRM in three.js - three.js

Question

Hope you are feeling good today!
I have a vrm file that has mtoon material and imported it to the three.js project using VRM loader.
But I faced missing material issues when I exported model using gltf exporter.
import * as THREE from "three";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
import { GLTFExporter} from "three/examples/jsm/exporters/GLTFExporter";
import Exporter from 'three-gltf-exporter';
import { OBJExporter } from "three/examples/jsm/exporters/OBJExporter";
import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader";
import { VRMLoader } from "three/examples/jsm/loaders/VRMLoader";
import { VRM } from "#pixiv/three-vrm";
async function download(
model: any,
fileName: any,
format: any,
screenshot: any
) {
const link = document.createElement("a");
link.style.display = "none";
document.body.appendChild(link);
function save(blob, filename) {
link.href = URL.createObjectURL(blob);
link.download = filename;
link.click();
}
function saveString(text, filename) {
save(new Blob([text], { type: "text/plain" }), filename);
}
function saveArrayBuffer(buffer, filename) {
console.log("buffer",buffer)
save(new Blob([buffer], { type: "application/octet-stream" }), filename);
}
// Specifying the name of the downloadable model
const downloadFileName = `${
fileName && fileName !== "" ? fileName : "CharacterCreatorModel"
}`;
if (format && format === "gltf/glb") {
const exporter = new Exporter();
var options = {
trs: false,
onlyVisible: false,
truncateDrawRange: true,
binary: true,
forcePowerOfTwoTextures: false,
maxTextureSize: 1024 || Infinity,
};
exporter.parse(
model.scene,
function (result) {
if (result instanceof ArrayBuffer) {
console.log(result);
saveArrayBuffer(result, `${downloadFileName}.glb`);
} else {
var output = JSON.stringify(result, null, 2);
console.log(output);
saveString(output, `${downloadFileName}.gltf`);
}
},
options
);
} else if (format && format === "obj") {
const exporter = new OBJExporter();
saveArrayBuffer(exporter.parse(model.scene), `${downloadFileName}.obj`);
} else if (format && format === "vrm") {
var vrmScene;
model.userData.gltfExtensions = { VRM: {} };
console.log("VRM ModelAAAAAA: ", model);
await VRM.from(model).then((vrm) => {
vrmScene = vrm.scene;
vrmScene.userData.gltfExtensions = { VRM: {} };
console.log(vrmScene)
// var result = JSON.stringify(vrm);
// saveString(result, `${downloadFileName}.vrm`);
});
const exporter = new Exporter();
var options = {
trs: false,
onlyVisible: true,
truncateDrawRange: true,
binary: true,
forcePowerOfTwoTextures: false,
maxTextureSize: 1024 || Infinity,
};
exporter.parse(
vrmScene,
function (result) {
var output = JSON.stringify(result, null, 2);
// saveString(output, `${downloadFileName}.vrm`);
console.log(result)
saveArrayBuffer(result, `${downloadFileName}.vrm`);
},
options
);
}
}
This is a screenshot of exported model. enter image description here
How can I fix that? Or there are any other solution for exporting vrm in three.js?
Any solutions are welcome!
Thanks in advance!🙇‍♀️