threeJS 点击模型出现弹框

news2024/7/30 3:54:37

前言

需要实现点击模型出现弹框展示模型详细信息

实现代码

// 创建3D渲染器 - 初始化时调用
function createCss3DRender(){
    labelRenderer = new CSS3DRenderer();
    labelRenderer.setSize(window.innerWidth, window.innerHeight);
    labelRenderer.domElement.style.position = "absolute";
    labelRenderer.domElement.style.top = "0px";
    //设置.pointerEvents=none，解决HTML元素标签对threejs canvas画布鼠标事件的遮挡
    labelRenderer.domElement.style.pointerEvents = 'none';
    container.appendChild(labelRenderer.domElement);
}
 // 创建弹框 - 点击时调用
function createDialogHtml(pos){
    // 创建弹窗
    labelDiv = document.getElementById('myDialog');
    // // 多个标签-需要克隆复制一份
    // const div = labelDiv.cloneNode()
    labelDiv.innerHTML = `
<div class="box-container">
<div class='tip-green' >
        <div class="title">设备名称 :测试</div>
        <div class="label-text">
            温度 :
            <span class="mr5" class='label-value-green'>
      50
            </span>
            <span class='label-value-green'>
                正常
            </span>
        </div>
        <div class="label-text">
            漏水 :
            <span class="mr5" class='label-value-green'>
    40
    </span>
            <span class='label-value-green'>
                正常
            </span>
        </div>
    </div>
<div class=line-green></div>`
    // 创建CSS3DObject并设置其位置
    const boxObject = new CSS3DObject(labelDiv);
    boxObject.position.set( pos.x,pos.y,pos.z );
    scene.add(boxObject);
}