可拖拽配置数据转化成3d机房拓扑

用2d canvas配置然后通过数据格式转化成3d机房拓扑

案例：网址

图标上方鼠标中间滚轮按下显示可配置弹窗 由前面2d界面拖拽的数据生成3D界面

init2Dcanvas()=>{
    const topoDom = this.$refs['topo2d'];
    const w = topoDom.width = topoDom.clientWidth,
    h = topoDom.height = topoDom.clientHeight;
    const ctx = topoDom.getContext('2d');
    this.ctx = ctx;this.w = w;this.h = h;
    ctx.font = "normal 16px 黑体";
    ctx.lineCap = "square";
    this.drawAxesHelper(ctx,w,h);
    setTimeout(()=>{
        this.modelArrs = localStorage.getItem("modelArrs")?JSON.parse(localStorage.getItem("modelArrs")):this.modelArrs;
        this.modelArrs.length > 0 ? this.rePantCanvas():null;
    },300)
}
createLineModal()=>{
    // 顶点数据
    const vertices = new Float32Array(obj);
    // BufferGeometry
    const geometry = new THREE.BufferGeometry();
    geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3));
    
    // 线材质对象
    const material = new THREE.LineBasicMaterial({
        color: color ? color : 0x59abff //线条颜色
    }); 
    // 创建线模型对象
    const line = new THREE.Line(geometry, material);
    line.visible = isLabelView;
    scene.add(line);
}