推荐：将NSDT场景编辑器加入你的3D工具链

3D工具集：NSDT简石数字孪生

单机按钮关闭HTML标签

给HTML标签，增加一个关闭按钮，鼠标单击之后，可以把射线弹出的标签关闭。

HTML标签增加一个关闭按钮

<style>
    #close:hover {
        cursor: pointer;
    }
</style>
<div style="position:absolute;left:350px;top:20px;">
    <img id="close" src="./关闭.png"  width="32">
</div>

单击按钮关闭HTML标签

注意把原来射线拾取里面隐藏发光描边和标签的代码删除，以免影响HTML关闭标签的功能测试。

// 鼠标单击按钮，关闭HTML标签
document.getElementById('close').addEventListener('click',function(){
    if (chooseObj) {//把原来选中模型对应的标签和发光描边隐藏
        outlinePass.selectedObjects = []; //无发光描边
        chooseObj.remove(tag); //从场景移除
    }
})

单击关闭按钮无效情况

现在你单机按钮去关闭HTML元素标签，如果发现无效，有可能是HTML标签设置了属性.style.pointerEvents = 'none'

//设置.pointerEvents=none，解决HTML元素标签对threejs canvas画布鼠标事件的遮挡
css2Renderer.domElement.style.pointerEvents = 'none';

如果你的项目要求三维场景的添加标签时候，不能影响canvas画布的事件，必须设置.style.pointerEvents = 'none'，可以考虑把标签的子元素，关闭按钮，单独设置.style.pointerEvents = 'auto'或者style="pointer-events: auto;"

<img id="close" src="./关闭.png" style="pointer-events: auto;">

document.getElementById('close').style.pointerEvents = 'auto';

上一篇：ThreeJS教程：鼠标选中模型弹出标签(工厂) (mvrlink.com)

下一篇：ThreeJS教程：CSS3DRenderer渲染HTML标签 (mvrlink.com)