使用ThreeJs搭建BIM模型浏览器,第二步-构件选择

23 篇文章 9 订阅
28 篇文章 5 订阅

构件选择其实是鼠标点选的二维坐标与Canvas上的视角方向做射线投影,所穿过的所有构件,第1个即为点选。

以下为代码逻辑。部分变量可以根据您的需要,修改成你的变量。点击后把构件设置为半透明。

如果有需要,还可以在点击位置放一个标记。如isAddMark示意。

this.components 为所有构件的数组。

this.selComps 用来保存被点击的构件。

 mouseUp(event) {
        var vector = new THREE.Vector3((event.clientX / window.innerWidth) * 2 - 1, -(event.clientY / window.innerHeight) * 2 + 1, 0.5);
        vector = vector.unproject(this.camera);

        var raycaster = new THREE.Raycaster(this.camera.position, vector.sub(this.camera.position).normalize());

        var intersects = raycaster.intersectObjects(this.components);
        console.log(intersects)
        if (this.selComps.length > 0) {
            this.selComps[0].object.material.transparent = false;
            this.selComps[0].object.material.opacity = 1;
            this.selComps = [];
        }
        if (intersects.length > 0) {
            // console.log(intersects[0]);
            intersects[0].object.material.transparent = true;
            intersects[0].object.material.opacity = 0.5;
            this.showLog('点击' + intersects[0].object.uuid);
            //点击到的位置:intersects[0].point;
            if (this.isAddMark) {
                //todo 对标记进行监管。
                viewer.sphere(intersects[0].point.x, intersects[0].point.y, intersects[0].point.z,0xFF0000,0.7);
            }
            this.selComps.push(intersects[0]);
            this.showProperty(intersects[0].object.rid);
        }
    }

 

 

如下图,点选一个门

 

在点击的焦点处放一个红色的气泡(请专家们不要纠结气泡太丑,没有时间去做浮标)。在BIM协同的时候,肯定会有类似的需求。

评论 5 您还未登录,请先 登录 后发表或查看评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值