49 Three.js use THREE.TextGeometry to create three-dimensional text to solve the problem of Chinese scrambling


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;
                } );

Then write Chinese characters, and there will be no confusion

            asGeom: function () {
                // Delete the old model
                // 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;

                text2 = createMesh(new THREE.TextGeometry("Three.js", options));

Keywords: JSON github

Added by S A N T A on Mon, 04 May 2020 02:24:37 +0300