使⽤CSS2DObject创建⽂字
项⽬源码：
使⽤CSS2DObject创建⽂字
1 引⼊CSS2DObject, CSS2DRenderer
import{ CSS2DObject, CSS2DRenderer}from"three/examples/jsm/renderers/CSS2DRenderer"
2 render初始化
initCSSRender(){
this.CSSRender =new CSS2DRenderer();
this.CSSRender.setSize(window.innerWidth,1080);
this.CSSRender.domElement.style.position ='absolute';
this.CSSRender.p =0;
}
3 创建css2dobject
create2DObject(){
var div = ateElement('div');
/*给标签设置你想要的的样式*/
div.style.width ='200px';
div.style.height ='100px';
div.style.background ='rgba(10,18,51,0.8)';
lor ='#fff'
div.className ='label'
const label =new CSS2DObject(div);
return label;
}
4 循环渲染
der(this.scene,this.camera);
遇到的问题：
（1） 页⾯中有两个renderer，⼀个WebGLRenderer， ⼀个CSS2DRenderer。
由于CSS2DRenderer在顶层，所以控制器的控制对象得改成CSS2DRenderer
(2) 随着放⼤的过程，会发现场景中模型变⼤了，但是⽂字标签却‘相对变⼩’了。
照理说⽂字标签应该和模型同步变化才对吧。。试图给div增加tansform：scale属性，发现怎么也加不上去。
查看源码，发现在渲染object时，会给他加上transform属性，所以之前给div加这个属性被覆盖掉了⽽加不上去。
修改源码：
⾸先在循环渲染函数中监听球坐标系的半径的变化（视野的放⼤与缩⼩）
animate(){
var radius =Spherical().radius;//通过修改orbitcontrol源码拿到的，见前⾯⽂章
f){//项⽬中加载的模型房顶
if(radius && radius <22){//放⼤到某种程度，隐藏屋顶，显⽰⽂字
for(let label ElementsByClassName('label')){
label.style.visibility ='visible';
label.$data = radius;//这⾥给每个标签绑定radius
}
}else{缩⼩到某种程度，显⽰屋顶，隐藏⽂字
for(let label ElementsByClassName('label')){
label.style.visibility ='hidden'
}
}
}
der(this.scene,this.camera);
css特效文字
}
修改CSS2DRenderer源码：
根据循环渲染函数中不断改变的视野⼤⼩来控制元素的缩放
（3）层次问题
由于要显⽰⽂字，所以CSS2DRenderer 在顶层，当改变视⾓时可能会出现标签跑到围墙外的情况，其实就是因为他在最上层，盖不住。暂时没到好的解决⽅法，
只好通过限制缩放⼤⼩范围，旋转⾓度来控制。有好办法希望多多指教呀~
// 视⾓最⼩距离
// 视⾓最远距离
// 最⼤⾓度
（4）今天⼜遇到⼀个问题，旋转时发现⽂字会变糊，上⽹查了⼀下原因，说是transform：translate（x, y）中x,y不是整数，导致移动的位置不是很精确所以出现了模糊。于是⽤und()函数取了⼀下整，发现的确变清晰了。
对，还是修改源码部分