使用ThreeJs搭建BIM模型浏览器 第三步 浮标
首页 > 网站建设 > 转载   作者:玉龙之乡  2020年10月16日 7:00 星期五  热度:4243°  字号:   评论:0 条
时间:2020-10-16 7:00   热度:4243°  评论: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. }

 

 您阅读这篇文章共花了: 
捐赠支持:如果觉得这篇文章对您有帮助,请“扫一扫”鼓励作者!
 本文无需标签!
二维码加载中...
本文作者:玉龙之乡      文章标题: 使用ThreeJs搭建BIM模型浏览器 第三步 浮标
本文地址:http://nmgjz.com/post-153.html
版权声明:若无注明,本文皆为“玉龍之鄉”原创,转载请保留文章出处。

返回顶部    首页    手气不错    捐赠支持   后花园   
版权所有:玉龍之鄉    站长: 玉龙之乡   程序:emlog   蒙ICP备16004298号