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)。

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值