在 three 中使用中文已知两种方法

方法二是使用facetype.js在这里将字体文件转换为JSON 下载到three使用

• 打开 facetype.js 并将正版正体上传并下载JSON
• 在 three.js引入json
• 使用中文字体示

以下是代码示例

    const width = DOMEl.clientWidth;
    const height = DOMEl.clientHeight;

    const loader = new FontLoader();

    const fonts = loader.parse(fontJson);
    console.log(fonts,"loader");

    const renderer = new THREE.WebGLRenderer();
    renderer.setSize( width, height );
    DOMEl.appendChild( renderer.domElement );
    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera( 45, width / height, 1, 2000 );
    camera.position.set( 0, 0, 100 );
    camera.lookAt( 0, 0, 0 );



	const geometry = new TextGeometry( "test 中文字体", {
		font: fonts,
		size: 80,
		depth: 5,
		curveSegments: 12,
		bevelEnabled: 0,
		bevelThickness: 10,
		bevelSize: 8,
		bevelSegments: 5
	} );



    const textMaterial = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
    // 创建网格
    const textMesh = new THREE.Mesh(geometry, textMaterial);

    textMesh.position.z = -1000;
    textMesh.position.x = -100;


    
    const startPlay = function () {

        textMesh.rotation.x += 0.01;
        textMesh.rotation.y += 0.01;
        renderer.render( scene, camera );

        requestAnimationFrame( startPlay );
    }

    startPlay();

    scene.add(textMesh);
    renderer.render( scene, camera );

方法二参考 地址