|
@@ -55,176 +55,17 @@ class GasAssessmen {
|
|
this.model.renderer?.render(this.model.scene as THREE.Scene, this.model.camera as THREE.PerspectiveCamera);
|
|
this.model.renderer?.render(this.model.scene as THREE.Scene, this.model.camera as THREE.PerspectiveCamera);
|
|
}
|
|
}
|
|
|
|
|
|
- setPlanes1 = (n) => {
|
|
|
|
- // const sizeList = [0.2, 0.3, 0.1, 0.2, 0.2];
|
|
|
|
- const colors = {
|
|
|
|
- c1: new THREE.Color(0x00fe00), // >90
|
|
|
|
- c2: new THREE.Color(0xf9b866), // >75 <90 249,184,102
|
|
|
|
- c3: new THREE.Color(0xfefe00), // 50-75 254,254,0
|
|
|
|
- c4: new THREE.Color(0xfe6600), // 25-50 254,102,0
|
|
|
|
- c5: new THREE.Color(0xb00101), // <25 176,1,1
|
|
|
|
- };
|
|
|
|
-
|
|
|
|
- const sizeList = [
|
|
|
|
- {
|
|
|
|
- id: '111',
|
|
|
|
- ratio: 0.5,
|
|
|
|
- color: colors.c1,
|
|
|
|
- },
|
|
|
|
- {
|
|
|
|
- id: '222',
|
|
|
|
- ratio: 0.3,
|
|
|
|
- color: colors.c2,
|
|
|
|
- },
|
|
|
|
- {
|
|
|
|
- id: '333',
|
|
|
|
- ratio: 0.2,
|
|
|
|
- color: colors.c4,
|
|
|
|
- },
|
|
|
|
- // {
|
|
|
|
- // id: '444',
|
|
|
|
- // ratio: 0.2,
|
|
|
|
- // color: colors.c5,
|
|
|
|
- // },
|
|
|
|
- // {
|
|
|
|
- // id: '555',
|
|
|
|
- // ratio: 0.2,
|
|
|
|
- // color: colors.c3,
|
|
|
|
- // },
|
|
|
|
- ];
|
|
|
|
- this.unitList = sizeList;
|
|
|
|
-
|
|
|
|
- // width = 7.713 height =3.717
|
|
|
|
-
|
|
|
|
- // const sizeList = [
|
|
|
|
- // {
|
|
|
|
- // ratio: 0.4,
|
|
|
|
- // color: colors.c1,
|
|
|
|
- // },
|
|
|
|
- // {
|
|
|
|
- // ratio: 0.5,
|
|
|
|
- // color: colors.c2,
|
|
|
|
- // },
|
|
|
|
- // {
|
|
|
|
- // ratio: 0.1,
|
|
|
|
- // color: colors.c4,
|
|
|
|
- // },
|
|
|
|
- // ];
|
|
|
|
-
|
|
|
|
- const geometry = new THREE.PlaneGeometry(7.723, 3.72, 1, 1);
|
|
|
|
-
|
|
|
|
- // 初始化累积比例数组和颜色数组
|
|
|
|
- const accumulatedRatios = [];
|
|
|
|
- const colorsArray = new Float32Array(3 * sizeList.length);
|
|
|
|
-
|
|
|
|
- // 计算累积比例和颜色数组
|
|
|
|
- function updateShaderData(sizeList) {
|
|
|
|
- let accRatio = 0;
|
|
|
|
- for (let i = 0; i < sizeList.length; i++) {
|
|
|
|
- const item = sizeList[i];
|
|
|
|
- accRatio += item.ratio;
|
|
|
|
- accumulatedRatios.push(accRatio);
|
|
|
|
- colorsArray[i * 3] = item.color.r;
|
|
|
|
- colorsArray[i * 3 + 1] = item.color.g;
|
|
|
|
- colorsArray[i * 3 + 2] = item.color.b;
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- updateShaderData(sizeList); // 初始调用
|
|
|
|
-
|
|
|
|
- // 定义着色器代码
|
|
|
|
- const vertexShader = `
|
|
|
|
- varying vec2 vUv;
|
|
|
|
- void main() {
|
|
|
|
- vUv = uv;
|
|
|
|
- gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
|
|
|
|
- }
|
|
|
|
-`;
|
|
|
|
-
|
|
|
|
- const fragmentShader = `
|
|
|
|
- varying vec2 vUv;
|
|
|
|
- uniform float ratios[${sizeList.length}];
|
|
|
|
- uniform vec3 colors[${sizeList.length}];
|
|
|
|
-
|
|
|
|
- void main() {
|
|
|
|
- for(int i = 0; i < ${sizeList.length}; i++) {
|
|
|
|
- if(vUv.x < ratios[i]) {
|
|
|
|
- gl_FragColor = vec4(colors[i], 1.0);
|
|
|
|
- return;
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- gl_FragColor = vec4(0.0, 0.0, 0.0, 0.5);
|
|
|
|
- }
|
|
|
|
- `;
|
|
|
|
-
|
|
|
|
- // const fragmentShader = `
|
|
|
|
- // varying vec2 vUv;
|
|
|
|
- // uniform float ratios[${sizeList.length + 1}]; // 加入了起始点 0
|
|
|
|
- // uniform vec3 colors[${sizeList.length}];
|
|
|
|
-
|
|
|
|
- // vec3 lerp(vec3 a, vec3 b, float t) {
|
|
|
|
- // return a + t * (b - a);
|
|
|
|
- // }
|
|
|
|
-
|
|
|
|
- // void main() {
|
|
|
|
- // int index = 0;
|
|
|
|
- // for(int i = 1; i <= ${sizeList.length}; i++) {
|
|
|
|
- // if(vUv.x >= ratios[i-1] && vUv.x < ratios[i]) {
|
|
|
|
- // index = i - 1;
|
|
|
|
- // break;
|
|
|
|
- // }
|
|
|
|
- // }
|
|
|
|
-
|
|
|
|
- // // 如果是最后一个颜色块,直接使用其颜色
|
|
|
|
- // if (index == ${sizeList.length - 1}) {
|
|
|
|
- // gl_FragColor = vec4(colors[index], 1.0);
|
|
|
|
- // } else {
|
|
|
|
- // // 计算该像素在当前颜色块内的相对位置
|
|
|
|
- // float t = (vUv.x - ratios[index]) / (ratios[index + 1] - ratios[index]);
|
|
|
|
- // // 在相邻颜色间进行线性插值
|
|
|
|
- // vec3 color = lerp(colors[index], colors[index + 1], t);
|
|
|
|
- // gl_FragColor = vec4(color, 1.0);
|
|
|
|
- // }
|
|
|
|
- // }
|
|
|
|
- // `;
|
|
|
|
-
|
|
|
|
- // 创建着色器材质
|
|
|
|
- const material = new THREE.ShaderMaterial({
|
|
|
|
- uniforms: {
|
|
|
|
- ratios: { value: accumulatedRatios },
|
|
|
|
- colors: { value: colorsArray },
|
|
|
|
- },
|
|
|
|
- vertexShader: vertexShader,
|
|
|
|
- fragmentShader: fragmentShader,
|
|
|
|
- depthTest: false,
|
|
|
|
- depthWrite: false,
|
|
|
|
- });
|
|
|
|
-
|
|
|
|
- // // 当 sizeList 数据变化时调用此函数
|
|
|
|
- // function updateSizeList(newSizeList) {
|
|
|
|
- // accumulatedRatios.length = 0; // 清空累积比例数组
|
|
|
|
- // updateShaderData(newSizeList);
|
|
|
|
- // material.uniforms.ratios.value = accumulatedRatios;
|
|
|
|
- // material.uniforms.colors.value = colorsArray;
|
|
|
|
- // material.needsUpdate = true;
|
|
|
|
- // }
|
|
|
|
-
|
|
|
|
- // 创建网格并添加到场景中
|
|
|
|
- const plane = new THREE.Mesh(geometry, material);
|
|
|
|
- plane.rotation.x = -Math.PI / 2;
|
|
|
|
- plane.position.set(-0.2, 0.15, -0.03);
|
|
|
|
- plane.name = 'unit';
|
|
|
|
- this.planeGroup.add(plane);
|
|
|
|
- this.group.add(this.planeGroup);
|
|
|
|
- };
|
|
|
|
-
|
|
|
|
setPlanes = (unitList: any[]) => {
|
|
setPlanes = (unitList: any[]) => {
|
|
if (!unitList || unitList.length === 0) return;
|
|
if (!unitList || unitList.length === 0) return;
|
|
// 要根据unitList来计算比例
|
|
// 要根据unitList来计算比例
|
|
type Point = { u: number; v: number };
|
|
type Point = { u: number; v: number };
|
|
let max = 0;
|
|
let max = 0;
|
|
- const unitLen = unitList[unitList.length - 1]['unitLen'].split(',');
|
|
|
|
- max = Math.max(max, ...unitLen);
|
|
|
|
|
|
+ for (let i = 0; i < unitList.length; i++) {
|
|
|
|
+ const unit = unitList[i];
|
|
|
|
+ const unitLen = unit['unitLen'].split(',');
|
|
|
|
+ max = Math.max(max, ...unitLen);
|
|
|
|
+ }
|
|
|
|
+
|
|
const regions = <{ points: Point[]; color: any[] }[]>[];
|
|
const regions = <{ points: Point[]; color: any[] }[]>[];
|
|
for (let i = 0; i < unitList.length; i++) {
|
|
for (let i = 0; i < unitList.length; i++) {
|
|
const item = unitList[i];
|
|
const item = unitList[i];
|
|
@@ -340,21 +181,25 @@ class GasAssessmen {
|
|
setCss3D = (unitList: any[]) => {
|
|
setCss3D = (unitList: any[]) => {
|
|
const sizeList: number[] = [];
|
|
const sizeList: number[] = [];
|
|
if (!unitList || unitList.length === 0) return;
|
|
if (!unitList || unitList.length === 0) return;
|
|
- let max = 0;
|
|
|
|
- const unitLen = unitList[unitList.length - 1]['unitLen'].split(',');
|
|
|
|
- max = Math.max(max, ...unitLen);
|
|
|
|
|
|
+ let max = 0,
|
|
|
|
+ leftW = 0;
|
|
|
|
+ for (let i = 0; i < unitList.length; i++) {
|
|
|
|
+ const unit = unitList[i];
|
|
|
|
+ const unitLen = unit['unitLen'].split(',');
|
|
|
|
+ max = Math.max(max, ...unitLen);
|
|
|
|
+ }
|
|
for (let i = 0; i < unitList.length; i++) {
|
|
for (let i = 0; i < unitList.length; i++) {
|
|
const item = unitList[i];
|
|
const item = unitList[i];
|
|
const unitLen = item['unitLen'].split(',');
|
|
const unitLen = item['unitLen'].split(',');
|
|
const unitMax = Math.max(...unitLen);
|
|
const unitMax = Math.max(...unitLen);
|
|
const unitMin = Math.min(...unitLen);
|
|
const unitMin = Math.min(...unitLen);
|
|
- sizeList.push((unitMax - unitMin) / max);
|
|
|
|
- }
|
|
|
|
- let leftW = 0;
|
|
|
|
- for (let i = 0; i < sizeList.length; i++) {
|
|
|
|
- const label = setTag3D(`抽采单元${i + 1}`, 'gas_unit_text');
|
|
|
|
|
|
+ const unitPos = (unitMin + (unitMax - unitMin) / 2) / max;
|
|
|
|
+
|
|
|
|
+ // sizeList.push((unitMax - unitMin) / max);
|
|
|
|
+
|
|
|
|
+ const label = setTag3D(`${item['strname']}`, 'gas_unit_text');
|
|
label.scale.set(0.02, 0.02, 0.02); //根据相机渲染范围控制HTML 3D标签尺寸
|
|
label.scale.set(0.02, 0.02, 0.02); //根据相机渲染范围控制HTML 3D标签尺寸
|
|
- label.position.set((leftW + sizeList[i] / 2) * 7.913 - 4.22, 0.015, 0.142);
|
|
|
|
|
|
+ label.position.set(unitPos * 7.913 - 4.22, 0.015, 0.142);
|
|
label.name = 'planeText' + i;
|
|
label.name = 'planeText' + i;
|
|
this.planeGroup.add(label);
|
|
this.planeGroup.add(label);
|
|
|
|
|
|
@@ -365,13 +210,11 @@ class GasAssessmen {
|
|
const gasUnitCSS3D = new CSS3DObject(element);
|
|
const gasUnitCSS3D = new CSS3DObject(element);
|
|
gasUnitCSS3D.name = `unitText${i}`;
|
|
gasUnitCSS3D.name = `unitText${i}`;
|
|
gasUnitCSS3D.scale.set(0.01, 0.01, 0.01);
|
|
gasUnitCSS3D.scale.set(0.01, 0.01, 0.01);
|
|
- gasUnitCSS3D.position.set((leftW + sizeList[i] / 2) * 10.93 - 11.17, 0.015, -3.442);
|
|
|
|
|
|
+ gasUnitCSS3D.position.set(unitPos * 11 - 10.87, 0.015, -3.442);
|
|
gasUnitCSS3D.lookAt(gasUnitCSS3D.position.x, gasUnitCSS3D.position.y + 1.2, gasUnitCSS3D.position.y);
|
|
gasUnitCSS3D.lookAt(gasUnitCSS3D.position.x, gasUnitCSS3D.position.y + 1.2, gasUnitCSS3D.position.y);
|
|
this.planeGroup.add(gasUnitCSS3D);
|
|
this.planeGroup.add(gasUnitCSS3D);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
-
|
|
|
|
- leftW += sizeList[i];
|
|
|
|
}
|
|
}
|
|
};
|
|
};
|
|
// 显示或隐藏抽采单元显示内容
|
|
// 显示或隐藏抽采单元显示内容
|