ThreeJS学习记录（五）使用CSS2DRenderer设置html标签永远面向摄像头

时间：2023-03-27 22:48:33 HTML

.tag,.tag__dot{display:inline-flex;}.tag{position:fixed;光标：指针；}.tag__dot{对齐项目：中心；变换：旋转（-45度）；}.tag__dot：之前{宽度：0.42vw；高度：0.42vw；边界半径：50%；边框：0.1vw实心#000；内容：'';}.tag__dot:after{width:1.82vw;高度：1px；背景：#000；内容：'';}.tag__content{显示：flex;对齐项目：居中；位置：相对；顶部：-0.94vw；身高：1.88vw；//左边距：-0.42vw；背景：rgba(0,0,0,0.5);边界半径：1.88vw；填充：01.04vw;}.tag__txt{空白：nowrap;字体大小：12px；颜色：#fff；&:hover{颜色：#fff;}}前言刚开始做3D视图的时候遇到定位和标注的需求——我直接加了TextGeometry，因为需要汉字，load安装了一个大字体包，对性能很不友好。而且他不能用鼠标旋转移动，总是面对用户，效果不好。后来了解到threejs支持与html标签结合，才有了这篇文章。效果蓝色圆柱体是blender的gltf模型，可以通过threejs获取blender中的坐标和名称。实现CSS2DRenderer，它是CSS3DRenderer（CSS3D渲染器）的简化版本，唯一支持的转换是位移。如果您希望将3D对象与基于HTML的标记相结合，此渲染器非常有用。在这里，各个DOM元素也被包装到一个CSS2DObject实例中并添加到场景图中。第一个是DOM：你可以编写DOM，稍后获取它，或者创建dom。{{tag}}

下面是JS部分，主要代码就是这些，其他必要的renderer创建就不写了。这里附加标签的样式.tag,.tag__dot{display:inline-flex;}.tag{position:fixed;光标：指针；}.tag__dot{对齐项目：中心；变换：旋转（-45度）；}.tag__dot：之前{宽度：0.42vw；高度：0.42vw；边界半径：50%；边框：0.1vw实心#000；内容：'';}.tag__dot:after{width:1.82vw;高度：1px；背景：#000；内容：'';}.tag__content{显示：flex;对齐项目：居中；位置：相对；顶部：-0.94vw；身高：1.88vw；//左边距：-0.42vw；背景：rgba(0,0,0,0.5);边界半径：1.88vw；填充：01.04vw;}.tag__txt{空白：nowrap;字体大小：12px；颜色：#fff；&:hover{颜色：#fff;}}摘要功能完美实现，就是样式有点丑。接下来，您可以在标签上绑定点击事件。点击后，相机通过动画缓慢移动到目标点，实现特定观看。这里需要用到tween.js。但是我发现....如果给地图加几个3D物体和2DDOM，直接用AntVL7不就好了吗？？？附录threejs中使用TextGeometry显示汉字对象：https://segmentfault.com/a/1190000042551058官网CSS2DRenderer示例：https://threejs.org/examples/#css2d_label加载blender导出的gltf模型教程：http://www.webgl3d.cn/pages/006fcb/