童年原是一生最美妙的阶段,那时的孩子是一朵花,也是一颗果子,是一片懵懵懂懂的聪明,一种永远不息的活动,一股强烈的欲望。——巴尔扎克
现在位置:首页 > 网站建设 > 转载 > 使用ThreeJs搭建BIM模型浏览器,第二步-构件选择

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

玉龙之乡  转载  2020-10-16  6923  0评论

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

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

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

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

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


  1. mouseUp(event) {
  2. var vector = new THREE.Vector3((event.clientX / window.innerWidth) * 2 - 1, -(event.clientY / window.innerHeight) * 2 + 1, 0.5);
  3. vector = vector.unproject(this.camera);
  4. var raycaster = new THREE.Raycaster(this.camera.position, vector.sub(this.camera.position).normalize());
  5. var intersects = raycaster.intersectObjects(this.components);
  6. console.log(intersects)
  7. if (this.selComps.length > 0) {
  8. this.selComps[0].object.material.transparent = false;
  9. this.selComps[0].object.material.opacity = 1;
  10. this.selComps = [];
  11. }
  12. if (intersects.length > 0) {
  13. // console.log(intersects[0]);
  14. intersects[0].object.material.transparent = true;
  15. intersects[0].object.material.opacity = 0.5;
  16. this.showLog('点击' + intersects[0].object.uuid);
  17. //点击到的位置:intersects[0].point;
  18. if (this.isAddMark) {
  19. //todo 对标记进行监管。
  20. viewer.sphere(intersects[0].point.x, intersects[0].point.y, intersects[0].point.z,0xFF0000,0.7);
  21. }
  22. this.selComps.push(intersects[0]);
  23. this.showProperty(intersects[0].object.rid);
  24. }
  25. }

 

 

如下图,点选一个门

 

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

评论一下 分享本文 联系站长
玉龍之鄉
看完文章就评论一下!
挤眼 亲亲 咆哮 开心 想想 可怜 糗大了 委屈 哈哈 小声点 右哼哼 左哼哼 疑问 坏笑 赚钱啦 悲伤 耍酷 勾引 厉害 握手 耶 嘻嘻 害羞 鼓掌 馋嘴 抓狂 抱抱 围观 威武 给力
提交评论

清空信息
关闭评论

sitemap