threejs 创建CSS3DSprite精灵标签, 可以更新位置及内容(封装)

threejs 创建CSS3DSprite精灵标签, 可以更新位置及内容(封装)

  • ThreeCss3dSprite.js工具类
js 复制代码
import { CSS3DRenderer, CSS3DSprite } from "../js/three.js/examples/jsm/renderers/CSS3DRenderer.js";

class ThreeCss3dSprite {
	constructor() {
		this.sprite = null;
		this.labelRenderer = null;
		this.isShow = true;
		this.elementDiv = null;
	}

	/**
	 * 更新标签内容及位置
	 * @param {Number} x x位置
	 * @param {Number} y y位置
	 * @param {Number} z z位置
	 * @param {*} parentGroup 父模型
	 * @param {Array<String>} contentList 内容列表 ['经度:111', '纬度:222', '高度:333']
	 */
	updateSprite(x, y, z, parentGroup, contentList = []) {
		if (this.sprite) {
			this.elementDiv.innerHTML = this.#getSpriteText(contentList);
			this.sprite.position.set(x, y, z);
		} else {
			this.#initSprite(x, y, z, parentGroup, contentList);
		}
	}

	/**
	 * 设置标签显示或隐藏
	 * @param {Boolean} visible 是否显示
	 */
	setVisible(visible) {
		this.isShow = visible;
		this.sprite.visible = visible;
	}

	/**
	 * 刷新渲染(在Threejs屏幕刷新方法中调用)
	 * @param {*} scene 场景
	 * @param {*} camera 相机
	 */
	render(scene, camera) {
		if (this.labelRenderer) {
			this.labelRenderer.render(scene, camera);
		}
	}

	/**
	 * 创建标签
	 * @param {Number} x x位置
	 * @param {Number} y y位置
	 * @param {Number} z z位置
	 * @param {*} parentGroup 父模型
	 * @param {Array<String>} contentList 内容列表 ['经度:111', '纬度:222', '高度:333']
	 */
	#initSprite(x, y, z, parentGroup, contentList = []) {
		// 创建渲染器
		this.labelRenderer = new CSS3DRenderer();
		this.labelRenderer.setSize(window.innerWidth, window.innerHeight);
		this.labelRenderer.domElement.style.position = "absolute";
		this.labelRenderer.domElement.style.top = "0px";
		document.body.appendChild(this.labelRenderer.domElement);

		// 创建容器
		this.elementDiv = document.createElement("div");
		this.elementDiv.className = "tooltip";
		this.elementDiv.style.width = "12px";
		this.elementDiv.style.backgroundColor = "rgba(255, 255, 255, 0.5)";
		this.elementDiv.style.borderRadius = "0.5px";
		this.elementDiv.style.padding = "1px";
		this.elementDiv.style.color = "#000";
		this.elementDiv.innerHTML = this.#getSpriteText(contentList);

		// 创建精灵标签
		this.sprite = new CSS3DSprite(this.elementDiv);
		this.sprite.visible = this.isShow;
		this.sprite.position.set(x, y, z);
		parentGroup.add(this.sprite);
	}

	/**
	 * 返回标签内容
	 * @param {Array<String>} contentList 内容列表 ['经度:111', '纬度:222', '高度:333']
	 * @returns 标签内容
	 */
	#getSpriteText(contentList = []) {
		let tooltipContent = "";
		contentList.forEach(item => {
			tooltipContent += `<div style="font-size:1px;">${item}</div>`;
		});
		return tooltipContent;
	}
}

export { ThreeCss3dSprite };
  • 调用
js 复制代码
// 导入
import { ThreeCss3dSprite } from "@/utils/ThreeCss3dSprite.js";
// 创建对象
var sprite = new ThreeCss3dSprite();
// 在刷新方法中调用render
function animate() {
	requestAnimationFrame(animate);
	sprite.render(scene, camera);
}
// 创建或更新标签
const newPosition = new THREE.Vector3(100, 100, 100);
let list = [`经度: 200`, `纬度: 300`, `深度: 500`];
sprite.updateSprite(newPosition.x, newPosition.y, newPosition.z, scene, list);
相关推荐
耶啵奶膘1 小时前
uniapp-是否删除
linux·前端·uni-app
王哈哈^_^3 小时前
【数据集】【YOLO】【目标检测】交通事故识别数据集 8939 张,YOLO道路事故目标检测实战训练教程!
前端·人工智能·深度学习·yolo·目标检测·计算机视觉·pyqt
cs_dn_Jie3 小时前
钉钉 H5 微应用 手机端调试
前端·javascript·vue.js·vue·钉钉
开心工作室_kaic4 小时前
ssm068海鲜自助餐厅系统+vue(论文+源码)_kaic
前端·javascript·vue.js
有梦想的刺儿4 小时前
webWorker基本用法
前端·javascript·vue.js
cy玩具4 小时前
点击评论详情,跳到评论页面,携带对象参数写法:
前端
qq_390161775 小时前
防抖函数--应用场景及示例
前端·javascript
John.liu_Test6 小时前
js下载excel示例demo
前端·javascript·excel
Yaml46 小时前
智能化健身房管理:Spring Boot与Vue的创新解决方案
前端·spring boot·后端·mysql·vue·健身房管理
PleaSure乐事6 小时前
【React.js】AntDesignPro左侧菜单栏栏目名称不显示的解决方案
前端·javascript·react.js·前端框架·webstorm·antdesignpro