Three.js之绘制中文文字并跟随物体
本周更新的需求是物体上显示文字信息,效果图如下:
加载字体
import { FontLoader } from 'three/examples/jsm/loaders/FontLoader.js';
const loader = new FontLoader();
loader.load('/engine-static/fonts/FZCuHeiSongS-B-GB_Regular.json', (response) => {
this.threeFont = response;
});
坑1:中文的字体,three.js的案例中都是英文的,使用英文字体,中文显示就是???所以需要更换字体,打开电脑的字体库 找个最小的ttf字体,然后去这个网站进行转换成json格式,不可以本地引入,需要通过url可访问的引入,所以放到项目的static文件夹中
更改字体网站:http://gero3.github.io/facetype.js/坑2:字体比较大,加载需要时间,如果在字体加载前去创建文字会报错,需要等字体加载成功后再绘制文字
创建字体
let textGeo = new TextGeometry(text, {
font: self.threeFont, // 字体
size: 0.5, // 大小
height: 0 // 是否是立体的文字,如果是2d的显示就设置0
});
let textMaterials = new THREE.MeshBasicMaterial({
color: 'red',
wireframe: false,
transparent: true,
opacity: 1,
side: THREE.DoubleSide
})
let textMesh = new THREE.Mesh(textGeo, textMaterials);
textMesh.name = 'labelText';
textMesh.position.set(0, (item.height / 1.95), 0); // 保持一点点的距离
// 跟随物体旋转
textMesh.rotation.z = -item.rotateZ;
// 不跟随物体扩大或者缩小
textMesh.scale.x = item.originWidth / item.width;
textMesh.scale.y = item.originHeight / item.height;
textMesh.scale.z = item.originDepth / item.depth;
// 新增至于物体中
wrapper.add(textMesh);
Three.js之绘制中文文字并跟随物体的更多相关文章
- JS实现中英文混合文字溢出友好截取功能
在显示字符串的时候,避免字符串过长往往会对字符串进行截取操作,通常会用到js的 substr 或者 substring方法, 以及 字符串的length属性 substr() 方法可在字符串中抽取从 ...
- python 解决cv2绘制中文乱码
因为使用cv2.putText() 只能显示英文字符,中文会出现乱码问题, 因此使用PIL在图片上绘制添加中文,可以指定字体文件. 大体思路: OpenCV图片格式转换成PIL的图片格式: 使用PIL ...
- three.js低版本添加文字(如71版本)
研究了半天,最后终于加载成功了,记录一下three.js 71版本的文字加载,下面开始整个过程 首先,将ttf字体转换成js文件 源码版: https://github.com/gero3/facet ...
- html+js+highcharts绘制圆饼图表的简单实例
下面我就为大家带来一篇html+js+highcharts绘制圆饼图表的简单实例.我觉得挺不错的,现在就分享给大家,也给大家做个参考.一起跟随我过来看看吧 实例如下: 1 2 3 4 5 6 7 8 ...
- Firebug中调试中的js脚本中中文内容显示为乱码
Firebug中调试中的js脚本中中文内容显示为乱码 设置 页面 UFT-8 编码没用, 解决方法:点击 "Firebug"工具栏 中的"选项"---" ...
- 在Arcscene绘制管线三维横断面(AE绘制三维点阵文字)
根据数据信息动态生成三维管线及横断面表格.效果图如下: 在获取信息后,直接构造点阵进行文字绘制即可. 绘制IElement代码: /// <summary> /// 绘制三维文字 /// ...
- js中实现中文按字母拼音排序
js中实现中文按字母拼音排序 var Pinyin = (function (){ var Pinyin = function (ops){ this.initialize(ops); }, opti ...
- JS URL传中文参数引发的乱码问题
今天的项目中碰到了一个乱码问题,从JS里传URL到服务器,URL中有中文参数,服务器里读出的中文参数来的全是“?”,查了网上JS编码相关资料得以解决. 解决方法一: 1.在JS里对中文参数进行两次转码 ...
- (转)js正则表达式之中文验证
今天做表单提交的输入框条件验证,验证是否包含中文:网上搜了一圈基于js正则表达式的验证基本不好用,而且大多都是出自一两篇原文的转帖!到底什么才是拿来主义呢.根据搜索结果,本文取精华,告诉大家一个好用的 ...
随机推荐
- 小记录:flask的DEBUG开关
请求站点的如下位置: http://www.ahfu.com/ahfuzhang/?debugger=yes&cmd=resource&f=style.css 居然正常范围了CSS文件 ...
- 611. Valid Triangle Number
Given an array consists of non-negative integers, your task is to count the number of triplets chose ...
- 从容器镜像的选择-alpine 说起
在 容器崛起之前,Alpine 还是个无名之辈,可能是因为大家并不是很关心操作系统本身的大小,毕竟大家只关心业务数据和文档,程序.库文件和系统本身的大小通常可以忽略不计. 容器技术席卷整个软件产业之后 ...
- rsync实时备份监控命令(详细大全)
目录 一:rsync介绍 1.rsync简介 2.rsync特性 3.rsync应用场景 4.rsync的传输方式 5.Rsync传输模式 二:RSYNC使用参数 三:参数使用案例 一:rsync介绍 ...
- .NET 7 预览版来啦,我升级体验了
听说.NET 7 来了,站长怎能不尝鲜呢,在除夕当天将体验情况简单汇报下,然后迎新春喽: 本文目录 .NET 7 详情(Proposed .NET 7 Breaking Changes #7131) ...
- ApacheCN PythonWeb 译文集 20211028 更新
Django By Example 中文版 1 创建一个博客应用 2 为博客添加高级功能 3 扩展你的博客应用 4 创建一个社交网站 5 分享内容到你的网站 6 跟踪用户动作 7 构建在线商店 8 管 ...
- 理解https中的安全及其实现原理
Google的一份网络上的 HTTPS 加密透明报告(数据截至2022年1月)中指出HTTPS 连接的普及率在过去几年激增,互联网上排名前 100 位的非 Google 网站HTTPS 使用情况为:9 ...
- js 斐波那契数列的获取和曲线的实现(每日一更)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...
- Net6 DI源码分析Part2 Engine,ServiceProvider
ServiceProvider ServiceProvider是对IServiceProvider实现,它有一个internal的访问修饰符描述的构造,并需要两个参数IServiceCollectio ...
- golang 获取当月最后一天日期
now := time.Now() year, month, day := now.Date() //fmt.Println(year, month, day) //2021 September 1 ...