|
@@ -1,6 +1,6 @@
|
|
|
import * as THREE from 'three';
|
|
|
-import { getTextCanvas, addEnvMap } from '/@/utils/threejs/util';
|
|
|
-
|
|
|
+import { getTextCanvas, addEnvMap, setModalCenter } from '/@/utils/threejs/util';
|
|
|
+import { CSS3DSprite } from 'three/examples/jsm/renderers/CSS3DRenderer.js';
|
|
|
import * as dat from 'dat.gui';
|
|
|
const gui = new dat.GUI();
|
|
|
gui.domElement.style = 'position:absolute;top:100px;left:10px;z-index:99999999999999';
|
|
@@ -16,6 +16,7 @@ class Nitrogen {
|
|
|
playerStartClickTime1 = new Date().getTime();
|
|
|
playerStartClickTime2 = new Date().getTime();
|
|
|
deviceRunState = '';
|
|
|
+ nitrogenNum = 0;
|
|
|
|
|
|
constructor(model) {
|
|
|
this.model = model;
|
|
@@ -65,149 +66,22 @@ class Nitrogen {
|
|
|
|
|
|
// 设置模型位置
|
|
|
setModalPosition() {
|
|
|
- this.group?.scale.set(22, 22, 22);
|
|
|
- this.group?.position.set(-25, 25, 15);
|
|
|
- }
|
|
|
-
|
|
|
- addText(selectData) {
|
|
|
- if (!this.group) {
|
|
|
- return;
|
|
|
+ if (this.nitrogenNum == 4) {
|
|
|
+ this.group.position.set(0, -17, 3);
|
|
|
+ this.group?.scale.set(24.0, 24.0, 24.0);
|
|
|
+ }
|
|
|
+ if (this.nitrogenNum == 3) {
|
|
|
+ this.group.position.set(0, -12, 3);
|
|
|
+ this.group?.scale.set(24.0, 24.0, 24.0);
|
|
|
+ }
|
|
|
+ if (this.nitrogenNum == 2) {
|
|
|
+ this.group.position.set(0, 0.42, 1.21);
|
|
|
+ this.group?.scale.set(24.0, 24.0, 24.0);
|
|
|
+ }
|
|
|
+ if (this.nitrogenNum == 1) {
|
|
|
+ this.group.position.set(0, 8, 3.0);
|
|
|
+ this.group?.scale.set(24.0, 24.0, 24.0);
|
|
|
}
|
|
|
- const textArr = [
|
|
|
- {
|
|
|
- text: `龙门式测风装置`,
|
|
|
- font: 'normal 32px Arial',
|
|
|
- color: '#009900',
|
|
|
- strokeStyle: '#002200',
|
|
|
- x: 170,
|
|
|
- y: 40,
|
|
|
- },
|
|
|
- {
|
|
|
- text: `风量(m3/min):`,
|
|
|
- font: 'normal 29px Arial',
|
|
|
- color: '#009900',
|
|
|
- strokeStyle: '#002200',
|
|
|
- x: 2,
|
|
|
- y: 115,
|
|
|
- },
|
|
|
- {
|
|
|
- text: `${selectData.m3 ? selectData.m3 : '-'}`,
|
|
|
- font: 'normal 29px Arial',
|
|
|
- color: '#009900',
|
|
|
- strokeStyle: '#002200',
|
|
|
- x: 200,
|
|
|
- y: 115,
|
|
|
- },
|
|
|
- {
|
|
|
- text: `气源压力(MPa): `,
|
|
|
- font: 'normal 29px Arial',
|
|
|
- color: '#009900',
|
|
|
- strokeStyle: '#002200',
|
|
|
- x: 2,
|
|
|
- y: 182,
|
|
|
- },
|
|
|
- {
|
|
|
- text: `${selectData.temperature ? selectData.temperature : '-'}`,
|
|
|
- font: 'normal 29px Arial',
|
|
|
- color: '#009900',
|
|
|
- strokeStyle: '#002200',
|
|
|
- x: 215,
|
|
|
- y: 182,
|
|
|
- },
|
|
|
- {
|
|
|
- text: `Va(m/s):`,
|
|
|
- font: 'normal 29px Arial',
|
|
|
- color: '#009900',
|
|
|
- strokeStyle: '#002200',
|
|
|
- x: 2,
|
|
|
- y: 245,
|
|
|
- },
|
|
|
- {
|
|
|
- text: `${selectData.va ? selectData.va : '-'}`,
|
|
|
- font: 'normal 29px Arial',
|
|
|
- color: '#009900',
|
|
|
- strokeStyle: '#002200',
|
|
|
- x: 130,
|
|
|
- y: 246,
|
|
|
- },
|
|
|
- {
|
|
|
- text: `V1(m/s):`,
|
|
|
- font: 'normal 28px Arial',
|
|
|
- color: '#009900',
|
|
|
- strokeStyle: '#002200',
|
|
|
- x: 331,
|
|
|
- y: 115,
|
|
|
- },
|
|
|
- {
|
|
|
- text: `${selectData.incipientWindSpeed1 ? selectData.incipientWindSpeed1 : '-'}`,
|
|
|
- font: 'normal 28px Arial',
|
|
|
- color: '#009900',
|
|
|
- strokeStyle: '#002200',
|
|
|
- x: 455,
|
|
|
- y: 115,
|
|
|
- },
|
|
|
- {
|
|
|
- text: `V2(m/s):`,
|
|
|
- font: 'normal 28px Arial',
|
|
|
- color: '#009900',
|
|
|
- strokeStyle: '#002200',
|
|
|
- x: 330,
|
|
|
- y: 182,
|
|
|
- },
|
|
|
- {
|
|
|
- text: `${selectData.incipientWindSpeed2 ? selectData.incipientWindSpeed2 : '-'}`,
|
|
|
- font: 'normal 28px Arial',
|
|
|
- color: '#009900',
|
|
|
- strokeStyle: '#002200',
|
|
|
- x: 452,
|
|
|
- y: 182,
|
|
|
- },
|
|
|
- {
|
|
|
- text: `V3(m/s):`,
|
|
|
- font: 'normal 28px Arial',
|
|
|
- color: '#009900',
|
|
|
- strokeStyle: '#002200',
|
|
|
- x: 330,
|
|
|
- y: 245,
|
|
|
- },
|
|
|
- {
|
|
|
- text: `${selectData.incipientWindSpeed3 ? selectData.incipientWindSpeed3 : '-'}`,
|
|
|
- font: 'normal 28px Arial',
|
|
|
- color: '#009900',
|
|
|
- strokeStyle: '#002200',
|
|
|
- x: 452,
|
|
|
- y: 245,
|
|
|
- },
|
|
|
- {
|
|
|
- text: `煤炭科学技术研究院有限公司研制`,
|
|
|
- font: 'normal 28px Arial',
|
|
|
- color: '#009900',
|
|
|
- strokeStyle: '#002200',
|
|
|
- x: 60,
|
|
|
- y: 302,
|
|
|
- },
|
|
|
- ];
|
|
|
-
|
|
|
- getTextCanvas(560, 346, textArr, '').then((canvas: HTMLCanvasElement) => {
|
|
|
- const textMap = new THREE.CanvasTexture(canvas); // 关键一步
|
|
|
- const textMaterial = new THREE.MeshBasicMaterial({
|
|
|
- map: textMap, // 设置纹理贴图
|
|
|
- transparent: true,
|
|
|
- side: THREE.DoubleSide, // 这里是双面渲染的意思
|
|
|
- });
|
|
|
- textMaterial.blending = THREE.CustomBlending;
|
|
|
- const monitorPlane = this.group?.getObjectByName('monitorText');
|
|
|
- if (monitorPlane) {
|
|
|
- monitorPlane.material = textMaterial;
|
|
|
- } else {
|
|
|
- const planeGeometry = new THREE.PlaneGeometry(560, 346); // 平面3维几何体PlaneGeometry
|
|
|
- const planeMesh = new THREE.Mesh(planeGeometry, textMaterial);
|
|
|
- planeMesh.name = 'monitorText';
|
|
|
- planeMesh.scale.set(0.0022, 0.0022, 0.0022);
|
|
|
- planeMesh.position.set(3.25, -0.002, -0.41);
|
|
|
- this.group?.add(planeMesh);
|
|
|
- }
|
|
|
- });
|
|
|
}
|
|
|
|
|
|
/* 提取风门序列帧,初始化前后门动画 */
|
|
@@ -254,6 +128,40 @@ class Nitrogen {
|
|
|
model.material = transparentMaterial;
|
|
|
};
|
|
|
|
|
|
+ addCssText = () => {
|
|
|
+ if (this.nitrogenNum > 0) {
|
|
|
+ for (let i = 0; i < this.nitrogenNum; i++) {
|
|
|
+ const nitrogenModal = this.group.getObjectByName('nitrogenModal' + i) as THREE.Object3D;
|
|
|
+ if (!nitrogenModal.getObjectByName('monitorNitrogenText')) {
|
|
|
+ const element = document.getElementById('nitrogenMonitor' + (i + 1)) as HTMLElement;
|
|
|
+ element.style.top = '0px';
|
|
|
+ element.style.left = '0px';
|
|
|
+ const nitrogenMonitorCSS3D = new CSS3DSprite(element);
|
|
|
+ nitrogenMonitorCSS3D.name = 'monitorNitrogenText';
|
|
|
+ nitrogenMonitorCSS3D.scale.set(0.003, 0.003, 0.003);
|
|
|
+ if (i == 0) nitrogenMonitorCSS3D.position.set(-0.89, 0.31, 0);
|
|
|
+ if (i == 1) nitrogenMonitorCSS3D.position.set(-0.89, 0.31, 0.04);
|
|
|
+ if (i == 2) nitrogenMonitorCSS3D.position.set(-0.89, 0.31, 0.08);
|
|
|
+ if (i == 3) nitrogenMonitorCSS3D.position.set(-0.89, 0.31, 0.12);
|
|
|
+ nitrogenModal.add(nitrogenMonitorCSS3D);
|
|
|
+ }
|
|
|
+ if (!nitrogenModal.getObjectByName('cqgMonitorText')) {
|
|
|
+ const element = document.getElementById('cqgMonitor' + (i + 1)) as HTMLElement;
|
|
|
+ element.style.top = '0px';
|
|
|
+ element.style.left = '0px';
|
|
|
+ const cqgMonitorCSS3D = new CSS3DSprite(element);
|
|
|
+ cqgMonitorCSS3D.name = 'cqgMonitorText';
|
|
|
+ cqgMonitorCSS3D.scale.set(0.003, 0.003, 0.003);
|
|
|
+ if (i == 0) cqgMonitorCSS3D.position.set(1.24, 0.49, 0.0);
|
|
|
+ if (i == 1) cqgMonitorCSS3D.position.set(1.24, 0.49, 0.04);
|
|
|
+ if (i == 2) cqgMonitorCSS3D.position.set(1.24, 0.49, 0.08);
|
|
|
+ if (i == 3) cqgMonitorCSS3D.position.set(1.24, 0.49, 0.12);
|
|
|
+ nitrogenModal.add(cqgMonitorCSS3D);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
/**
|
|
|
* 处理杯子的纹理和杯子外层透明壳子
|
|
|
*/
|
|
@@ -292,99 +200,27 @@ class Nitrogen {
|
|
|
withVolume.push(transparentWrap);
|
|
|
};
|
|
|
|
|
|
- mountedThree() {
|
|
|
+ mountedThree(nitrogenNum) {
|
|
|
+ this.nitrogenNum = nitrogenNum;
|
|
|
return new Promise((resolve) => {
|
|
|
+ if (nitrogenNum < 1) {
|
|
|
+ resolve(null);
|
|
|
+ return;
|
|
|
+ }
|
|
|
this.model.setModel([this.modelName]).then(async (gltf) => {
|
|
|
const nitrogenGroup = new THREE.Object3D();
|
|
|
- const nitrogenModal = gltf[0].clone();
|
|
|
- nitrogenModal.name = 'nitrogenModal0';
|
|
|
- nitrogenModal;
|
|
|
-
|
|
|
- const nitrogenModal1 = gltf[0].clone();
|
|
|
- nitrogenModal1.name = 'nitrogenModal1';
|
|
|
- nitrogenModal1.position.set(0, 0, 1.29);
|
|
|
-
|
|
|
- const texture = await addEnvMap('royal_esplanade_1k', this.model);
|
|
|
-
|
|
|
- const material = new THREE.MeshPhysicalMaterial({
|
|
|
- side: THREE.DoubleSide,
|
|
|
- // specularColor: new Color("#ffffff"),
|
|
|
- // color: new Color(0xffa000),
|
|
|
- color: 0xffffff,
|
|
|
- //类似透明度
|
|
|
- // transmission: 0.5,
|
|
|
- opacity: 0,
|
|
|
- metalness: 0,
|
|
|
- roughness: 0.12,
|
|
|
- ior: 1.8,
|
|
|
- thickness: 0.39, //透过看物体的模糊程度
|
|
|
- specularIntensity: 1.1,
|
|
|
- // color: new THREE.Color(0x72531e),
|
|
|
- transmission: 1,
|
|
|
- // envMap: texture,
|
|
|
- });
|
|
|
-
|
|
|
- nitrogenModal.children[0].children[1].material = new THREE.MeshPhysicalMaterial({
|
|
|
- side: THREE.DoubleSide,
|
|
|
- transparent: true,
|
|
|
- opacity: 0.1,
|
|
|
- color: 0xffffff,
|
|
|
- //类似透明度
|
|
|
- // transmission: 0.5,
|
|
|
- metalness: 0,
|
|
|
- roughness: 0.2,
|
|
|
- ior: 1.3,
|
|
|
- thickness: 1.2, //透过看物体的模糊程度
|
|
|
- specularIntensity: 1,
|
|
|
- // color: new THREE.Color(0x72531e),
|
|
|
- transmission: 0,
|
|
|
- });
|
|
|
-
|
|
|
- gui.add(material, 'metalness', 0, 1).onChange(function (value) {
|
|
|
- material.metalness = Number(value);
|
|
|
- });
|
|
|
- gui.add(material, 'roughness', 0, 1).onChange(function (value) {
|
|
|
- material.roughness = Number(value);
|
|
|
- });
|
|
|
- gui.add(material, 'thickness', 0, 2).onChange(function (value) {
|
|
|
- material.thickness = Number(value);
|
|
|
- });
|
|
|
- gui.add(material, 'specularIntensity', 0, 2).onChange(function (value) {
|
|
|
- material.specularIntensity = Number(value);
|
|
|
- });
|
|
|
- gui.add(material, 'transmission', 0, 1).onChange(function (value) {
|
|
|
- material.transmission = Number(value);
|
|
|
- });
|
|
|
- gui.add(material, 'ior', 0, 3).onChange(function (value) {
|
|
|
- material.ior = Number(value);
|
|
|
- });
|
|
|
-
|
|
|
- nitrogenModal.children[0].children[0].material = material;
|
|
|
-
|
|
|
- nitrogenGroup.add(nitrogenModal);
|
|
|
- nitrogenGroup.add(nitrogenModal1);
|
|
|
+ for (let i = 0; i < nitrogenNum; i++) {
|
|
|
+ const nitrogenModal = gltf[0].clone();
|
|
|
+ nitrogenModal.name = 'nitrogenModal' + i;
|
|
|
+ nitrogenModal.position.set(0, 0, -1.29 * i);
|
|
|
+ nitrogenGroup.add(nitrogenModal);
|
|
|
+ }
|
|
|
|
|
|
this.group = nitrogenGroup;
|
|
|
- this.group.name = this.modelName;
|
|
|
-
|
|
|
- // this.handleGlassAndWrap(
|
|
|
- // this.group,
|
|
|
- // withVolume,
|
|
|
- // glass1,
|
|
|
- // roughnessParams,
|
|
|
- // 10,
|
|
|
- // new THREE.Vector3(60, -2.4, -120),
|
|
|
- // new THREE.Vector3(1.5, 1, -3)
|
|
|
- // );
|
|
|
- // this.handleGlassAndWrap(
|
|
|
- // objects,
|
|
|
- // withVolume,
|
|
|
- // glass3,
|
|
|
- // { ...roughnessParams, color: new THREE.Color(0x72531e), transmission: 0.7 },
|
|
|
- // 5,
|
|
|
- // new THREE.Vector3(-42, -2.5, -97)
|
|
|
- // );
|
|
|
|
|
|
+ this.group.name = this.modelName;
|
|
|
+ setModalCenter(this.group);
|
|
|
+ this.addCssText();
|
|
|
this.setModalPosition();
|
|
|
this.addLight();
|
|
|
resolve(null);
|