标签指示线和箭头指向标注点

CSS2渲染器渲染HTML元素作为模型标签的时候，想把标签的箭头或指示线放在标注点上，下面给大家说下如何实现。

CSS2渲染器渲染HTML标签的位置特征

CSS2渲染器渲染的HTML元素标签，默认情况下，HTML元素标签自身的几何中心与标注点重合。

你可以查看本节课课件“圆锥标注”的案例验证。

const div = document.getElementById('tag');
// id="tag"元素高度40px,默认标签中心与圆锥顶部重合
// CSS2渲染器会把标签HTML默认设置为绝对定位，意味着你可以直接设置top
div.style.top = '-20px';//平移20px，使标签底部和圆锥顶部重合

工厂设备标签CSS代码

工厂设备标签的HTML、CSS布局代码，课件中已经提供。当然你可以根据自己前端知识更换其他CSS布局写法，只要视觉效果符合UI设计需求都行。

标签HTML元素布局方式都是前端CSS知识，课程不在演示，下面主要讲解threejs代码。

<!-- CSS布局方式写法很多，不一定和课程一致 -->
<div id="tag">
    <!-- position:relative;约束子元素绝对定位参照点 -->
    <div style="position:relative;width:400px;height:322px;color: #fff;">
        <!-- 图片绝对定位100%填充父元素，作为标签的背景 -->
        <img src="./信息背景.png" alt="" style="width:100%;position: absolute;left: 0px;top: 0px;">
        <!-- 名称、存储量、设备状态、等信息叠加到背景图上即可 -->
        <div style="position:absolute;left:48px;top:36px;font-size:16px;">
            <div style="font-size:20px;font-weight: 400;">
                <span>设备A</span>
            </div>
            <div style="margin-top: 30px;">
                <span style="font-weight: 400;margin-left: 80px;font-size: 40px;color: #00ffff;">276559 L</span>
            </div>
            <div style="margin-top: 20px;">
                <span style="color: #ccc;font-weight: 300;">管理</span><span
                   style="font-weight: 400;margin-left: 30px;">郭老师</span>
            </div>
            <div style="margin-top: 10px;">
                <span style="color: #ccc;font-weight: 300;">工号</span><span
                   style="font-weight: 400;margin-left: 30px;">webgl3d.cn</span>
            </div>
        </div>
        <div style="position:absolute;left:285px;top:35px;">
            <span style="color: #ffff00;">异常</span>
        </div>
    </div>
</div>

工厂标签的HTML元素适当平移

工厂标签对应的HTML元素，你可适当偏移，使直线的起点和标注点位置重合，具体如何偏移，根据UI设计的效果，指示线起点相对标签中心位置来定。

const div = document.getElementById('tag');
// id="tag"元素高度322px,默认标签中心与标注点
div.style.top = '-161px'; //平移-161px，指示线端点和标注点重合
// div.style.top = '-140px'; //可以在-161px基础上微调
// div.style.left = 'px';

HTML标签渲染前隐藏

在CSS2渲染器渲染HTML标签，重新定位标签之前，threejs执行代码和加载gltf模型也是需要时间的，这时候标签对应的HTML、CSS代码会显示在web页上面。

可以先把标签隐藏display: none;，等gltf模型加载完成，HTML元素转化CSS2模型对象以后，再取消HTML隐藏状态，CSS2渲染器默认会把标签设置为display: block;，这样就不用自己代码恢复HTML标签元素的隐藏状态了。

<!-- CSS2渲染器渲染器之前，隐藏标签 -->
<div id="tag" style="display: none;"><>