推荐：将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知识，课程不在演示，下面主要讲解

在线工具推荐：三维数字孪生场景工具 - GLTF/GLB在线编辑器 - Three.js AI自动纹理化开发 - YOLO 虚幻合成数据生成器 - 3D模型在线转换 -  3D模型预览图生成服务 屏幕坐标转标准设备坐标 在讲解下节课鼠标点击选中模型之前，先给大家讲解下坐标系的问题。 获取鼠标事件坐标 先来了解一些，普通的web前端相关知识。 鼠标单击HTML元素，通过函数的参数鼠标事件对象event，可以获取一些坐标信息。课件源码中是以threejs的canvas画布为例给大家演示。 addEventListener('click',function(event){ // event对象有很多鼠标事件相关信息 console.log('event',event); }) .offsetX、.offsetY表示鼠标单击位置的坐标，单位是像素px，以点击的HTML元素左上角为坐标原点，水平向右方向为x轴，竖直向下方向为y轴。 addEventListener('click',function(event){ const px = event.o

推荐：将NSDT场景编辑器加入你的3D工具链 3D工具集：NSDT简石数字孪生 精灵模型Sprite Three.js的精灵模型Sprite和Threejs的网格模型Mesh一样都是模型对象，父类都是Object3D,关于精灵模型对象Sprite的方法和属性除了可以查看文档Sprite，也可以查看父类Object3D。 第一次接触精灵模型Sprite的时候，可以类比以前讲解过的网格模型Mesh学习。 创建精灵模型材质SpriteMaterial 精灵材质对象SpriteMaterial和普通的网格材质一样可以设置颜色.color、颜色贴图.map、开启透明.transparent、透明度.opacity等属性，精灵材质对象SpriteMaterial的父类是材质Material。 // 创建精灵材质对象SpriteMaterial const spriteMaterial = new THREE.SpriteMaterial({ color:0x00ffff,//设置颜色 }); 创建精灵模型Sprite 创建精灵模型对象Sprite和创建网格模型对象一样