"vue": "^3.2.45",
在线演示地址
threejs 自定义css2d标签点击弹窗效果
我们来给css2d标签来绑定点击事件，创建一个弹窗，点击标签后，显示弹窗。
点击标签显示弹窗，移动鼠标隐藏弹窗。
import {CSS2DRenderer, CSS2DObject} from 'three/examples/jsm/renderers/CSS2DRenderer.js';
import mapIcon1 from '../assets/mapIcon1.png'
import mapIcon2 from '../assets/mapIcon2.png'
let tooltip = null; // 创建一个tooltip变量用来存储信息窗口
tooltip = document.createElement('div');
tooltip.style.position = 'absolute';
tooltip.style.padding = '10px';
tooltip.style.borderRadius = '4px';
tooltip.style.color = '#fff';
tooltip.style.background = 'rgba(0, 0, 0, 0)';
tooltip.style.display = 'none'; // 初始设为不可见
tooltip.style.pointerEvents = 'none'; // 阻止鼠标事件触发
tooltip.style.zIndex = '999'; // 设置一个较高的z-index以确保其在最顶层
document.body.appendChild(tooltip); // 将tooltip添加到body
// 创建一个HTML标签
const tag = (name, x, y, z) => {
const div = document.createElement('div');
Object.assign(div.style, {
position: 'absolute'
div.innerHTML = `<div class="tagInfo">
<div class="tagInfoIcon"><img src="${mapIcon1}" alt=""></div>
<div class="tagInfoName">${name}</div>
<div>`;
const label = new CSS2DObject(div); //div元素包装为CSS2模型对象CSS2DObject
// 设置HTML元素标签在three.js世界坐标中位置
label.position.set(x, y, z);
// 更新点击事件处理函数
div.addEventListener('click', (e) => {
// 设置 tooltip 的内容为标签的名字
// tooltip.innerHTML = name;
console.log(e)
tooltip.innerHTML = `<div class="popWin">
<div class="popWins">
<div class="titleInfos">
<p class="cityName">${name}办案中心</p>
<div class="popWins2">
<div class="listItem">
<div class="icon"></div>
<div class="listItemr">
<p>子机构名称1</p>
<span>地址：宜阳县中心大街111号</span>
<div class="listItem">
<div class="icon"></div>
<div class="listItemr">
<p>子机构名称1</p>
<span>地址：宜阳县中心大街111号</span>
<div class="listItem">
<div class="icon"></div>
<div class="listItemr">
<p>子机构名称1</p>
<span>地址：宜阳县中心大街111号</span>
</div>`;
tooltip.style.display = 'block'; // 设置信息窗口为可见
// 设置 tooltip 的位置与被点击元素的位置相同
tooltip.style.left = `${e.pageX}px`;
tooltip.style.top = `${e.pageY}px`;
// 将 tooltip 显示出来
tooltip.style.display = 'block';
div.addEventListener('mouseleave', () => {
// 隐藏 tooltip
tooltip.style.display = 'none';
return label; //返回CSS2模型标签
// 创建一个CSS2渲染器CSS2DRenderer
const labelRenderer = (width, height) => {
const renderer = new CSS2DRenderer();
renderer.setSize(width, height);
Object.assign(renderer.domElement.style, {
position: 'absolute',
top: '0px',
left: '0px',
pointerEvents: 'none' // 避免模型标签HTML元素遮挡鼠标选择场景模型
return renderer;
export {tag, labelRenderer};
完整实例代码
代码环境 vue3 + vite + js + nodejs 14
