ThreeJS 模型中内嵌文字

之前有过模型中内嵌html网页,地址☞threeJS 模型中加载html页面_threejs 加载dom元素_小菜花29的博客-CSDN博客

这次是纯粹的在模型中嵌入文本信息,进行简单的文字展示

展示效果图

1. 使用FontLoader文字加载器

引入文本json文件,代码如下

javascript 复制代码
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);
          }
        });
      });
    },

着重注意的两点:

  • 文本文件位置,放在public文件下
  • threejs不支持中文,需要我们转换下

转换方式可以从该地址下载所需的文字文件ttf微软雅旗黑ttf下载 微软雅旗黑 Light 细体 字体下载-脚本之家 (jb51.net)

在这里进行转换成json文件,将文件放入public下面即可,上述代码中的Microsoft YaqiHei Light_Regular.json文件就是转换后的文件,文件已上传,在资源可以查看,地址☞【免费】微软雅黑文字的json文件资源-CSDN文库

2. TextureLoader创建文本

代码如下

javascript 复制代码
 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);
    },

细节方面,位置和旋转角度根据自己实际情况进行调整

相关推荐
程序员爱钓鱼1 分钟前
Go语言泛型-泛型约束与实践
前端·后端·go
前端小巷子3 分钟前
web从输入网址到页面加载完成
前端·面试·浏览器
江城开朗的豌豆4 分钟前
Vue路由动态生成秘籍:让你的链接'活'起来!
前端·javascript·vue.js
晓得迷路了4 分钟前
栗子前端技术周刊第 88 期 - Apache ECharts 6.0 beta、Deno 2.4、Astro 5.11...
前端·javascript·echarts
江城开朗的豌豆10 分钟前
在写vue公用组件的时候,怎么提高可配置性
前端·javascript·vue.js
江城开朗的豌豆10 分钟前
Vue路由跳转的N种姿势,总有一种适合你!
前端·javascript·vue.js
江城开朗的豌豆11 分钟前
Vue路由玩法大揭秘:三种路由模式你Pick谁?
前端·javascript·vue.js
江城开朗的豌豆11 分钟前
Vue路由守卫全攻略:给页面访问装上'安检门'
前端·javascript·vue.js
小磊哥er18 分钟前
【前端工程化】前端组件模版构建那些事
前端
尘浮72818 分钟前
60天python训练计划----day59
开发语言·python