共计 846 个字符,预计需要花费 3 分钟才能阅读完成。
很多时候须要在利用中应用文本,有几种办法可供选择。
1.dom+css
用 html 是最简略快捷的形式,在是一种在大多数例子中用来进行描述性笼罩的形式。加如下内容:
<div id="info">Description</div>
通过以下 css 的设置能够笼罩在其余内容下面,尤其是当利用撑满全屏的时候
#info {
position: absolute;
top: 10px;
width: 100%;
text-align: center;
z-index: 100;
display:block;
}
2. 在 canvas 中画文本并用作纹理
用这种办法绘制文本会更简略一点
3. 在 3d 利用中创立模型而后导入到 threejs 中
如题
4. 间接用 threejs 绘制文本
如果你只想用 threejs 绘制程序和动静 3d 几何文本,能够创立一个 THREE.TextGeometry 的实例
new THREE.TextGeometry(text, parameters);
要让它展现,还须要创立 THREE.Font 实例来设置字体参数,查看 text 的 api 来理解更多细节,
例子:
WebGL / geometry / text
WebGL / shadowmap
如果字体不适合,或者你想用的字体这里没有,这里有个 python 脚本教程,让你能够把文本输入到 threejs 的 json 格局中。
5.bitmap 字体
BMFont(bitmap fonts) 容许批处理符号到单个 BufferGeometry 中,BMFont 渲染反对换行,字母间距,字距,带规范导数的带符号间隔字段,多通道带符号间隔字段,多纹理字体等等,能够查看 three-mesh-ui 或 three-bmfont-text。
一般字体能够在 A -frame 字体等我的项目中应用,也能够从任何.TTF 字体创立本人的字体,优化为只蕴含我的项目所需的字符。
一些实用工具:
- msdf-bmfont-web (基于网络的)
- msdf-bmfont-xml (命令行)
- hiero (桌面利用)
上一篇:threejs 文档翻译:二. 画线
正文完
发表至: javascript
2021-02-28