ThreeJS教程：标签指示线或箭头指向标注点
推荐：将NSDT场景编辑器加入你的3D工具链
3D工具集：NSDT简石数字孪生
标签指示线或箭头指向标注点
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;"><>