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

时间:2020-10-16    作者:玉龙之乡    分类: 转载


实现效果如下。不用纠结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. }

 

手机扫描二维码
阅读体验更佳