threejs动态加载div标签

模型表面添加标签
根据拾取模型，获取point

let htmlStr=`<img class="TuDing" style="width:30px;"src="img/TuDing/${tudingList[testid%tudingList.length].pic || 'tuding.png'}"><div class="TudingTxt">${markerName}<div></div>`
				
addDiv("id_"+testid,htmlStr,intersectsPos);
this.addDiv=function(divid,htmlstr,worldPos){
		let divDom = document.createElement('div');
	  let bodyDom = document.body;
	  bodyDom.insertBefore(divDom, bodyDom.lastChild);
	  divDom.classList = 'tap';
	  divDom.innerHTML = htmlstr;
	  divDom.id = divid;
		let screenPos=new ModelTools().worldToScreenPos(worldPos)
		
	  divDom.style.top = screenPos.y + 'px';//y
	  divDom.style.left = screenPos.x + 'px';//x
  
	  
	  let divStr={"id":divid,"position":worldPos}//存入divid与div的世界坐标
	  divList.push(divStr);
	}

、、、根据屏幕坐标、、、、

divid为标签的id值，为了方便后续操作，htmlstr为需要添加的标签文本，position为标签的物体坐标

function addDiv(divid,htmlstr,position) {
    var addDivDom = document.createElement('div');
    div1 = addDivDom;
    var bodyDom = document.body;
    bodyDom.insertBefore(addDivDom, bodyDom.lastChild);
    addDivDom.classList = 'tap';
    addDivDom.innerHTML = htmlstr;
    addDivDom.id = divid;
    var screenPosition;
    screenPosition=docCoord2Screen(position.x,position.y,0);
    var worldPosition=screenCoord2World(screenPosition.x,screenPosition.y);//屏幕坐标转为世界坐标
    addDivDom.style.top = screenPosition.y + 'px';//y
    addDivDom.style.left = screenPosition.x + 'px';//x
    var divStr={"id":divid,"position":worldPosition}//存入divid与div的世界坐标
    divList.push(divStr);
}

获取div所在位置的世界坐标系，将其坐标转化为屏幕坐标

//世界坐标转屏幕坐标
function worldToScreenPosition (divWorldPosition) {//divWorldPosition
    if(divWorldPosition==null||divWorldPosition==undefined||divWorldPosition==''){
      divWorldPosition={x:0, y: 0, z:0};
    };
      var camera=getCamera();
      var world_vector = new THREE.Vector3(divWorldPosition.x, divWorldPosition.y, divWorldPosition.z);//世界坐标系 必须根据世界坐标系计算
      let vector = world_vector.project(camera);
      // console.log("vector",vector)
      var halfWidth = window.innerWidth / 2;
      var  halfHeight = window.innerHeight / 2;
      return {
          x: Math.round(vector.x * halfWidth + halfWidth),
          y: Math.round(-vector.y * halfHeight + halfHeight)
      };
}

在render中不断调用worldToScreenPosition ()使得标签的屏幕坐标跟随这摄像机的变化而变化

//render中要实时渲染修改标签的二维坐标,代码中的position为三维坐标，即标签插入时的三维坐标
function renderDiv(){
    for(i in divList){
        var div=document.getElementById(divList[i].id);
        //if(div!=null){
            div.style.left=worldToScreenPosition (divList[i].position).x + 'px';
            div.style.top=worldToScreenPosition (divList[i].position).y + 'px';
        //}
        
    }
}

若需要删除div标签，则可以定义一个数组，将添加div标签后，将其标签的id值存入数组中，根据id值对标签进行删除，如
var div=document.getElementById(divList[i].id);
div.parentNode.removeChild(div);
若需要在模型的表面添加div，则以以屏幕上这一点往里面发射射线，根据射线获取模型上的世界坐标。