具体参照https://github.com/mrdoob/three.js/blob/master/examples/css2d_label.html；CSS2DRenderer的使用import{CSS2DObject

一、实现效果：节点+文字同时展示节点显示不同颜色节点盒label文字并存节点上添加点击事件二、利用插件：CSS2DRenderer提示：以下引入文件均可在安装完3d-force-graph的安装包里找到三

是否会跟随是否会被模型遮挡CSS2DObject是否否CSS3DObject否是否CSS3DSprite是是是Sprite是是是CSS3DObject和CSS3DRenderer搭配来渲染标签；CSS2DObject和CSS2DRenderer

有空的老铁关注一下我的抖音：效果：//引入轨道控制器扩展库OrbitControls.jsimport{OrbitControls}from"three/examples/jsm/controls/OrbitControls.js";import{GLTFLoader}from"three/examples/jsm/loaders/GLTFLoader.js";//效果制作器import{Effe

;import*asTHREEfrom"three";import{OrbitControls}from"three/addons/controls/OrbitControls.js";import{CSS2DRenderer

第一步，引入import{CSS2DRenderer,CSS2DObject,}from"three/examples/jsm/renderers/CSS2DRenderer.js";第二步，创建渲染器

这时候我们可以使用CSS3DRenderer、CSS2DRenderer这两个库，里面提供了三种打标签的方式，随着相机角度的变化，三种标签的显示效果各不相同。

最终的效果图如下：要实现上面的效果，需要用到CSS2D渲染器，先来了解下CSS2D渲染器CSS2DRenderer(CSS2D渲染器)CSS2DRenderer（CSS2D渲染器）可以把HTML元素作为标签标注到三维场景中

前面我们实现了通过使用CSS2DRenderer给模型添加HTML标签的效果，渲染出来后我们发现当我们缩放鼠标时，渲染的HTML标签并不会跟着场景缩放，这是因为CSS2DRenderer渲染的标签默认保持自身像素值

一、原理：three.js中有关于CSS3DRenderer的描写，如下图：只是看这部分内容可能还是云里雾里，其实就是说：three有自己的方法，把页面上的DOM元素转化为一种可以被加载到场景里面的元素。二、知识了解：1、THREE.JS中的CSS2D/CSS3D渲染器在安装的three包中找到renderers文件夹，里面包含了THREE.JS提供的渲染器。可以看到有两个js文件，分别是CSS2

引入CSS2DRendererimport{CSS2DRenderer,CSS2DObject,}from".

letlabelRenderer=newCSS2DRenderer();labelRenderer.domElement.style.pointerEvents='none';pointer-events:none—元素永远不会成为鼠标事件的target。但是，当其后代元素的pointer-events属性指定其他值时，鼠标事件可以指向后代元素，在这种情况下，鼠标事件将在捕获或冒泡阶触发父元素的事

一、场景A：在ThreeJs3D场景中国使用CSS2DRenderer渲染Html元素，OrbitControls功能失效原因分析：CSS2DRenderer渲染器会在页面渲染出一个Div，里面包含自定义的

threejs添加CSS2DRenderer导致OrbitControls控制器不能移动标签渲染器CSS2DRenderer会创建出一个div元素，有时因为位置原因导致OrbitControls不能移动

import*asTHREEfrom'three'import{OrbitControls}from'three/examples/jsm/controls/OrbitControls'//控制器import{CSS2DRenderer

在vue中如果想使用OrbitControls，控制运动，CSS2DRenderer添加2D字体等等这些都可以这样引入import{OrbitControls}from'three/examples/jsm

在Three中提供2D和3Dcss渲染器供用户使用，如果你希望将二维或三维物体和基于HTML的标签相结合，则这一渲染器将十分有用。在这里，各个DOM元素也被包含到一个CSS2DObject或CSS3DObject实例中，并被添加到场景图中。目录1.CSS2DRenderer1.1构造函数1.2方法2.CSS3DRenderer2.1构造函数2.2方法3.CSS2DRenderer实现地月旋转1.C

最近再做项目的时候，采用vue+three.js进行开发大型的3d场景项目，该项目中涉及到需要为建筑中的元素添加标签说明一些信息、名称，遂决定使用three.js的CSS2DRenderer和CSS2DObject

原理：利用CSS2DObject将二维物体转为threejs可以识别的3d物品，然后利用CSS2DRenderer将其渲染到页面，以下注释中步骤4和步骤6最为重要使用场景：常常用来标志3d物体或者制作信息展示面板