使用ThreeJs搭建BIM模型浏览器,第七步-测量
首页 > 网站建设 > 转载   作者:玉龙之乡  2020年10月16日 7:05 星期五  热度:4139°  字号:   评论:0 条
时间:2020-10-16 7:05   热度:4139°  评论: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的时候尝试把点自动的定位到面的边缘,会好用很多!

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

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