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

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

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

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

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

mouseUp: function(event) {
var vector = new THREE.Vector3((event.clientX / window.innerWidth) * 2 - 1, -(event.clientY  / window.innerHeight) * 2 + 1, 0.5);
            vector = vector.unproject(this.camera);

            var raycaster = new THREE.Raycaster(this.camera.position, vector.sub(this.camera.position).normalize());

            var intersects = raycaster.intersectObjects(this.scene.children);

 console.log(intersects[0].point);//这就是焦点。
}

2，在点击始末位置画个小球：

    function sphere(x, y, z, color, opacity, r) {
        var sphereGeo = new THREE.SphereGeometry(r, 10, 10); //创建球体
        var sphereMat = new THREE.MeshLambertMaterial({ //创建材料
            color: color,
            wireframe: false,
            transparent: true,
            side: THREE.DoubleSide,
            opacity: opacity
        });
        var dwq = new THREE.Mesh(sphereGeo, sphereMat); //创建球体网格模型
        dwq.position.set(x, y, z); //设置球的坐标
        //  this.scene.add(dwq); //将球体添加到场景
        //this.mGroup.add(dwq);
        return dwq;
    }

    sphere(point.x, point.y, point.z, 0xFF0000, 1, 0.2)

3，在两点之间画条线：

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

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

5，看结果

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

相关资源：上gitee搜索qmodel