使用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的時候嘗試把點自動的定位到面的邊緣，會好用很多！