JS_0074:new Promise await 等待后执行,同步加载 加载threejs 加载字体

1,

一,使用 TextGeometry创建3D文字

  1.需加载字体配合使用,使用THREE.FontLoader

// 加载字体
   loadFont() {
     return new Promise(function (resolve, reject) {
       const loader = new THREE.FontLoader();
       loader.load( './helvetiker.json', function ( response ) {
         try {
           resolve(response)
         } catch(error) {
           reject(error)
         }
       });
     })
 
   }
  注意:如果出现中文乱码问题,需挑选中文字体文件再转换成json使用,转换地址:http://gero3.github.io/facetype.js

  2,使用 TextGeometry添加

const font = await this.loadFont()
 
fontOption = {
  font: font,
  size: 0.5,
  height: 0,
  curveSegments: 1,
  bevelThickness: 1,
  bevelSize: 0,
  bevelEnabled: false,
  bevelSegments: 0,
};
 
  
let txtMater = new THREE.MeshBasicMaterial({color: 0xffffff});
 
 const txtGeo1 = new THREE.TextGeometry('你好123', fontOption);
 
 let txtMesh1 = new THREE.Mesh(txtGeo1, txtMater);
 
 txtMesh1.position.set(0, 0, 8);
 
 this.scene.add(txtMesh1);   

 

posted @ 2023-03-13 09:48  琥珀君  阅读(195)  评论(0编辑  收藏  举报