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,源码和模型


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

目录
相关文章
ECharts 提示框组件Tooltip属性大全(包含文本注释)
ECharts 提示框组件Tooltip属性大全(包含文本注释)
393 0
|
2月前
|
前端开发
前端基础(五)_CSS文本文字属性、背景颜色属性
本文详细介绍了CSS中关于文本和背景颜色的样式属性。包括字体大小、字体族、字体加粗、字体样式、文本行高、`font`属性、文本颜色、文本对齐方式、文本装饰线、首行缩进等文本属性,以及背景颜色、背景图片、背景重复、背景位置等背景属性。文章通过示例代码展示了这些属性的具体应用和效果。
41 3
前端基础(五)_CSS文本文字属性、背景颜色属性
|
4月前
|
JavaScript
文本,最简单的文本样式设计风格样式,让Element-UI盒子居中的写法
文本,最简单的文本样式设计风格样式,让Element-UI盒子居中的写法
|
6月前
|
前端开发
CSS属性涵盖了从文本样式到布局控制、从颜色处理到动画效果的各个方面
【5月更文挑战第31天】CSS属性涵盖了从文本样式到布局控制、从颜色处理到动画效果的各个方面
46 1
|
6月前
|
JavaScript
vue给li标签设置鼠标覆盖阴影样式
vue给li标签设置鼠标覆盖阴影样式
|
6月前
|
前端开发
HTML图片音频视频标签、超链接标签、列表标签和布局标签示例
HTML图片音频视频标签、超链接标签、列表标签和布局标签示例
83 0
Echarts自定义tooltip显示内容(隐藏小圆点)
Echarts自定义tooltip显示内容(隐藏小圆点)
288 0
Echarts除了tooltip其它的标签暂时都不支持html情况下label标签加背景图片的美化方案
Echarts除了tooltip其它的标签暂时都不支持html情况下label标签加背景图片的美化方案
131 0
|
前端开发 定位技术
百度地图标注提示框CSS气泡对话框实现属性解决方案
百度地图标注提示框CSS气泡对话框实现属性解决方案
126 0
|
JavaScript 定位技术
vue 里怎么使用 echarts 实现地图自动轮播功能、自定义 tooltip 悬浮位置提示、自定义 label 标签位置样式?
vue 里怎么使用 echarts 实现地图自动轮播功能、自定义 tooltip 悬浮位置提示、自定义 label 标签位置样式?
1007 0
vue 里怎么使用 echarts 实现地图自动轮播功能、自定义 tooltip 悬浮位置提示、自定义 label 标签位置样式?
下一篇
无影云桌面