由于一个项目标签过多,一个个写html标签的话重复太多,于是我自己写了个生成标签的函数
传三个参数data是你需要生成标签时添加的信息数据,scene是场景,需要在场景中查询模型定位,最后是function方法,比如你有个按钮需要点击,function就是你要触发的函数
import * as THREE from 'three';
import { CSS2DObject } from 'three/addons/renderers/CSS2DRenderer.js';
//导入纹理贴图加载器
let textureLoader = new THREE.TextureLoader();
let texture = textureLoader.load('/public/gqtt.png');
//生成一个正方形平面矩形
const geometry = new THREE.PlaneGeometry(0.5, 0.5);
const material = new THREE.MeshBasicMaterial({
color: 0x00ffff,
map: texture,
transparent: true,
opacity: 0.8,
side: THREE.DoubleSide,
});
let circleMesh = new THREE.Mesh(geometry, material);
circleMesh.renderOrder = 1;
let containerDiv: any;
export function addFireTitle(data: any, scene: any, fun: Function | any) {
// console.log('add的模型',innerModel);
let titleModel = scene.getObjectByName(data.name);
// console.log('titleModel', titleModel);
let position = new THREE.Vector3();
titleModel.getWorldPosition(position);
containerDiv = document.createElement('div');
containerDiv.classList.add('needRemoveTitle');
containerDiv.style.justifyContent = 'center'; // 水平居中
containerDiv.style.alignItems = 'center'; // 垂直居中
containerDiv.style.width = '300px'; // 设置div的宽度
containerDiv.style.height = '245px'; // 设置div的高度
containerDiv.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';
containerDiv.style.position = 'relative';
containerDiv.style.top = "-280px";
containerDiv.style.zIndex = '1';
containerDiv.style.pointerEvents = 'auto';
var back = document.createElement('div');
back.style.backgroundImage = 'url(/public/tag.png)';
back.style.backgroundSize = 'cover';
back.style.width = '300px'; // 设置div的宽度
back.style.height = '245px'; // 设置div的高度
var foot = document.createElement('div');
foot.style.backgroundImage = 'url(/public/botback.png)';
foot.style.backgroundSize = 'cover';
foot.style.position = 'absolute';
foot.style.left = '137.5px';
foot.style.width = '25px';
foot.style.height = '127px';
let circleM = circleMesh.clone();
containerDiv.appendChild(back);
containerDiv.appendChild(foot);
document.body.appendChild(containerDiv);
// console.log('元素',containerDiv);
var label = new CSS2DObject(containerDiv);
label.position.copy(position);
circleM.position.copy(position);
circleM.rotateX(Math.PI / 2);
//根据type的判断,添加不同的内容
if (data.type == '火线') {
containerDiv.style.width = '240px'; // 设置div的宽度
containerDiv.style.height = '160px'; // 设置div的高度
containerDiv.style.top = "-200px";
back.style.backgroundSize = '100% 100%';
back.style.width = '240px'; // 设置div的宽度
back.style.height = '160px'; // 设置div的高度
foot.style.left = '107px';
var textParagraph = document.createElement('p');
textParagraph.textContent = data.name;
textParagraph.style.color = 'white'; // 设置文字颜色为白色
textParagraph.style.fontSize = '13px';
textParagraph.style.position = 'absolute';
textParagraph.style.top = '-8px';
textParagraph.style.left = '40px';
containerDiv.appendChild(textParagraph);
let content = document.createElement('div');
containerDiv.appendChild(content);
let html = `
<div width="300" height="110" >
<div style="display: flex; justify-content: space-between; color: '#01ADDC';padding: 40px 10px 0px 10px;">
<div style="color: #01ADDC;margin-left:10px;">${data.text}
<button class="${data.className}">下一步</button>
</div>
</div>
</div>
`
back.innerHTML = html;
let button = document.getElementsByClassName(data.className);
// console.log('按钮', button);
button[0].addEventListener('click', () => {
fun()
})
} else if (data.type == 'middle') {
containerDiv.style.width = '240px'; // 设置div的宽度
containerDiv.style.height = '160px'; // 设置div的高度
containerDiv.style.top = "-200px";
back.style.backgroundSize = '100% 100%';
back.style.width = '240px'; // 设置div的宽度
back.style.height = '160px'; // 设置div的高度
foot.style.left = '107px';
var textParagraph = document.createElement('p');
textParagraph.textContent = data.name;
textParagraph.style.color = 'white'; // 设置文字颜色为白色
textParagraph.style.fontSize = '13px';
textParagraph.style.position = 'absolute';
textParagraph.style.top = '-8px';
textParagraph.style.left = '40px';
containerDiv.appendChild(textParagraph);
let content = document.createElement('div');
containerDiv.appendChild(content);
let html = `
<div style="width: 240px;height: 160px;position: relative;" >
<div style="display: flex; justify-content: space-between; color: '#01ADDC';padding: 40px 10px 0px 10px;">
<div style="color: #fff;margin-left:10px;">${data.text}
</div>
</div>
<button class="${data.className}" style="position:absolute;bottom: 5px;right: 5px;border: 1px solid #ffffff;background-color: rgba(0, 0, 0, 0);color:#fff;border-radius: 4px;">下一步</button>
</div>
`
back.innerHTML = html;
let button = document.getElementsByClassName(data.className);
// console.log('按钮', button);
button[0].addEventListener('click', () => {
fun()
})
} else if (data.type == 'big') {
containerDiv.style.width = '360px'; // 设置div的宽度
containerDiv.style.height = '222px'; // 设置div的高度
containerDiv.style.top = "-200px";
back.style.backgroundSize = '100% 100%';
back.style.width = '360px'; // 设置div的宽度
back.style.height = '222px'; // 设置div的高度
foot.style.left = '167px';
var textParagraph = document.createElement('p');
textParagraph.textContent = data.name;
textParagraph.style.color = 'white'; // 设置文字颜色为白色
textParagraph.style.fontSize = '18px';
textParagraph.style.position = 'absolute';
textParagraph.style.top = '-8px';
textParagraph.style.left = '60px';
containerDiv.appendChild(textParagraph);
let content = document.createElement('div');
containerDiv.appendChild(content);
let html = `
<div style="width: 360px;height: 222px;position: relative;" >
<div style="display: flex; justify-content: space-between; color: '#01ADDC';padding: 60px 10px 0px 10px;">
<div style="color: #fff;margin-left:10px;">${data.text}
</div>
</div>
<button class="${data.className}" style="position:absolute;bottom: 15px;right: 15px;border: 1px solid #ffffff;background-color: rgba(0, 0, 0, 0);color:#fff;border-radius: 4px;">下一步</button>
</div>
`
back.innerHTML = html;
let button = document.getElementsByClassName(data.className);
// console.log('按钮', button);
button[0].addEventListener('click', () => {
fun()
})
} else if (data.type == 'water') {
containerDiv.style.width = '200px'; // 设置div的宽度
containerDiv.style.height = '140px'; // 设置div的高度
containerDiv.style.top = "-200px";
back.style.backgroundSize = '100% 100%';
back.style.width = '200px'; // 设置div的宽度
back.style.height = '140px'; // 设置div的高度
foot.style.left = '87.5px';
var textParagraph = document.createElement('p');
textParagraph.textContent = data.name;
textParagraph.style.color = 'white'; // 设置文字颜色为白色
textParagraph.style.fontSize = '13px';
textParagraph.style.position = 'absolute';
textParagraph.style.top = '-8px';
textParagraph.style.left = '30px';
containerDiv.appendChild(textParagraph);
let content = document.createElement('div');
containerDiv.appendChild(content);
let html = `
<div width="300" height="90" >
<div style="display: flex; justify-content: space-between; color: '#01ADDC';padding: 30px 10px 0px 10px;">
<div style="color: #01ADDC;">${data.text}
</div>
</div>
</div>
`
back.innerHTML = html;
}
return { label, circleM }
}
例子:
let data = { name: '发现火情', className: 'ignition', type: 'middle', text: '在九楼发现火情,火势蔓延迅速。' }
let { label, circleM } = addFireTitle(data, scene, addCylinder);
titleGroup.add(label, circleM);
scene.add(titleGroup);
name是模型的名字,需要根据这个查询模型,classname是按钮的class名,需要查询这个class名给按钮添加点击事件,type是你要生成什么样的标签,因为标签有很多类型,根据这个判断生成哪种标签