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

使用ThreeJs搭建BIM模型浏览器,第七步-测量

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

前面说到构件选择,实现了点击时与界面记录的焦点。《使用ThreeJs搭建BIM模型浏览器,第二步-构件选择

主要的实现思路是:通过一个全局标记,记录前一次点击(作为起点)和后一次点击(作为终点),求两点之前的距离。

然后在终点附近插件一个标签。插件标签的方法前面也提到了。如意门:《使用ThreeJs搭建BIM模型浏览器 第三步 浮标

 

1,点击,当然要加起点终点的全局变量记录一下。


  1. mouseUp: function(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.scene.children);
  6. console.log(intersects[0].point);//这就是焦点。
  7. }

2,在点击始末位置画个小球:


  1. function sphere(x, y, z, color, opacity, r) {
  2. var sphereGeo = new THREE.SphereGeometry(r, 10, 10); //创建球体
  3. var sphereMat = new THREE.MeshLambertMaterial({ //创建材料
  4. color: color,
  5. wireframe: false,
  6. transparent: true,
  7. side: THREE.DoubleSide,
  8. opacity: opacity
  9. });
  10. var dwq = new THREE.Mesh(sphereGeo, sphereMat); //创建球体网格模型
  11. dwq.position.set(x, y, z); //设置球的坐标
  12. // this.scene.add(dwq); //将球体添加到场景
  13. //this.mGroup.add(dwq);
  14. return dwq;
  15. }
  16. sphere(point.x, point.y, point.z, 0xFF0000, 1, 0.2)

3,在两点之间画条线:


  1. var material = new THREE.LineBasicMaterial({ color: 0x0000ff });
  2. var geometry = new THREE.Geometry();
  3. geometry.vertices.push(this.mp1); 
  4. geometry.vertices.push(sel.point);
  5. var line = new THREE.Line(geometry, material);
  6. // scene.add(line);
  7. //mGroup.add(line); //建议用group来放小球和线

4,画个标签,看之前的文章,此处略。

5,看结果

6,优化的目标,可以在MouseOver的时候尝试把点自动的定位到面的边缘,会好用很多!

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

清空信息
关闭评论

sitemap