import * as d3 from "d3-scale"; import { formatDefaultLocale } from "d3-format"; import "@kitware/vtk.js/Rendering/Profiles/Geometry"; import vtkFullScreenRenderWindow from "@kitware/vtk.js/Rendering/Misc/FullScreenRenderWindow"; import vtkGenericRenderWindow from '@kitware/vtk.js/Rendering/Misc/GenericRenderWindow'; import vtkActor from "@kitware/vtk.js/Rendering/Core/Actor"; import vtkMapper from "@kitware/vtk.js/Rendering/Core/Mapper"; import vtkScalarBarActor from "@kitware/vtk.js/Rendering/Core/ScalarBarActor"; import vtkColorTransferFunction from "@kitware/vtk.js/Rendering/Core/ColorTransferFunction"; import vtkLookupTable from '@kitware/vtk.js/Common/Core/LookupTable'; import { Representation } from "@kitware/vtk.js/Rendering/Core/Property/Constants"; import vtkPolyData from "@kitware/vtk.js/Common/DataModel/PolyData"; import vtkLight from "@kitware/vtk.js/Rendering/Core/Light"; import { throttle } from '@kitware/vtk.js/macros'; import { FieldDataTypes, FieldAssociations, } from '@kitware/vtk.js/Common/DataModel/DataSet/Constants'; import vtkSphereSource from '@kitware/vtk.js/Filters/Sources/SphereSource'; import vtkLineSource from '@kitware/vtk.js/Filters/Sources/LineSource'; import vtkSphereMapper from '@kitware/vtk.js/Rendering/Core/SphereMapper'; import vtk2DShape from '@kitware/vtk.js/Filters/Sources/Arrow2DSource'; import vtkArrowSource from '@kitware/vtk.js/Filters/Sources/ArrowSource'; import vtkArrow2DSource from '@kitware/vtk.js/Filters/Sources/Arrow2DSource'; import vtkConeSource from '@kitware/vtk.js/Filters/Sources/ConeSource'; import vtkAxesActor from '@kitware/vtk.js/Rendering/Core/AxesActor'; import vtkAnnotatedCubeActor from '@kitware/vtk.js/Rendering/Core/AnnotatedCubeActor'; import vtkOrientationMarkerWidget from '@kitware/vtk.js/Interaction/Widgets/OrientationMarkerWidget'; import vtkCamera from '@kitware/vtk.js/Rendering/Core/Camera'; import vtkPLYReader from '@kitware/vtk.js/IO/Geometry/PLYReader'; import vtkTexture from '@kitware/vtk.js/Rendering/Core/Texture'; import vtkMatrixBuilder from '@kitware/vtk.js/Common/Core/MatrixBuilder'; import axios from 'axios'; export class VtkModel { constructor() { //当前显示 模版 还是结果 this.isJg = false; /** * 选择点线 */ this.isSelectNode = false; /** * 选择管道 */ this.isSelectPipe = false; //管道节点选择对象 this.selectObj = null; //X，Y this.epageX=null; this.epageY=null; //结果选择的点数据 this.selectJgPointId = 0; this.validNodes = [];//节点数据 this.pipes = [];//管道数据 this.renderWindowWith = null; this.renderer = null; this.renderWindow = null; //选取 this.lastActor = null; this.nodeActors = []; //节点actor 数据 this.pipeActors = []; //管道actor 数据 this.interactor = null; this.apiSpecificRenderWindow = null; this.hardwareSelector = null; //模板数据 this.polyData = vtkPolyData.newInstance(); this.mapper = vtkMapper.newInstance(); this.actor = vtkActor.newInstance(); this.actor.getProperty().setRepresentation(Representation.SURFACE); //线 this.actor.getProperty().setColor(WHITE); this.mapper.setInputData(this.polyData); this.actor.setMapper(this.mapper); //点数据 this.actor2 = vtkActor.newInstance(); this.actor2.getProperty().setRepresentation(Representation.POINTS); //点 this.actor2.getProperty().setColor(WHITE); this.actor2.getProperty().setPointSize(2); this.actor2.setMapper(this.mapper); //结果数据渲染 this.jgActor = vtkActor.newInstance(); this.jgMapper = vtkMapper.newInstance(); this.jgActor.getProperty().setRepresentation(Representation.SURFACE); //面 this.scalarBarActor = vtkScalarBarActor.newInstance(); this.scalarBarActor.setGenerateTicks(this.generateTicks(10)); this.scalarBarActor.setDrawAboveRangeSwatch(true); this.scalarBarActor.setDrawNanAnnotation(false); this.scalarBarActor.setDrawAboveRangeSwatch(false); this.scalarBarActor.setBoxPosition([1, 0]); // 修改设条颜色 const ctf = vtkColorTransferFunction.newInstance(); ctf.addRGBPoint(0.0,0, 1, 154/255.0); ctf.addRGBPoint(1.0, 1.0, 165.0/255.0, 0.0); ctf.addRGBPoint(2.0, 230/255.0, 0.0, 92.0/225.0); // ctf.addRGBPoint(0.0, 0.0, 0.0, 1.0); // ctf.addRGBPoint(1.0, 0.0, 1.0, 0.5); // ctf.addRGBPoint(2.0, 0.0, 1.0, 0.0); // ctf.addRGBPoint(3.0, 1.0, 0.5, 0.0); // ctf.addRGBPoint(4.0, 1.0, 0.0, 0.0); this.jgMapper.setLookupTable(ctf); this.jgActor.setMapper(this.jgMapper); const lut = this.jgMapper.getLookupTable(); this.scalarBarActor.setScalarsToColors(lut); //告警数据渲染 this.gjActor = vtkActor.newInstance(); this.gjMapper = vtkMapper.newInstance(); this.gjActor.getProperty().setRepresentation(Representation.SURFACE); //面 this.gjscalarBarActor = vtkScalarBarActor.newInstance(); this.gjscalarBarActor.setGenerateTicks(this.generateTicks(2)); this.gjscalarBarActor.setDrawAboveRangeSwatch(true); this.gjscalarBarActor.setDrawNanAnnotation(false); this.gjscalarBarActor.setDrawAboveRangeSwatch(false); this.gjscalarBarActor.setBoxPosition([1, 0]); this.gjMapper.setLookupTable(vtkLookupTable.newInstance()); const gjlut = this.gjMapper.getLookupTable(); gjlut.setNumberOfColors(parseInt(2, 10)); // hueRange: [0.0, 0.66667], //色调范围 // saturationRange: [1.0, 1.0],//饱和度 // valueRange: [1.0, 1.0], // alphaRange: [1.0, 1.0], //透明度 gjlut.setAlphaRange([1,1]); gjlut.setValueRange([0.5,1]); // gjlut.setHueRange([0.66667,0.0]);//蓝色到红色 gjlut.setHueRange([0.3375,0.0]);//绿色到红色 // this.gjscalarBarActor.setScalarsToColors(gjlut); this.gjMapper.setInterpolateScalarsBeforeMapping(true);//有无渐变 this.gjActor.setMapper(this.gjMapper); this.ways = []; this.wayActors = []; //管道位置数据 const sphereSource = vtkSphereSource.newInstance({ center: [0, 0, 0], radius: 4.0, }); const pipsiteMapper = vtkMapper.newInstance(); this.actorpipsite = vtkActor.newInstance(); pipsiteMapper.setInputConnection(sphereSource.getOutputPort()); this.actorpipsite.setMapper(pipsiteMapper); // this.actorpipsite.setPosition(parseFloat(node.x), parseFloat(node.y), parseFloat(node.z)); this.actorpipsite.getProperty().setColor(WHITE); this.jcdActors = []; //检测点数据 this.jcreader = vtkPLYReader.newInstance(); fetchJSFileAsArrayBuffer('src/assets/3d/jiancd.ply').then(arrayBuffer => { // 读取PLY数据 this.jcreader.parseAsArrayBuffer(arrayBuffer); }); this.pnameActors =[]; this.soureActors =[]; this.soureReader = vtkPLYReader.newInstance(); fetchJSFileAsArrayBuffer('src/assets/3d/fire.ply').then(arrayBuffer => { // 读取PLY数据 this.soureReader.parseAsArrayBuffer(arrayBuffer); }); } xyz_back(){ let cam =this.renderer.getActiveCamera(); cam.setViewUp([0,1,0]); cam.setPosition(495544.15625, 5403554.25, 9989.55990464236);//相机位置; this.renderer.resetCamera(); this.renderWindow.render() } x_up(){ let cam =this.renderer.getActiveCamera(); cam.setViewUp([0,0,1]); cam.setPosition(495544.15625+5000, 5403554.25, 467.62999725341797);//相机位置; this.renderer.resetCamera(); this.renderWindow.render(); } x_down(){ let cam =this.renderer.getActiveCamera(); cam.setViewUp([0,0,1]); cam.setPosition(495544.15625+-5000, 5403554.25, 467.62999725341797);//相机位置 this.renderer.resetCamera(); this.renderWindow.render(); } y_up(){ let cam =this.renderer.getActiveCamera(); cam.setViewUp([0,0,1]); cam.setPosition(495544.15625, 5403554.25+5000, 467.62999725341797);//相机位置 this.renderer.resetCamera(); this.renderWindow.render(); } y_down(){ let cam =this.renderer.getActiveCamera(); cam.setViewUp([0,0,1]); cam.setPosition(495544.15625, 5403554.25-5000, 467.62999725341797);//相机位置 this.renderer.resetCamera(); this.renderWindow.render(); } z_up(){ let cam =this.renderer.getActiveCamera(); cam.setViewUp([0,1,0]); cam.setPosition(495544.15625, 5403554.25, 467.62999725341797+5000);//相机位置 this.renderer.resetCamera(); this.renderWindow.render(); } z_down(){ let cam =this.renderer.getActiveCamera(); cam.setViewUp([0,1,0]); cam.setPosition(495544.15625, 5403554.25, 467.62999725341797-5000);//相机位置 this.renderer.resetCamera(); this.renderWindow.render(); } //巷道名称 initPname() { fetch('src/assets/3d/pipname.json') .then(response => response.json()).then(data => { let pipnames = data; pipnames.forEach((pipname)=>{ let pnameReader = vtkPLYReader.newInstance(); fetchJSFileAsArrayBuffer('src/assets/3d/'+pipname.name+'.ply').then(arrayBuffer => { // 读取PLY数据 pnameReader.parseAsArrayBuffer(arrayBuffer); }); const mapper = vtkMapper.newInstance(); mapper.setInputConnection(pnameReader.getOutputPort()); const actor = vtkActor.newInstance(); actor.setPosition(pipname.x,pipname.y,pipname.z); actor.getProperty().setColor(TEXTCOLOR); actor.setMapper(mapper); actor.setScale(20,20,20);//放大 this.pnameActors.push(actor); // this.renderer.addActor(actor); }); }).catch(error => { console.error('Error fetching JSON:', error); }); } //显示巷道名称 showPname(){ this.pnameActors.forEach((actor)=>{ this.renderer.addActor(actor); }); this.renderWindow.render(); } //隐藏巷道名称 removePname(){ this.pnameActors.forEach((actor)=>{ this.renderer.removeActor(actor); }); this.renderWindow.render(); } //清空灾源 delSoures(){ this.removeSoure(); this.soureActors=[]; } //添加一个灾源点 addSoures(pid,site){ let pipe =this.pipeByPid(pid); let point1 = this.pointByPipeNodeId(pipe.snId); let point2 = this.pointByPipeNodeId(pipe.enId); let py = site/(1-site); let pipsite_point=[ (point1[0]+py*point2[0])/(1+py), (point1[1]+py*point2[1])/(1+py), (point1[2]+py*point2[2])/(1+py), ] this.initSoure(pipsite_point[0],pipsite_point[1],pipsite_point[2]); } initSoure(x,y,z) { const mapper = vtkMapper.newInstance(); mapper.setInputConnection(this.soureReader.getOutputPort()); const actor = vtkActor.newInstance(); actor.setPosition(x,y,z); actor.getProperty().setColor(SOURECOLOR); actor.setMapper(mapper); // 旋转actor actor.rotateY(45);// 绕y轴旋转 actor.setScale(20,20,20);//放大 this.soureActors.push(actor); // this.renderer.addActor(actor); } //显示灾源点 showSoure(){ this.soureActors.forEach((actor)=>{ this.renderer.addActor(actor); }); this.renderWindow.render(); } //隐藏灾源点 removeSoure(){ this.soureActors.forEach((actor)=>{ this.renderer.removeActor(actor); }); this.renderWindow.render(); } //初始化监测点 initCheckNodes(checkNodes){ checkNodes.forEach((checkNode) => { let pipe =this.pipeByPid(checkNode.pid); let site =checkNode.site; let point1 = this.pointByPipeNodeId(pipe.snId); let point2 = this.pointByPipeNodeId(pipe.enId); let py = site/(1-site); let pipsite_point=[ (point1[0]+py*point2[0])/(1+py), (point1[1]+py*point2[1])/(1+py), (point1[2]+py*point2[2])/(1+py), ] this.initjc(pipsite_point[0],pipsite_point[1],pipsite_point[2]); }); } initjc(x,y,z) { const mapper = vtkMapper.newInstance(); mapper.setInputConnection(this.jcreader.getOutputPort()); const actor = vtkActor.newInstance(); actor.setPosition(x,y,z); actor.getProperty().setColor(WHITE); actor.setMapper(mapper); actor.setScale(5,5,5);//放大 this.jcdActors.push(actor); } //显示监测点 showjc(){ this.jcdActors.forEach((actor)=>{ this.renderer.addActor(actor); }); this.renderWindow.render(); } //隐藏监测点 removejc(){ this.jcdActors.forEach((actor)=>{ this.renderer.removeActor(actor); }); this.renderWindow.render(); } //显示所选择巷道位置 addpipsite(pipe,site){ let point1 = this.pointByPipeNodeId(pipe.snId); let point2 = this.pointByPipeNodeId(pipe.enId); let py = site/(1-site); let pipsite_point=[ (point1[0]+py*point2[0])/(1+py), (point1[1]+py*point2[1])/(1+py), (point1[2]+py*point2[2])/(1+py), ] this.actorpipsite.setPosition(pipsite_point); this.renderer.addActor(this.actorpipsite); this.renderWindow.render(); } //移除所选择的巷道位置 clearpipsite(){ this.renderer.removeActor(this.actorpipsite); } waysInit(ways) { this.renderWindowWith.resize(); this.ways = ways; this.ways.forEach((way) => { let nodes1 = []; let nodes2 = []; for (let index = 0; index < way.nrows.length - 1; index++) { nodes1.push(way.nrows[index]); } for (let index = 1; index < way.nrows.length; index++) { nodes2.push(way.nrows[index]); } for (let index = 0; index < nodes2.length; index++) { const lineSource = vtkLineSource.newInstance(); let snode = nodes1[index]; let enode = nodes2[index]; let point1 = [parseFloat(snode.x), parseFloat(snode.y), parseFloat(snode.z)]; let point2 = [parseFloat(enode.x), parseFloat(enode.y), parseFloat(enode.z)]; lineSource.setPoint1(point1); lineSource.setPoint2(point2); lineSource.setResolution(12); const actor = vtkActor.newInstance(); const mapper = vtkMapper.newInstance(); actor.setMapper(mapper); actor.getProperty().setLineWidth(3);//设置线宽 if(way.safety=="safety"){ actor.getProperty().setColor(GREEN); }else if(way.safety=="danger"){ actor.getProperty().setColor(REA); } const initialValues = { base: 0, center: point2, height: 9, radius: 5, resolution: 8, direction: [ point2[0]-point1[0], point2[1]-point1[1], point2[2]-point1[2], ] }; const vtk2d = vtkConeSource.newInstance(initialValues); const mapper2 = vtkMapper.newInstance(); mapper2.setInputConnection(vtk2d.getOutputPort()); const actor2 = vtkActor.newInstance(); actor2.setMapper(mapper2); if(way.safety=="safety"){ actor2.getProperty().setColor(GREEN); }else if(way.safety=="danger"){ actor2.getProperty().setColor(REA); } this.wayActors.push(actor2); mapper.setInputConnection(lineSource.getOutputPort()); this.wayActors.push(actor); } }); this.wayActors.forEach((wayAcotor) => { this.renderer.addActor(wayAcotor); }); // vtkmodel.renderer.resetCamera(); vtkmodel.renderWindow.render(); } initMode(rootContainer) { this.renderWindowWith = vtkGenericRenderWindow.newInstance(); this.renderWindowWith.setContainer(rootContainer); this.renderer = this.renderWindowWith.getRenderer(); this.renderer.setBackground(0.0, 0.0, 0.0, 0.0) this.renderWindow = this.renderWindowWith.getRenderWindow(); //选取 this.lastActor = null; this.nodeActors = []; //节点actor 数据 this.pipeActors = []; //管道actor 数据 this.interactor = this.renderer.getRenderWindow().getInteractor(); this.apiSpecificRenderWindow = this.interactor.getView(); this.hardwareSelector = this.apiSpecificRenderWindow.getSelector(); this.hardwareSelector.setCaptureZValues(true); // this.hardwareSelector.setFieldAssociation(FieldAssociations.FIELD_ASSOCIATION_POINTS); this.hardwareSelector.setFieldAssociation(FieldAssociations.FIELD_ASSOCIATION_CELLS); // document.addEventListener("mousemove", throttleMouseHandler); document.addEventListener('contextmenu', throttleMouseHandler,function(e){ e.preventDefault(); // throttleMouseHandler }) // //箭头 this.arrowActors = []; // const viewColors = [ // [1, 0, 0], // sagittal // [0, 1, 0], // coronal // [0, 0, 1], // axial // [0.5, 0.5, 0.5], // 3D // ]; // // create axes // const axes = vtkAnnotatedCubeActor.newInstance(); // axes.setDefaultStyle({ // text: '+X', // fontStyle: 'bold', // fontFamily: 'Arial', // fontColor: 'black', // fontSizeScale: (res) => res / 2, // faceColor: createRGBStringFromRGBValues(viewColors[0]), // faceRotation: 0, // edgeThickness: 0.1, // edgeColor: 'black', // resolution: 400, // }); // // axes.setXPlusFaceProperty({ text: '+X' }); // axes.setXMinusFaceProperty({ // text: '-X', // faceColor: createRGBStringFromRGBValues(viewColors[0]), // faceRotation: 90, // fontStyle: 'italic', // }); // axes.setYPlusFaceProperty({ // text: '+Y', // faceColor: createRGBStringFromRGBValues(viewColors[1]), // fontSizeScale: (res) => res / 4, // }); // axes.setYMinusFaceProperty({ // text: '-Y', // faceColor: createRGBStringFromRGBValues(viewColors[1]), // fontColor: 'white', // }); // axes.setZPlusFaceProperty({ // text: '+Z', // faceColor: createRGBStringFromRGBValues(viewColors[2]), // }); // axes.setZMinusFaceProperty({ // text: '-Z', // faceColor: createRGBStringFromRGBValues(viewColors[2]), // faceRotation: 45, // }); // // const vtkAxesActor = vtkAxesActor.newInstance(); // // create orientation widget // this.orientationWidget = vtkOrientationMarkerWidget.newInstance({ // actor: axes, // interactor: this.renderWindow.getInteractor(), // }); // this.orientationWidget.setEnabled(true); // this.orientationWidget.setViewportCorner( // vtkOrientationMarkerWidget.Corners.BOTTOM_LEFT // ); // this.orientationWidget.setViewportSize(0.15); // this.orientationWidget.setMinPixelSize(100); // this.orientationWidget.setMaxPixelSize(300); } generateTicks(numberOfTicks) { return (helper) => { const lastTickBounds = helper.getLastTickBounds(); // compute tick marks for axes const scale = d3 .scaleLinear() .domain([0.0, 1.0]) .range([lastTickBounds[0], lastTickBounds[1]]); const samples = scale.ticks(numberOfTicks); const ticks = samples.map((tick) => scale(tick)); // Replace minus "\u2212" with hyphen-minus "\u002D" so that parseFloat() works formatDefaultLocale({ minus: "\u002D" }); const format = scale.tickFormat(ticks[0], ticks[ticks.length - 1], numberOfTicks); const tickStrings = ticks .map(format) .map((tick) => Number(parseFloat(tick).toPrecision(12)).toPrecision()); // d3 sometimes adds unwanted whitespace helper.setTicks(ticks); helper.setTickStrings(tickStrings); }; } //添加箭头 addArrow(velocitys) { this.clearArrow(); this.arrowActors = []; velocitys.forEach(velocity => { velocity.points.forEach(point => { // const initialValues = { // base:0, // shape: 'arrow4points', // center: [point.x,point.y,point.z], // direction:[ // velocity.vector[2], // velocity.vector[0], // velocity.vector[1] // ], // height: 10.0, // thickness: 1.5, // width: 3, // }; // const vtk2d = vtk2DShape.newInstance(initialValues); const initialValues = { // base: 0, center: [point.x, point.y, point.z], // height: 10, // radius: 3, // resolution: 6, height: 10.0, radius:2, resolution: 6, direction: [ // velocity.vector[2], // velocity.vector[0], // velocity.vector[1] velocity.vector[0], velocity.vector[1], velocity.vector[2] ], capping: true, }; const vtk2d = vtkConeSource.newInstance(initialValues); const mapper = vtkMapper.newInstance(); mapper.setInputConnection(vtk2d.getOutputPort()); const actor = vtkActor.newInstance(); actor.setMapper(mapper); actor.getProperty().setColor(REA); this.arrowActors.push(actor); // this.renderer.addActor(actor); }) }); for (let index = 0; index < this.arrowActors.length; index=index+30) { let actor =this.arrowActors[index]; this.renderer.addActor(actor); }; this.renderWindow.render(); } clearArrow() { if (this.arrowActors) { this.arrowActors.forEach(actor => { this.renderer.removeActor(actor); }); } } modelInit(validNodes, pipes) { this.renderWindowWith.resize(); this.validNodes = validNodes; this.pipes = pipes; this.modelCreate(); } modelCreate() { console.log("modelInit.."); const points = this.polyData.getPoints(); const lines = this.polyData.getLines(); //无节点actor this.validNodes.forEach((node) => { points.insertNextPoint(parseFloat(node.x), parseFloat(node.y), parseFloat(node.z)); }); //无管道actor this.pipes.forEach((pipe) => { let sid = this.indexIdByPipeNodeId(pipe.snId); let eid = this.indexIdByPipeNodeId(pipe.enId); lines.insertNextCell([sid, eid]); }); //有节点actors const sphereSource = vtkSphereSource.newInstance({ center: [0, 0, 0], radius: 4.0, }); const mapper = vtkMapper.newInstance(); mapper.setInputConnection(sphereSource.getOutputPort()); this.validNodes.forEach((node) => { const actor = vtkActor.newInstance(); actor.setMapper(mapper); actor.setPosition(parseFloat(node.x), parseFloat(node.y), parseFloat(node.z)); actor.getProperty().setColor(WHITE); const nodeActor = {}; nodeActor.node = node; nodeActor.actor = actor; this.nodeActors.push(nodeActor); }); //有管道actors this.pipes.forEach((pipe) => { const lineSource = vtkLineSource.newInstance(); let point1 = this.pointByPipeNodeId(pipe.snId); let point2 = this.pointByPipeNodeId(pipe.enId); lineSource.setPoint1(point1); lineSource.setPoint2(point2); lineSource.setResolution(12); const actor = vtkActor.newInstance(); const mapper = vtkMapper.newInstance(); actor.setMapper(mapper); actor.getProperty().setLineWidth(3);//设置线宽 actor.getProperty().setColor(WHITE); mapper.setInputConnection(lineSource.getOutputPort()); const pipeActor = {}; pipeActor.pipe = pipe; pipeActor.actor = actor; this.pipeActors.push(pipeActor); }); this.modelShow(); this.renderer.resetCamera(); const cam = this.renderer.getActiveCamera(); console.log("透视或平行相机", cam.getParallelProjection()); // cam.setParallelProjection(true); // console.log("透视或平行相机",cam.getParallelProjection()); console.log("水平视角使用", cam.getUseHorizontalViewAngle()); // cam.setUseHorizontalViewAngle(true); console.log("平行位置投影比例", cam.getParallelScale()); // cam.setParallelScale(600); console.log("窗口中心位置", cam.getWindowCenter());//[0, 0] // cam.setWindowCenter([1,-1]); console.log("相机视角", cam.getViewAngle());//30 // cam.setViewAngle(90); console.log("摄像头位置", cam.getPosition());//[495544.15625, 5403554.25, 9989.55990464236] // cam.setPosition(495544.15625, 5403554.25, 9989.55990464236); console.log("相机焦点", cam.getFocalPoint());// [495544.15625, 5403554.25, 467.62999725341797] // cam.setFocalPoint(495544.15625, 5403554.25, 467.62999725341797); console.log("相机方向", cam.getViewUp());//[0,1,0] // cam.setViewUp([0,1,1]); console.log("近远平面", cam.getClippingRange());// [9141.491986233214, 9913.53967078369] // cam.setClippingRange(9241.491986233214,9300.53967078369); //设置环境光和光照 const light = vtkLight.newInstance(); light.setColor(1.0, 1.0, 1.0); // 白色环境光 light.setIntensity(3.0); // 强度为1.0 this.renderer.addLight(light); // this.renderer.resetCamera(); // cam.setPosition(0, 0, 9989); //相机焦点 495544.15625 5403554.25 467.62999725341797 // cam.setPosition( 495544.15625+500, 5403554.25, 467.62999725341797); // cam.setPosition( 495544.15625-500, 5403554.25, 467.62999725341797); // cam.setViewUp([0,0,1]); // this.renderer.updateCamera(); } modelClearShow() { this.renderer.removeActor(this.actor); this.renderer.removeActor(this.actor2); this.nodeActors.forEach((nodeActor) => { this.renderer.removeActor(nodeActor.actor); }); this.pipeActors.forEach((pipeActor) => { this.renderer.removeActor(pipeActor.actor); }); } wayClearShow(){ this.wayActors.forEach((wayAcotor) => { this.renderer.removeActor(wayAcotor); }); } modelShow() { this.modelClearShow(); if (!this.isSelectNode) {//不选择节点 this.renderer.addActor(this.actor2); } if (!this.isSelectPipe) {//不选择管道 this.renderer.addActor(this.actor); } if (this.isSelectNode) {//选择节点 this.nodeActors.forEach((nodeActor) => { this.renderer.addActor(nodeActor.actor); }); } if (this.isSelectPipe) {//选择管道 this.pipeActors.forEach((pipeActor) => { this.renderer.addActor(pipeActor.actor); }); } // this.addjc(495530.903,5403828.821,432.40); // this.addpname(495530.903,5403829.821,432.40); // this.addSoure(495530.903,5403829.821,432.40); // this.addpname(495530.903,5403829.821,432.40); this.initPname(); this.renderer.addActor(this.axesActor); // this.rotateY(); } selectNodes() { this.isSelectNode = true; this.isSelectPipe = false; this.modelShow(); document.addEventListener("mousemove", throttleMouseHandler); this.renderWindow.render(); } selectPipes() { this.isSelectNode = false; this.isSelectPipe = true; document.addEventListener("mousemove", throttleMouseHandler); this.modelShow(); this.renderWindow.render(); } selectNoting() { this.isSelectNode = false; this.isSelectPipe = false; this.modelShow(); this.renderWindow.render(); } /** * 根据id 获取对应的编号 */ indexIdByPipeNodeId(nid) { for (let index = 0; index < this.validNodes.length; index++) { const node = this.validNodes[index]; if (node.id == nid) { return index; } } return 0; } pipeByPid(pid) { console.log("pipeByPid",this.pipes.length) for (let index = 0; index < this.pipes.length; index++) { const pipe = this.pipes[index]; if (pipe.id == pid) { return pipe; } } } pointByPipeNodeId(nid) { for (let index = 0; index < this.validNodes.length; index++) { const node = this.validNodes[index]; if (node.id == nid) { return [parseFloat(node.x), parseFloat(node.y), parseFloat(node.z)]; } } return 0; } clearAllShowGj() { this.renderer.addActor(this.gjActor); this.renderer.addActor(this.gjscalarBarActor); this.renderer.removeActor(this.jgActor); this.renderer.removeActor(this.scalarBarActor); this.isSelectNode = false; this.isSelectPipe = false; this.wayClearShow(); this.modelClearShow(); this.isJg = true; //显示结果 document.removeEventListener("mousemove", throttleMouseHandler); } clearModeAddJg() { this.renderer.addActor(this.jgActor); this.renderer.addActor(this.scalarBarActor); this.isSelectNode = false; this.isSelectPipe = false; this.renderer.removeActor(this.gjActor); this.renderer.removeActor(this.gjscalarBarActor) this.wayClearShow(); this.modelClearShow(); this.isJg = true; //显示结果 document.removeEventListener("mousemove", throttleMouseHandler); } clearJgAddMode() { this.renderer.removeActor(this.scalarBarActor); this.renderer.removeActor(this.jgActor); this.renderer.removeActor(this.gjActor); this.renderer.removeActor(this.gjscalarBarActor) this.clearArrow(); this.modelShow(); this.wayClearShow(); this.isJg = false; //不显示结果 } clearAll() { this.renderer.removeActor(this.jgActor); this.renderer.removeActor(this.scalarBarActor); this.renderer.removeActor(this.gjActor); this.renderer.removeActor(this.gjscalarBarActor) this.clearArrow(); this.modelClearShow(); this.wayClearShow(); this.renderWindow.render(); } //选中指定点 selectByNodeId(nid) { console.log("selectByNodeId", nid); if (this.isSelectNode) { if (this.lastActor != null) { this.lastActor.getProperty().setColor(WHITE); } this.nodeActors.forEach(nodeActor => { if (nid == nodeActor.node.id) { nodeActor.actor.getProperty().setColor(GREEN); this.renderWindow.render(); this.lastActor = nodeActor.actor; this.selectObj = nodeActor.node; return; } }); } } //选中指定管道 selectByPipeId(pid) { console.log("selectByPipeId", pid); if (this.isSelectPipe) { if (this.lastActor != null) { this.lastActor.getProperty().setColor(WHITE); } this.pipeActors.forEach(pipeActor => { if (pid == pipeActor.pipe.id) { pipeActor.actor.getProperty().setColor(GREEN); this.renderWindow.render(); this.lastActor = pipeActor.actor; this.selectObj = pipeActor.node; return; } }); } } } function createRGBStringFromRGBValues(rgb) { if (rgb.length !== 3) { return 'rgb(0, 0, 0)'; } return `rgb(${(rgb[0] * 255).toString()}, ${(rgb[1] * 255).toString()}, ${( rgb[2] * 255 ).toString()})`; } function pickOnMouseEvent(event) { if (vtkmodel.interactor.isAnimating()) { // We should not do picking when interacting with the scene return; } const [x, y] = eventToWindowXY(event); // console.log([x,y]); // if(!vtkmodel.getPointData){//没有数据 // return ; // } // console.log(vtkmodel.hardwareSelector.getPointData()); // if(!vtkmodel.renderer.getActors().size==0){ // return; // } vtkmodel.hardwareSelector .getSourceDataAsync(vtkmodel.renderer, x, y, x, y) .then((result) => { if (result) { processSelections(result.generateSelection(x, y, x, y)); // processSelections(result.generateSelection(x, y, x, y)); } else { // processSelections(null); } }); } function eventToWindowXY(event) { // We know we are full screen => window.innerXXX // Otherwise we can use pixel device ratio or else... var left = event.pageX ; var top = event.pageY ; vtkmodel.epageX=left; vtkmodel.epageY=top; const { clientX, clientY } = event; const [width, height] = vtkmodel.apiSpecificRenderWindow.getSize(); const x = Math.round((width * clientX) / window.innerWidth); const y = Math.round(height * (1 - clientY / window.innerHeight)); // Need to flip Y // console.log(x,y) return [x, y]; } function processSelections(selections) { if (!selections || selections.length === 0) {//没有选择 if (vtkmodel.lastActor == null) { } else { // vtkmodel.lastActor.getProperty().setColor(WHITE); // vtkmodel.renderWindow.render(); } // vtkmodel.lastActor = null; return; } const { worldPosition: rayHitWorldPosition, compositeID, prop, propID, attributeID, } = selections[0].getProperties(); if (vtkmodel.lastActor != null) { vtkmodel.lastActor.getProperty().setColor(WHITE); vtkmodel.renderWindow.render(); } vtkmodel.nodeActors.forEach((nodeActor) => { if (prop == nodeActor.actor) { vtkmodel.selectObj = nodeActor.node; prop.getProperty().setColor(GREEN); vtkmodel.lastActor = prop; // console.log(vtkmodel.selectObj ); } }); vtkmodel.pipeActors.forEach((pipeActor) => { if (prop == pipeActor.actor) { vtkmodel.selectObj = pipeActor.pipe; prop.getProperty().setColor(GREEN); vtkmodel.lastActor = prop; // console.log(vtkmodel.selectObj ); } }); if (vtkmodel.isJg) {//结果数据选择cell if (vtkmodel.hardwareSelector.getFieldAssociation() === FieldAssociations.FIELD_ASSOCIATION_POINTS) {//选择点 } else { //选择Cell const input = prop.getMapper().getInputData(); if (!input.getCells()) { input.buildCells(); // return; } const cellPoints = input.getCellPoints(attributeID); if (cellPoints) { const pointIds = cellPoints.cellPointIds; // Find the closest cell point, and use that as cursor position const points = Array.from(pointIds).map((pointId) => input.getPoints().getPoint(pointId) ); const scalarDataArray = input.getPointData().getScalars().getData(); console.log(scalarDataArray[pointIds[0]]);//节点标量数据 // pointIds.forEach(pointId=>{ // console.log(input.getPointData().getScalars().getName()); // console.log(scalarDataArray[pointId]);//节点标量数据 // }); vtkmodel.selectJgPointId = pointIds[0]; } } } else { vtkmodel.renderWindow.render(); } } // 异步函数，用于读取JS文件并转换为ArrayBuffer async function fetchJSFileAsArrayBuffer(url) { try { // 使用fetch API异步加载JS文件 const response = await fetch(url, { method: 'GET', responseType: 'arraybuffer' // 指定响应类型为arraybuffer }); // 确保响应成功 if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } // 获取ArrayBuffer对象 const arrayBuffer = await response.arrayBuffer(); // 可选：验证转换后的ArrayBuffer内容 const decoder = new TextDecoder(); // 使用TextDecoder将ArrayBuffer解码为字符串 const content = decoder.decode(arrayBuffer); // console.log('File content:', content); return arrayBuffer; } catch (error) { console.error('Error fetching the file:', error); throw error; // 重新抛出错误以便上层处理 } } const throttleMouseHandler = throttle(pickOnMouseEvent, 20); const WHITE = [1, 0.2, 1]; const GREEN = [0.1, 0.8, 0.1]; const REA = [1, 0, 0]; const JCDCOLOR = [0.5, 0, 0]; const SOURECOLOR = [0.5, 0.5, 0]; const TEXTCOLOR = [1, 1, 1]; const vtkmodel = new VtkModel(); export { vtkmodel };