Embed text in ThreeJS models

There has been an html web page embedded in the model before, the address is ☞ threeJS loading html page in the model_threejs loading dom elements_Xiaocaihua29's blog-CSDN blog

This time it is purely about embedding text information in the model for simple text display.

Display renderings

 1. Use FontLoader text loader

Introduce text json file, the code is as follows

loadFont() {
      return new Promise(function (resolve, reject) {
        const loader = new THREE.FontLoader();
        loader.load('fonts/Microsoft YaqiHei Light_Regular.json', function (response) {
          try {
            resolve(response);
          } catch (error) {
            reject(error);
          }
        });
      });
    },

Two points to note:

• The location of the text file, placed under the public file

•  threejs does not support Chinese, we need to convert it

The conversion method can download the required text file ttf Microsoft Yaqi Black ttf download Microsoft Yaqi Black Light fine font download from this address - Script House (jb51.net)

it's hereTo convert it into a json file, just put the file under public. The Microsoft YaqiHei Light_Regular.json file in the above code is the converted file. The file has been uploaded and can be viewed in the resource. Address ☞ [Free] Microsoft YaqiHei Light_Regular.json json file resources-CSDN library

2. TextureLoader creates text

code show as below

 async createBoard() {
      const _this = this;
      const font = await _this.loadFont();
      const fontOption = {
        font: font,
        size: 20,
        height: 1,
        curveSegments: 1,
        bevelThickness: 1,
        bevelSize: 0,
        bevelEnabled: false,
        bevelSegments: 0
      };
      const textureLoader = new THREE.TextureLoader();
      // 导入纹理贴图基础贴图
      const img = require('@/assets/img/workbreachWhite2/bg.png');
      const imgLoader = textureLoader.load(img);
      // 给文本内容一个背景图，创建一个带纹理的平面（示例图中蓝色的背景）该段根据实际情况进行取舍
      const planeGeometry = new THREE.PlaneGeometry(400, 150);
      const planeMater = new THREE.MeshPhongMaterial({ map: imgLoader });
      const planeMesh = new THREE.Mesh(planeGeometry, planeMater);
      // 创建文字内容
      const txtMater = new THREE.MeshBasicMaterial({ color: 0xffffff });
      const txtGeometry = new THREE.TextGeometry('你好~Hello world !', fontOption);
      const txtMesh = new THREE.Mesh(txtGeometry, txtMater);
      _this.scene.add(txtMesh);
      _this.scene.add(planeMesh);
    },

In terms of details, the position and rotation angle can be adjusted according to your actual situation.