Solution
If only a pile of Chinese characters is found???? It is proved that the font currently imported does not support Chinese characters. Our solution is to introduce json files that can support Chinese characters. So the question is, how do we get this json file?
-We can use ttf format file for conversion. There is an address for online conversion http://gero3.github.io/facetype.js/ , which can be converted to json format files at the current address.
-Then, according to the method in the previous section, you can import files asynchronously
//Create a loader to load fonts for later models
var loader = new THREE.FontLoader();
loader.load( 'assets/fonts/MicrosoftYaHei_Regular.json', function ( response ) {
gui.font = response;
gui.asGeom();
} );
Then write Chinese characters, and there will be no confusion
asGeom: function () {
// Delete the old model
scene.remove(text1);
scene.remove(text2);
// Recreate model
var options = {
size: gui.size,
height: gui.height,
weight: gui.weight,
font: gui.font,
bevelThickness: gui.bevelThickness,
bevelSize: gui.bevelSize,
bevelSegments: gui.bevelSegments,
bevelEnabled: gui.bevelEnabled,
curveSegments: gui.curveSegments,
steps: gui.steps
};
text1 = createMesh(new THREE.TextGeometry("Test Chinese characters", options));
text1.position.z = -100;
text1.position.y = 100;
scene.add(text1);
text2 = createMesh(new THREE.TextGeometry("Three.js", options));
scene.add(text2);
}