three.js生成html标签

 

由于一个项目标签过多，一个个写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是你要生成什么样的标签，因为标签有很多类型，根据这个判断生成哪种标签