0219update

js/determineFace.js

@@ -6,7 +6,7 @@ let face = [];
 let negativeXVec = [-0.01, 0] // 以相同点为起点, 0.01为单位长度, 沿x轴负半轴求出单位向量
 let num = 0;
 let startLine = null;
-var rx1 = _3dLine(r2x, r3x, ret);
+//  rx1 = _3dLine(r2x, r3x, ret);
 
 var line_2d = _3dTo2d(
     make_matrix_from_quat([
@@ -21,9 +21,10 @@ var line_2d = _3dTo2d(
     rx1,
     0.05
   )['to3d']
-  console.log('====================================');
-  console.log('line_2d',line_2d);
-  console.log('====================================');
+
+//   console.log('====================================');
+//   console.log('line_2d',line_2d);
+//   console.log('====================================');
 /**
  * 寻找所有通过point相交的线段
  * @param {array} pointAry 
@@ -47,7 +48,7 @@ function findIntersectLine() {
             let data = find2dSamePoint(curPoint);
             let samePointNum = data.samePointNum; // 记录相同点的个数；
             let samePointLineAry = data.samePointLineAry; // 具有相同点的线段集合
-            if (samePointNum === 1) {
+            if (samePointNum === 1|| faceLine.length > 4) {
                 // faceLine.indexOf(curline['3d_id']) < 0 && faceLine.push(curline['3d_id']); // 记录最后一条线段的3d_id
                 // !arrayOnly(faceAry, faceLine) && faceAry.push(faceLine);
                 // console.log(faceLine)

js/drawGeometry.js

@@ -2,6 +2,8 @@ let scene, camera, renderer, controls;
 let stats = initStats();
 let key = 'points', id = 'id';
 let verticalLineAry = [];
+let geoKeys = ['3d_point1', '3d_point2'];
+// n_panorama_line_3d = rx1
 
 /* 初始加载 */
 (function () {
@@ -20,61 +22,103 @@ function init() {
     initCamera();
     initLight();
     initControls();
-    drawGeometry();
+    drawGeometry(rx1);
+    findIntersectLine();
 }
 
-function drawGeometry() {
-    if (!panorama_line_3d) {
-        let geometry = new THREE.geometry
-        console.log('panorama_line_3d未定义, 请检查');
-        return;
-    }
+// function drawGeometry() {
+//     findIntersectLine();
+//     if (!panorama_line_3d) {
+//         let geometry = new THREE.geometry
+//         console.log('panorama_line_3d未定义, 请检查');
+//         return;
+//     }
+
+//     let material = new THREE.LineBasicMaterial({
+//         color: 'red'
+//     })
+//     let geometry = new THREE.Geometry();
+
+//     // 第一层的面循环
+//     for (let i = 0; i < panorama_line_3d.length; i++) {
+//         let face = panorama_line_3d[i]['faceLine'];
+//         let index = panorama_line_3d[i]['index'];
+//         let curVerticalLine = []
+//         // if (face.length < 4) {
+//         //     console.log('构成面的线段数小于4, 请检查');
+//         //     return;
+//         // }
+//         let sta = false;   // 用于控制寻找相同点还是不同点
+//         // 第二层面中的线循环
+//         for (let j = 0; j < face.length; j++) {
+//             if (!face[j][key] || face[j][key].length < 2) {
+//                 console.log('线段' + face[j][id] + '的点数据有误, 请检查');
+//                 return;
+//             }
+//             // 绘制第一条线段
+//             if (j === 0) {
+//                 // 第一条线段, 先寻找不同点
+//                 let firstPoint = findPoint(face[j][key], face[j + 1][key], false);
+//                 findverticalLine(firstPoint).forEach((item) => {
+//                     index.indexOf(item) < 0 && curVerticalLine.indexOf(item) < 0 && curVerticalLine.push(item);
+//                 })
+//                 firstPoint && geometry.vertices.push(new THREE.Vector3(firstPoint[0], firstPoint[1], firstPoint[2]));
+//                 // 再寻找相同点
+//                 let secondPoint = findPoint(face[j][key], face[j + 1][key], true);
+//                 findverticalLine(secondPoint).forEach((item) => {
+//                     index.indexOf(item) < 0 && curVerticalLine.indexOf(item) < 0 && curVerticalLine.push(item);
+//                 })
+//                 secondPoint && geometry.vertices.push(new THREE.Vector3(secondPoint[0], secondPoint[1], secondPoint[2]));
+//             } else if (j === face.length - 1) {  // 最后一条线段, 寻找与第一条线段相交的点
+//                 let lastPoint = findPoint(face[j][key], face[0][key], true);
+//                 findverticalLine(lastPoint).forEach((item) => {
+//                     index.indexOf(item) < 0 && curVerticalLine.indexOf(item) < 0 && curVerticalLine.push(item);
+//                 })
+//                 lastPoint && geometry.vertices.push(new THREE.Vector3(lastPoint[0], lastPoint[1], lastPoint[2]));
+//             } else {  // 寻找与上一条线段相交的点
+//                 let point = findPoint(face[j][key], face[j + 1][key], true);
+//                 findverticalLine(point).forEach((item) => {
+//                     index.indexOf(item) < 0 && curVerticalLine.indexOf(item) < 0 && curVerticalLine.push(item);
+//                 })
+//                 point && geometry.vertices.push(new THREE.Vector3(point[0], point[1], point[2]));
+//             }
+//         }
+//         panorama_line_3d[i].verticalLine.push(curVerticalLine);
+//     }
+//     let line = new THREE.Line(geometry, material);
+//     scene.add(line);
+
+// }
+
+function drawGeometry(n_panorama_line_3d) {
+    
+    // if (!panorama_line_3d) {
+    //     console.log('panorama_line_3d未定义, 请检查');
+    //     return;
+    // }
+    if (scene.getObjectByName("3d_line")) {
+        scene.remove(scene.getObjectByName("3d_line"));
+        }
 
     let material = new THREE.LineBasicMaterial({
         color: 'red'
     })
-    let geometry = new THREE.Geometry();
 
-    // 第一层的面循环
-    for (let i = 0; i < panorama_line_3d.length; i++) {
-        let face = panorama_line_3d[i];
 
-        if (face.length < 4) {
-            console.log('构成面的线段数小于4, 请检查');
-            return;
-        }
-        let sta = false;   // 用于控制寻找相同点还是不同点
-        // 第二层面中的线循环
-        for (let j = 0; j < face.length; j++) {
-            if (!face[j][key] || face[j][key].length < 2) {
-                console.log('线段' + face[j][id] + '的点数据有误, 请检查');
-                return;
-            }
-            // 绘制第一条线段
-            if (j === 0) {
-                // 第一条线段, 先寻找不同点
-                let firstPoint = findPoint(face[j][key], face[j + 1][key], false);
-                verticalLineAry.push(findverticalLine(firstPoint));
-                firstPoint && geometry.vertices.push(new THREE.Vector3(firstPoint[0], firstPoint[1], firstPoint[2]));
-                // 再寻找相同点
-                let secondPoint = findPoint(face[j][key], face[j + 1][key], true);
-                verticalLineAry.push(findverticalLine(secondPoint));
-                secondPoint && geometry.vertices.push(new THREE.Vector3(secondPoint[0], secondPoint[1], secondPoint[2]));
-            } else if (j === face.length - 1) {  // 最后一条线段, 寻找与第一条线段相交的点
-                let lastPoint = findPoint(face[j][key], face[0][key], true);
-                verticalLineAry.push(findverticalLine(lastPoint));
-                lastPoint && geometry.vertices.push(new THREE.Vector3(lastPoint[0], lastPoint[1], lastPoint[2]));
-            } else {  // 寻找与上一条线段相交的点
-                let point = findPoint(face[j][key], face[j + 1][key], true);
-                verticalLineAry.push(findverticalLine(point));
-                point && geometry.vertices.push(new THREE.Vector3(point[0], point[1], point[2]));
-            }
+    let line_model = new THREE.Object3D();
+    // 第一层的面循环
+    for (let i = 0; i < n_panorama_line_3d.length; i++) {
+        let threeDLine = n_panorama_line_3d[i];
+        let geometry = new THREE.Geometry();
+        for (let j = 0; j < geoKeys.length; j++) {
+            geometry.vertices.push(new THREE.Vector3(threeDLine[geoKeys[j]][0], threeDLine[geoKeys[j]][1], threeDLine[geoKeys[j]][2]))
         }
-
+        let line = new THREE.Line(geometry, material);
+        line_model.add(line);
     }
-    let line = new THREE.Line(geometry, material);
-    scene.add(line);
-    findIntersectLine();
+    line_model.name = '3d_line';
+    scene.add(line_model);
+
 }
 
 /**
@@ -83,11 +127,11 @@ function drawGeometry() {
  */
 function findverticalLine(point) {
     let lineAry = [];
-    for(let i = 0; i < panorama_line_3d.length; i++) {
-        for(let j = 0; j < panorama_line_3d[i].length; j++) {
-            for(let k = 0; k < panorama_line_3d[i][j]['points'].length; k++) {
+    for (let i = 0; i < panorama_line_3d.length; i++) {
+        for (let j = 0; j < panorama_line_3d[i].length; j++) {
+            for (let k = 0; k < panorama_line_3d[i][j]['points'].length; k++) {
                 let o_point = panorama_line_3d[i][j]['points'][k];
-                if(arrayEquals(o_point, point)) {
+                if (arrayEquals(o_point, point)) {
                     lineAry.push(panorama_line_3d[i][j]['id']);
                 }
             }
@@ -128,12 +172,12 @@ function initScene() {
 function initCamera() {
     camera = new THREE.PerspectiveCamera(
         45,
-        0.5* window.innerWidth / window.innerHeight,
+        0.5 * window.innerWidth / window.innerHeight,
         1,
         100
     );
     // camera = new THREE.OrthographicCamera(3 / - 2, 3 / 2, 3 / 2, 3 / - 2, 1, 1000);
-    camera.position.set(2.5, -2, 1);
+    camera.position.set(15, -15, 8);
     camera.up.x = 0;
     camera.up.y = 0;
     camera.up.z = 1;

js/main.js

@@ -1,8 +1,9 @@
+
 // 3d点坐标
 var r2x = [
   // 俯视面
   [-1.92, 0.034, 1.5],
-  [-2.92, 0.284, 1.5],
+  [-1.92, 0.284, 1.5],
   [-6.02, 0.284, 1.5],
   [-6.02, 3.934, 1.5],
   [2.53, 3.934, 1.5],
@@ -14,7 +15,7 @@ var r2x = [
 
   // 仰视面
   [-1.92, 0.034, -1.5],
-  [-2.92, 0.284, -1.5],
+  [-1.92, 0.284, -1.5],
   [-6.02, 0.284, -1.5],
   [-6.02, 3.934, -1.5],
   [2.53, 3.934, -1.5],
@@ -34,7 +35,7 @@ var r3x = [
   [4, 5],
   [5, 6],
   [6, 7],
-  [7, 8],
+  [7, 8], 
   [8, 9],
   [9, 0],
 
@@ -107,13 +108,13 @@ var scaleTimeH;
 
 // 各个面的数组集合
 var faceArr = [
-  [20, 10, 21, 0],
   [21, 11, 22, 1],
   [22, 12, 23, 2],
+  [20, 10, 21, 0],
   [23, 13, 24, 3],
-  [24, 14, 15, 26, 5, 4],
-  [26, 16, 27, 6],
-  [27, 17, 28, 7],
+  // [24, 14, 15, 26, 5, 4],
+  // [26, 16, 27, 6],
+  // [27, 17, 28, 7],
   [28, 18, 29, 8],
   [29, 19, 20, 9],
   // [19, 18, 17, 16, 15, 25, 5, 6, 7, 8, 9, 0, 1, 2, 3, 4, 14, 13, 12, 11, 10],
@@ -121,9 +122,13 @@ var faceArr = [
   // [5, 6, 7, 8, 9, 0, 1, 2, 3, 4]
 ];
 
+var verticalLine=[]
+
 var selectArray;
 var selectArr;
 var selectArrIdx;
+var rx1 = _3dLine(r2x, r3x, ret);
+
 img.onload = function() {
   draw();
 };
@@ -141,7 +146,6 @@ function draw() {
   var context = canvas.getContext("2d");
   context.strokeStyle = "#ff0000";
   context.lineWidth = w / 250;
-  var rx1 = _3dLine(r2x, r3x, ret);
   // 生成3d格式数据
   fix3dLineArr(rx1,faceArr)
   var lineArr = _3dTo2d(

js/util.js

@@ -1,3 +1,7 @@
+/**
+ * 判断数组是否是两条线段组成
+ * @param {线段数组} arr 
+ */
 function isTwoLine(arr) {
     var max = 0,
       min = 1;
@@ -78,7 +82,6 @@ function isTwoLine(arr) {
       ret_t[i][1] = r2x_t[r3x_t[i][1]];
     }
   
-    console.log(ret)
     return ret;
   }
 
@@ -100,7 +103,7 @@ function isTwoLine(arr) {
                 if (faceArr[i][j]==arr[k]['3d_id']) {
                     item.faceLine.push({
                         id:faceArr[i][j],
-                        points:[arr[k]["3d_point1"],arr[k]["3d_point1"]]
+                        points:[arr[k]["3d_point1"],arr[k]["3d_point2"]]
                     })
                     item.index.push(faceArr[i][j])
                 }
@@ -108,6 +111,7 @@ function isTwoLine(arr) {
         }         
         ret.push(item) 
       }
+
       return ret
   }
   
@@ -185,7 +189,6 @@ function isTwoLine(arr) {
   
   function _calculateMaxPoint(line, gap) {
     var ret = 0;
-  
     for (var i = 0; i < line.length; i++) {
       var r1x = line[i][0];
       var r2x = line[i][1];
@@ -194,7 +197,6 @@ function isTwoLine(arr) {
         Math.hypot(r1x[0] - r2x[0], r1x[1] - r2x[1], r1x[2] - r2x[2]) / gap + 0.5
       );
     }
-  
     return ret;
   }
   
@@ -265,6 +267,10 @@ function isTwoLine(arr) {
 
   }
 
+  /**
+   * 生成对应的2d线段
+   * @param {三维线段数组} arr 
+   */
   function ret2dObj(arr) {
       var ret =[];
       var count = 0
@@ -571,6 +577,7 @@ function isTwoLine(arr) {
     // deltaY：值为负的（-1），则表示滚轮向下滚动。值为正的（1），则表示滚轮向上滚动。
     // deltaFactor：增量因子。通过 deltaFactor * deltaX 或者 deltaFactor * deltaY 可以得到浏览器实际的滚动距离。
     // distance = -10
+
     if (tag) {
       _3dPoint[2][0]+=distance
       _3dPoint[3][0]+=distance
@@ -583,6 +590,7 @@ function isTwoLine(arr) {
       _3dPoint[((_3dPoint.length)/2+2)][1]+=distance
     }
     rx1 = _3dLine(r2x, r3x, ret);
+
     lineArr = _3dTo2d(
       make_matrix_from_quat([
         0.008515,
@@ -596,6 +604,7 @@ function isTwoLine(arr) {
       rx1,
       0.05
     )["drawArr"];
+    drawGeometry(rx1)
     return lineArr;
   }
   

model_data/data.js

@@ -24,6 +24,129 @@ let panorama_point_3d = [
 		[2.23, 0.034, -1.5]
 ];
 
+
+let n_panorama_line_3d = [{
+	"3d_id":0,
+	"3d_point1":[-1.92 ,0.034 ,1.5],
+	"3d_point2":[-2.92 ,0.284 ,1.5]
+},{
+	"3d_id":1,
+	"3d_point1":[-2.92 ,0.284 ,1.5],
+	"3d_point2":[-6.02 ,0.284 ,1.5]
+},{
+	"3d_id":2,
+	"3d_point1":[-6.02 ,0.284 ,1.5],
+	"3d_point2":[-6.02 ,3.934 ,1.5]
+},{
+	"3d_id":3,
+	"3d_point1":[-6.02 ,3.934 ,1.5],
+	"3d_point2":[2.53 ,3.934 ,1.5]
+},{
+	"3d_id":4,
+	"3d_point1":[2.53 ,3.934 ,1.5],
+	"3d_point2":[2.53 ,1.684 ,1.5]
+},{
+	"3d_id":5,
+	"3d_point1":[2.53 ,1.684 ,1.5],
+	"3d_point2":[3.13 ,1.684 ,1.5]
+},{
+	"3d_id":6,
+	"3d_point1":[3.13 ,1.684 ,1.5],
+	"3d_point2":[3.13 ,0.584 ,1.5]
+},{
+	"3d_id":7,
+	"3d_point1":[3.13 ,0.584 ,1.5],
+	"3d_point2":[2.23 ,0.584 ,1.5]
+},{
+	"3d_id":8,
+	"3d_point1":[2.23 ,0.584 ,1.5],
+	"3d_point2":[2.23 ,0.034 ,1.5]
+},{
+	"3d_id":9,
+	"3d_point1":[2.23 ,0.034 ,1.5],
+	"3d_point2":[-1.92 ,0.034 ,1.5]
+},{
+	"3d_id":10,
+	"3d_point1":[-1.92 ,0.034 ,-1.5],
+	"3d_point2":[-2.92 ,0.284 ,-1.5]
+},{
+	"3d_id":11,
+	"3d_point1":[-2.92 ,0.284 ,-1.5],
+	"3d_point2":[-6.02 ,0.284 ,-1.5]
+},{
+	"3d_id":12,
+	"3d_point1":[-6.02 ,0.284 ,-1.5],
+	"3d_point2":[-6.02 ,3.934 ,-1.5]
+},{
+	"3d_id":13,
+	"3d_point1":[-6.02 ,3.934 ,-1.5],
+	"3d_point2":[2.53 ,3.934 ,-1.5]
+},{
+	"3d_id":14,
+	"3d_point1":[2.53 ,3.934 ,-1.5],
+	"3d_point2":[2.53 ,1.684 ,-1.5]
+},{
+	"3d_id":15,
+	"3d_point1":[2.53 ,1.684 ,-1.5],
+	"3d_point2":[3.13 ,1.684 ,-1.5]
+},{
+	"3d_id":16,
+	"3d_point1":[3.13 ,1.684 ,-1.5],
+	"3d_point2":[3.13 ,0.584 ,-1.5]
+},{
+	"3d_id":17,
+	"3d_point1":[3.13 ,0.584 ,-1.5],
+	"3d_point2":[2.23 ,0.584 ,-1.5]
+},{
+	"3d_id":18,
+	"3d_point1":[2.23 ,0.584 ,-1.5],
+	"3d_point2":[2.23 ,0.034 ,-1.5]
+},{
+	"3d_id":19,
+	"3d_point1":[2.23 ,0.034 ,-1.5],
+	"3d_point2":[-1.92 ,0.034 ,-1.5]
+},{
+	"3d_id":20,
+	"3d_point1":[-1.92 ,0.034 ,1.5],
+	"3d_point2":[-1.92 ,0.034 ,-1.5]
+},{
+	"3d_id":21,
+	"3d_point1":[-2.92 ,0.284 ,1.5],
+	"3d_point2":[-2.92 ,0.284 ,-1.5]
+},{
+	"3d_id":22,
+	"3d_point1":[-6.02 ,0.284 ,1.5],
+	"3d_point2":[-6.02 ,0.284 ,-1.5]
+},{
+	"3d_id":23,
+	"3d_point1":[-6.02 ,3.934 ,1.5],
+	"3d_point2":[-6.02 ,3.934 ,-1.5]
+},{
+	"3d_id":24,
+	"3d_point1":[2.53 ,3.934 ,1.5],
+	"3d_point2":[2.53 ,3.934 ,-1.5]
+},{
+	"3d_id":25,
+	"3d_point1":[2.53 ,1.684 ,1.5],
+	"3d_point2":[2.53 ,1.684 ,-1.5]
+},{
+	"3d_id":26,
+	"3d_point1":[3.13 ,1.684 ,1.5],
+	"3d_point2":[3.13 ,1.684 ,-1.5]
+},{
+	"3d_id":27,
+	"3d_point1":[3.13 ,0.584 ,1.5],
+	"3d_point2":[3.13 ,0.584 ,-1.5]
+},{
+	"3d_id":28,
+	"3d_point1":[2.23 ,0.584 ,1.5],
+	"3d_point2":[2.23 ,0.584 ,-1.5]
+},{
+	"3d_id":29,
+	"3d_point1":[2.23 ,0.034 ,1.5],
+	"3d_point2":[2.23 ,0.034 ,-1.5]
+}]
+
 let panorama_line_3d = [
     [
         {