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);
相关推荐
Myli_ing11 分钟前
考研倒计时-配色+1
前端·javascript·考研
余道各努力,千里自同风14 分钟前
前端 vue 如何区分开发环境
前端·javascript·vue.js
软件小伟23 分钟前
Vue3+element-plus 实现中英文切换(Vue-i18n组件的使用)
前端·javascript·vue.js
醉の虾44 分钟前
Vue3 使用v-for 渲染列表数据后更新
前端·javascript·vue.js
张小小大智慧1 小时前
TypeScript 的发展与基本语法
前端·javascript·typescript
hummhumm1 小时前
第 22 章 - Go语言 测试与基准测试
java·大数据·开发语言·前端·python·golang·log4j
asleep7011 小时前
第8章利用CSS制作导航菜单
前端·css
hummhumm1 小时前
第 28 章 - Go语言 Web 开发入门
java·开发语言·前端·python·sql·golang·前端框架
幼儿园的小霸王2 小时前
通过socket设置版本更新提示
前端·vue.js·webpack·typescript·前端框架·anti-design-vue
疯狂的沙粒2 小时前
对 TypeScript 中高级类型的理解?应该在哪些方面可以更好的使用!
前端·javascript·typescript