|
@@ -1,8 +1,7 @@
|
|
|
import * as THREE from 'three';
|
|
|
-import { setModalCenter } from '/@/utils/threejs/util';
|
|
|
+// import { setModalCenter } from '/@/utils/threejs/util';
|
|
|
import Smoke from '../../comment/threejs/Smoke';
|
|
|
import { CSS3DObject } from 'three/examples/jsm/renderers/CSS3DRenderer';
|
|
|
-// import { setModalCenter } from '/@/utils/threejs/util';
|
|
|
// import * as dat from 'dat.gui';
|
|
|
// const gui = new dat.GUI();
|
|
|
// gui.domElement.style = 'position:absolute;top:100px;left:10px;z-index:99999999999999';
|
|
@@ -71,10 +70,11 @@ class ModelContext {
|
|
|
this.model.setGLTFModel([this.modelName]).then(async (gltf) => {
|
|
|
this.group = gltf[0];
|
|
|
if (this.group) {
|
|
|
+ // setModalCenter(this.group);
|
|
|
this.addLight();
|
|
|
- this.setModalPosition();
|
|
|
+ this.setModelPosition();
|
|
|
this.initModules();
|
|
|
- setModalCenter(this.group);
|
|
|
+ this.startAnimation(this.elements);
|
|
|
resolve(null);
|
|
|
}
|
|
|
});
|
|
@@ -89,10 +89,15 @@ class ModelContext {
|
|
|
}
|
|
|
|
|
|
// 设置模型位置
|
|
|
- setModalPosition() {
|
|
|
+ setModelPosition() {
|
|
|
if (!this.group) return;
|
|
|
- this.group.scale.set(0.7, 0.7, 0.7);
|
|
|
- this.group.position.set(0, 6, -50);
|
|
|
+ this.group.scale.set(0.6, 0.6, 0.6);
|
|
|
+
|
|
|
+ // const ff = gui.addFolder(`位置调整`);
|
|
|
+ // ff.add(this.group.position, 'x', -100, 100);
|
|
|
+ // ff.add(this.group.position, 'y', -100, 100);
|
|
|
+ // ff.add(this.group.position, 'z', -100, 100);
|
|
|
+ this.group.position.set(0, 0, -60);
|
|
|
this.group.rotation.y = Math.PI / 2;
|
|
|
}
|
|
|
|
|
@@ -144,38 +149,47 @@ class ModelContext {
|
|
|
}
|
|
|
|
|
|
/** 核心方法,初始化本模型的各个模块,这些模块可以实现特定场景的展示、控制等功能 */
|
|
|
- async initModules() {
|
|
|
+ initModules() {
|
|
|
if (this.elements.length > 0) return;
|
|
|
- const curve1 = [
|
|
|
+ // 右侧风机-主风机进风
|
|
|
+ const curveFan1Right = [
|
|
|
{
|
|
|
- path0: new THREE.Vector3(10, 0, -10),
|
|
|
- path1: new THREE.Vector3(20, 0, -10),
|
|
|
+ path0: new THREE.Vector3(-85.685, 4.208, 43.895),
|
|
|
+ path1: new THREE.Vector3(-85.685, 2.208, 41.895),
|
|
|
+ isSpread: true,
|
|
|
+ spreadDirection: -1, // 1是由小变大,-1是由大变小
|
|
|
+ },
|
|
|
+ {
|
|
|
+ path0: new THREE.Vector3(-85.685, 2.208, 41.895),
|
|
|
+ path1: new THREE.Vector3(-85.685, 2.188, 35.327),
|
|
|
isSpread: false,
|
|
|
- spreadDirection: 0,
|
|
|
+ spreadDirection: 1,
|
|
|
},
|
|
|
{
|
|
|
- path0: new THREE.Vector3(10, 0, -10),
|
|
|
- path1: new THREE.Vector3(10, 0, -20),
|
|
|
- isSpread: true,
|
|
|
- spreadDirection: 1, // 1是由小变大,-1是由大变小
|
|
|
+ path0: new THREE.Vector3(-85.685, 2.188, 35.327),
|
|
|
+ path1: new THREE.Vector3(-85.685, 0.784, 33.086),
|
|
|
+ isSpread: false,
|
|
|
+ spreadDirection: 1,
|
|
|
},
|
|
|
];
|
|
|
const group1 = new THREE.Group();
|
|
|
const smoke1 = new Smoke('/model/img/texture-smoke.png', '#ffffff', 0, 0.75, 0.5, 400);
|
|
|
- smoke1.setPath(curve1);
|
|
|
- await smoke1.setPoints();
|
|
|
+ smoke1.setPath(curveFan1Right);
|
|
|
this.elements.push(smoke1);
|
|
|
|
|
|
- const element = document.getElementById('inputBox') as HTMLElement;
|
|
|
- if (element) {
|
|
|
- const fanLocalCSS3D = new CSS3DObject(element);
|
|
|
- fanLocalCSS3D.name = 'text1';
|
|
|
- fanLocalCSS3D.scale.set(0.04, 0.04, 0.04);
|
|
|
- fanLocalCSS3D.rotation.y = -Math.PI / 2;
|
|
|
- fanLocalCSS3D.position.set(-85.68, 5.97, -3.39);
|
|
|
- group1.add(fanLocalCSS3D);
|
|
|
- this.elements.push(fanLocalCSS3D);
|
|
|
- }
|
|
|
+ smoke1.setPoints().then(() => {
|
|
|
+ this.group?.add(smoke1.points);
|
|
|
+ });
|
|
|
+ // const element = document.getElementById('inputBox') as HTMLElement;
|
|
|
+ // if (element) {
|
|
|
+ // const fanLocalCSS3D = new CSS3DObject(element);
|
|
|
+ // fanLocalCSS3D.name = 'text1';
|
|
|
+ // fanLocalCSS3D.scale.set(0.04, 0.04, 0.04);
|
|
|
+ // fanLocalCSS3D.rotation.y = -Math.PI / 2;
|
|
|
+ // fanLocalCSS3D.position.set(-85.68, 5.97, -3.39);
|
|
|
+ // group1.add(fanLocalCSS3D);
|
|
|
+ // this.elements.push(fanLocalCSS3D);
|
|
|
+ // }
|
|
|
|
|
|
this.modules.push({
|
|
|
name: 'state1',
|