threejs三维模型添加文字标签，及显示文字的方式
上次在文章介绍了三维二维坐标的转换方法，今天结合一个用例具体说下用法。
在三维模型场景展示中，经常会需要对各个模型加上文字标签，而无论三维场景如果旋转变换一般文字标签总是需要面向摄像机方向，这时候代表深度的z坐标失去作用，只需用到x,y坐标。这时候需要把三维坐标转换为基于屏幕上的二维坐标。
三维模型上加文字标签最常用的方法应该就是（DOM + CSS）基于传统html5的文字实现，用于添加描述性叠加文字的方法。具体实现是声明一个绝对定位的DIV，并且保证z-index够大，保证能够显示在3D场景之上。然后计算三维坐标对应的二维坐标，根据二维坐标去设置DIV的left和top属性，让DIV在需要的位置进行展示。这种方式实现简单，DIV可方便使用页面CSS效果进行UI设置。
在三维场景上增加一个立方体，在球体和立方体上分别加上个文字标签。
添加立方体模型：
var cubeMaterial = new THREE.MeshStandardMaterial({color:0x00ffff});
cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
cube.position.set(300,100,100);
scene.add(cube);
页面上添加两个div及css样式：
<div id=\”info1\”>这是球体</div>
<div id=\”info2\”>这是立方体</div>
#info1 {
position: absolute;
top: 0;
width: 100px;
height: 50px;
text-align: center;
z-index: 100;
display:block;
padding: 10px;
background: rgba(255, 255, 255, 0.8);
line-height: 1;
border-radius: 5px;
}
#info2 {
position: absolute;
top: 0;
width: 100px;
height: 50px;
text-align: center;
z-index: 100;
display:block;
padding: 10px;
background: rgba(255, 255, 255, 0.8);
line-height: 1;
border-radius: 5px;
}
在OnRender方法中写坐标系转换代码：
这样无论我怎么旋转缩放或移动三维模型，文本DIV标签都能显示在合适的位置。
在threejs三维场景中添加文字有很多不同的方法，上面说的DIV+CSS的方式应该是最简单也最快速方式。
如果希望在三维模型中绘制文本，可以把文字图片用作Texture（纹理），绘制在模型表面。
另一种常用的方式是使用three.js自带的文字几何体来添加3d或2d的文字，这种方法可以创建能够由程序改变的、动态的3D文字，可以创建一个其几何体为THREE.TextGeometry的实例的网格。需要把字体文件添加进来，在示例font目录下有json格式的几种字体。
示例：
接着我们在添加一个2d文字
需要注意一点，在threejs包中提供的字体都是英文字体，如果想显示中文需要加入中文字体的json文件。
可以通过Facetype.js把中文字体文件转成json格式。
还有另一种更简单地添加文字的方式是使用精灵对象添加文字，不需要引入什么字体，使用Cavas直接绘制文字，因为精灵对象总是面向摄像头的，处理起来也方便。
代码：
最后一种添加文字的方式是使用BMFonts (位图字体) ，可以将字形批处理为单个BufferGeometry。位图字体渲染支持自动换行、字母间距、字句调整等很多特性，有兴趣的朋友可以去Github看一下这个开源项目three-bmfont-text。
Highlight.js – 前端的代码语法高亮库
千辛万苦写了篇技术分享，贴了一堆代码，兴高采烈地发到了自己的博客网站上。结果却发现代码全是白底黑字，字体还难看得很，你瞬间就没了兴致。能不能让网页也能像 IDE 那样，做带语法高亮的炫酷显示呢？来看一看 Highlight.js 吧，看这个语法高亮库如何点亮你的代码。
Highlight.js
Highlight.js，是在 Github 上由 highlight.js 组织开源的前端代码语法高亮库，代码仓库在 https://github.com/highlightjs/highlight.js，目前版本为 10.1.0。其不依赖于任何框架，自带对于大量编程语言和标记语言的语法高亮规则，和主流的高亮色彩方案，且可以自由扩展。其支持自动语言检测，使用极为方便，是在网页上进行语法高亮的不二之选。
highlight.js语法高亮库
Highlight.js 的 CSS 文件的选择决定高亮配色方案，默认为 Default，另外还有如 Monokai Sublime、Ocean、Solarized Dark、Tomorrow 等经典的主流配色方案。
而 JS 文件的选择决定可以支持的语言。主要的 highlight.min.js 包含了一些主流的语言，包括 C++、XML、Markdown、Java 等。如果需要一些其他的语言，则要另外引用该语言对应JS文件。
Highlight.js 在浏览器中可以简单的引用 CDN 来使用：
Highlight.js 使用十分简单，在引用了 CSS 和 JS 后，执行
Highlight.js就会自动查找网页中以标签 pre 和 code 所包裹的代码
并自动检测代码语言，进行高亮渲染。我们也可以为 code 标签添加语言名称的 class，来显式地标明代码语言。我们可以看一个使用示例，注意实际代码中尖括号等 HTML 转义字符需要进行转义处理：
该网页对于 C++ 语言片段使用了 Monokai Sublime 主题进行了语法高亮渲染：
使用Highlight.js渲染C++代码
可以看到，包括关键字、注释和字面值等都有了不同颜色的渲染，输出十分美观。以下则是使 Dracula 主题对 Javascript 代码渲染的例子：
使用Highlight.js渲染Javascript代码
我们也可以不使用 pre 和 code 标签来包裹代码，改为使用自定义的容器，使用时需要注意换行和等宽字体的问题。
在渲染大量代码时，为避免浏览器卡死，可以使用 Web Worker 来在后台进行渲染：
Highlight.js 使得在前端页面进行语法高亮变得十分方便，为在网页显示的代码增添了颜色和生机。
Highlight.js 文档详尽，设计简洁，为编写新的语言支持和配色方案提供了很大支持，定制化能力和可扩展性极强。Highlight.js 的代码包含了对于各种语言的语法解析，和不同配色方案的设计，对于对编程语言和语法高亮领域感兴趣的开发者是一座珍贵的宝库。
本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com
文章为作者独立观点不代本网立场，未经允许不得转载。
投诉举报&联系我们：
