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

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

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

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

实现原理呢,

第一步,获取鼠标点击。

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

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

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

核心代码:

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

2、三维转二维:


  1. //三维座转二维的计算。
  2. toScreenPositionOfVector(x, y, z) {
  3. var vector = new THREE.Vector3(x, y, z);
  4. //calculate screen half size
  5. var widthHalf = 0.5 * this.renderer.context.canvas.width;
  6. var heightHalf = 0.5 * this.renderer.context.canvas.height;
  7. vector.project(this.camera);
  8. //get 2d position on screen
  9. vector.x = (vector.x * widthHalf) + widthHalf;
  10. vector.y = -(vector.y * heightHalf) + heightHalf;
  11. return {
  12. x: vector.x,
  13. y: vector.y
  14. };
  15. }

3、增加标记的div


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

 

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

清空信息
关闭评论

sitemap