Three.js中动态的创建div

Three.js中动态的创建div

之前做过一个需求，就是要求双击物体可以出现这个物体会出现这个物体与其他物体的连线并且显示距离（物体可以移动），那么这个就要求每次移动双击之后都会动态的生成div。

实现代码如下：

//num表示的是选中的物体编号
//生成div
function divRender(num) {
        var distance;
        var point;
        for(var i=0;i<=7;i++) {
            if (i != num-1) {
            
            	//这里的toDistance()是求两点距离的函数
            	//objects是一个对象数组
                distance=toDistance(objects[i].position,objects[num-1].position);
                distance=parseInt(distance);
                
                //计算出两物体连线的中间点
                point=new THREE.Vector3((objects[i].position.x+objects[num-1].position.x)/2,(objects[i].position.y+objects[num-1].position.y)/2,(objects[i].position.z+objects[num-1].position.z)/2);
                
                var position=point;
                var windowPosition=transPosition(position);
                var left=windowPosition.x;
                var top=windowPosition.y;

                var newDiv = document.createElement("div");
                newDiv.id="c"+i;
                newDiv.innerHTML=distance;
                newDiv.style.position='absolute';
                newDiv.style.left = left+'px';
                newDiv.style.top=top + 'px';
                document.getElementById("tap").appendChild(newDiv);
            }
        }

//去除Div
    function clearDiv(num) {
        for(var i=0;i<=7;i++){
            if (i != num-1) {
                document.getElementById('c'+i).remove();
            }
        }
    }

//可以把 new THREE.Vector3(position.x,position.y,position.z)的坐标转化为屏幕的x,y坐标
function transPosition(position){
        let world_vector = new THREE.Vector3(position.x,position.y,position.z);
        let vector =world_vector.project(camera);
        let halfWidth = window.innerWidth / 2,
            halfHeight = window.innerHeight / 2;
        return {
            x: Math.round(vector.x * halfWidth + halfWidth),
            y: Math.round(-vector.y * halfHeight + halfHeight)
        };
    }

可以用一个变量NO来标记div是否已经去除，如果是0就是已经去除，如果大于0，代表的就是那个数字的飞机的div已经生成。
每一次移动物体或者再次双击物体，都可以先对NO进行判断，如果大于0那么就clearDiv(NO)。