更新可拖拽2d配置拓扑机房由3d展示

更新可拖拽2d配置拓扑机房由3d展示（10月底更新）

initCanvas(){
    const THREE = window.THREE;
    const scene = new THREE.Scene();
    this.wCanvas = this.$refs['model'].clientWidth;
    this.hCanvas = this.$refs['model'].clientHeight;
    //环境光:没有特定方向，整体改变场景的光照明暗
    const ambient = new THREE.AmbientLight(0xffffff, 0.7);
    scene.add(ambient);
    this.scene = scene;
    //光源设置
    const directionalLight = new THREE.DirectionalLight(0x27f0ff, 0.8);
    directionalLight.position.set(50, 100, -20);
    // scene.add(directionalLight);
    //从上方照射的白色平行光，强度为 0.5
    const pointLight = new THREE.PointLight(0x27f0ff, 0.8, 0, 3);
        pointLight.position.set(-60, 350, 0);
    scene.add(pointLight);
    this.createMachineRoomModel(scene);
    this.createCamera(THREE,scene);
},
//创建3d围墙
wallModelPoints(arr,vector,max,c){
    const {w,h} = vector;
    const start = {x:  (vector.start.x - w/2)/max,y: (vector.start.y - h/2)/max},//1
    end = {x:  (vector.end.x - w/2)/max,y:  (vector.end.y - h/2)/max};//2
    const deg = calculateAngle(start.x, start.y, end.x, end.y).angleInRadians;
    const sx = start.x + Math.sin(deg)*c,sy = start.y - Math.cos(deg)*c,
    ex = end.x + Math.sin(deg)*c,ey = end.y - Math.cos(deg)*c;
    this.middleTurnPoints.push({x: sx, y: sy},{x: ex, y: ey});//暂时存储在
    if(vector.count == 100){//最后的一个节点
    const points = this.middleTurnPoints.reverse();
        arr.push({
         count: vector.count,
          type: vector.type,
   strokeColor: vector.strokeColor,
    wallHeight: vector.wallHeight,
       opacity: vector.opacity,
        points:[start,end].concat(points)
        })
    }else{
        arr.push({
            count: vector.count,
            type: vector.type,
            points:[start,end]
        })
    }
},