Threejs实现标签,自定义样式显示标签

简介: Threejs实现标签,自定义样式显示标签

1,介绍


使用threejs实现标签显示,这里只介绍如何实现显示标签功能,其他可查看往期文章。

效果图如下:

2,主要说明


实现标签使用CSS2DRenderer(2D渲染器) 进行渲染。

1,引入渲染器并初始化

2,创建dom元素对象,添加显示的内容和样式

3,把dom元素包装到CSS2DObject对象,并添加到场景中

4,使用CSS2DRenderer进行渲染显示


引入渲染器,并初始化

<script type="text/javascript" src="libs/CSS2DRenderer.js"></script>
var labelRenderer = new THREE.CSS2DRenderer();
labelRenderer.setSize(window.innerWidth, window.innerHeight);
labelRenderer.domElement.style.position = 'absolute';
labelRenderer.domElement.style.top = 0;
document.body.appendChild(labelRenderer.domElement);

创建标签,并添加到场景中

// 新建标签
function createLableObj(text, vector) {
  let laberDiv = document.createElement('div');//创建div容器
  laberDiv.className = 'laber_name';
  laberDiv.textContent = text + '\n' + "余量:123";
  let pointLabel = new THREE.CSS2DObject(laberDiv);   
  pointLabel.position.set(vector.x, vector.y, vector.z);
  return pointLabel;
}
let pointLabel = createLableObj(text, vector);
scene.add(pointLabel);


进行渲染


labelRenderer.render(scene, camera);


3,源码和模型


需要完整代码、模型或者其他源码,请进入博客首页查看其他文章或者留言

zuoben
+关注
目录
打赏
0
0
0
1
12
分享
相关文章
ECharts 提示框组件Tooltip属性大全(包含文本注释)
ECharts 提示框组件Tooltip属性大全(包含文本注释)
445 0
|
4月前
|
前端基础(五)_CSS文本文字属性、背景颜色属性
本文详细介绍了CSS中关于文本和背景颜色的样式属性。包括字体大小、字体族、字体加粗、字体样式、文本行高、`font`属性、文本颜色、文本对齐方式、文本装饰线、首行缩进等文本属性,以及背景颜色、背景图片、背景重复、背景位置等背景属性。文章通过示例代码展示了这些属性的具体应用和效果。
108 3
前端基础(五)_CSS文本文字属性、背景颜色属性
|
5月前
|
基于Vue2.0仿Element UI的el-tooltip实现一个气泡框组件,支持多数据类型的显示和内容为空时不显示气泡框
该文章介绍了如何基于Vue2.0仿照Element UI的el-tooltip组件实现一个自定义的气泡框组件,该组件能够根据内容是否为空智能显示或隐藏,支持多种数据类型的显示。
149 0
CSS常用属性之(列表、表格、鼠标)属性,(如果想知道CSS的列表、表格、鼠标相关的属性知识点,那么只看这一篇就足够了!)
CSS常用属性之(列表、表格、鼠标)属性,(如果想知道CSS的列表、表格、鼠标相关的属性知识点,那么只看这一篇就足够了!)
|
8月前
|
CSS属性涵盖了从文本样式到布局控制、从颜色处理到动画效果的各个方面
【5月更文挑战第31天】CSS属性涵盖了从文本样式到布局控制、从颜色处理到动画效果的各个方面
60 1
文本,最简单的文本样式设计风格样式,让Element-UI盒子居中的写法
文本,最简单的文本样式设计风格样式,让Element-UI盒子居中的写法
vue给li标签设置鼠标覆盖阴影样式
vue给li标签设置鼠标覆盖阴影样式
|
8月前
|
HTML图片音频视频标签、超链接标签、列表标签和布局标签示例
HTML图片音频视频标签、超链接标签、列表标签和布局标签示例
101 0
|
8月前
标签添加背景图
标签添加背景图
69 0
Echarts自定义tooltip显示内容(隐藏小圆点)
Echarts自定义tooltip显示内容(隐藏小圆点)
328 0
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等