The purpose
This guide will demonstrate exporting an MMD model (using Animasa’s Hatsune Miku model as an example) imported into Blender, to a glb file viewable in Three.js.
See below for loading instructions.
Modify material
When importing the PMD file, the material uses “MMDShaderDev,” but this doesn’t render correctly in Three.js when exporting to GLB.
Therefore, the material settings need to be changed. Select “初音ミク_mesh”.
Select the material properties.
Select a material from the list, click “Use Node” to deselect it, and change the blend mode from “Alpha Hash” to “Opaque”.
The “Use Node” option should be grayed out, as shown in the image below, to indicate that it is deselected.
In this model, the necessary color is assigned to the base color when “Use Nodes” is deselected; however, manual configuration may be required for other models.
apply the above material settings to all materials.
Export as glb
From the “File” menu, select “Export” -> “glTF 2.0 (.glb/.gltf)”.
In addition to the default settings, the export settings should be configured as follows: check “Visible Objects” and “Use Current Frame,” then save.
Result
We are able to display the exported GLB file in Three.js.
The poses and expressions set in Blender are correctly applied.
For instructions on displaying glb files with three.js, please refer to the following page.
The image above also demonstrates lighting and camera settings in addition to loading the model.
comment