使用ThreeJs搭建BIM模型浏览器 第三步 浮标

实现效果如下。不用纠结UI为什么很面熟,因为我从某大品牌抄过来的,哈哈。

实现原理呢,

第一步,获取鼠标点击。

第二步,计算交插点。(这里要注意,如果是剖切之后,被剖切部分要舍弃,否则标记在隐藏构件上。

第三步,三维点转二维点。

第四部,在二维点中画一个div,样式控制为标记。 

核心代码:

1、获取点击。请上看一遍文章。

2、三维转二维:

//三维座转二维的计算。
    toScreenPositionOfVector(x, y, z) {
        var vector = new THREE.Vector3(x, y, z);
        //calculate screen half size
        var widthHalf = 0.5 * this.renderer.context.canvas.width;
        var heightHalf = 0.5 * this.renderer.context.canvas.height;
        vector.project(this.camera);
        //get 2d position on screen
        vector.x = (vector.x * widthHalf) + widthHalf;
        vector.y = -(vector.y * heightHalf) + heightHalf;

        return {
            x: vector.x,
            y: vector.y
        };


    }

3、增加标记的div

AddRedMark(x, y, z) {
        var position = this.toScreenPositionOfVector(x, y, z);
        var adiv = document.createElement('div');
        adiv.classList.add("redmark");
        adiv.style.position = "absolute";
        document.body.appendChild(adiv);
        adiv.innerHTML = '<img src="css/led_red.png" class="zoom" style="position: absolute;">';
        adiv.style.display = "";
        adiv.style.left = (position.x - 16) + 'px';
        adiv.style.top = (position.y - 32) + 'px';
        var markObj = { position: [x, y, z], mark: adiv };
        this.redMarkDivs.push(markObj);
    }

 

已标记关键词 清除标记
相关推荐