大屏背景+数字动态+返回后台

fuliqi

2024-09-18 0da5ee3189dd5eedd5404ee3c1a783442b69645c

 src/views/screen/components/screen-map-three/experience/world/enviroment.js

@@ -3,6 +3,9 @@
import rotatingPoint from '@/assets/map/texture/rotating-point2.png';
import circlePoint from '@/assets/map/texture/circle-point.png';
import sceneBg from '@/assets/map/texture/scene-bg2.png';

import { GUI } from "three/examples/jsm/libs/lil-gui.module.min.js";

export default class Enviroment {
  constructor(experience) {
    this.experience = experience;
@@ -10,23 +13,25 @@
    this.textureLoader = new THREE.TextureLoader();

    this.setSunLight();
    this.setRotateHola();
    // this.setRotateHola();
    this.setBackground();
    this.setCirclePoint();
    // this.setCirclePoint();

    // this.debuger();
  }
  setSunLight() {
    //   平行光1
    let directionalLight1 = new THREE.DirectionalLight(0xffffff, 0.6);
    directionalLight1.position.set(400, 200, 200);
    this.directionalLight1 = new THREE.DirectionalLight(0xffffff, 0.9);
    this.directionalLight1.position.set(0, 57, 33);
    //   平行光2
    let directionalLight2 = new THREE.DirectionalLight(0xffffff, 0.6);
    directionalLight2.position.set(-400, -200, -300);
    this.directionalLight2 = new THREE.DirectionalLight(0xffffff, 0.6);
    this.directionalLight2.position.set(-95, 28, -33);
    // 环境光
    let ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
    this.ambientLight = new THREE.AmbientLight(0xffffff, 0.8);

    this.scene.add(directionalLight1);
    this.scene.add(directionalLight2);
    this.scene.add(ambientLight);
    this.scene.add(this.directionalLight1);
    this.scene.add(this.directionalLight2);
    this.scene.add(this.ambientLight);
  }

  setRotateHola() {
@@ -111,4 +116,62 @@
      this.hola2.rotation.z -= 0.001;
    }
  }
}

  destroy() {
    this.disposeObject();
    this.removeObject();
    this.resetObject();
  }

  disposeObject() {
    this.hola1.geometry.dispose();
    this.hola1.material.dispose();
    this.hola2.geometry.dispose();
    this.hola2.material.dispose();
    this.background.geometry.dispose();
    this.background.material.dispose();
    this.circle.geometry.dispose();
    this.circle.material.dispose();
    this.directionalLight1.dispose();
    this.directionalLight2.dispose();
    this.ambientLight.dispose();
  }

  removeObject() {
    this.scene.remove(this.hola1);
    this.scene.remove(this.hola2);
    this.scene.remove(this.background);
    this.scene.remove(this.circle);
  }

  resetObject() {
    this.hola1 = null;
    this.hola2 = null;
    this.background = null;
    this.circle = null;
    this.directionalLight1 = null;
    this.directionalLight2 = null;
    this.ambientLight = null;
  }

  debuger() {
    const gui = new GUI();

    const folder1 = gui.addFolder('平行光1');
    const folder2 = gui.addFolder('平行光2');
    const folder3 = gui.addFolder('环境光');

    folder1.add(this.directionalLight1.position, 'x').min(-200).max(200).step(1).name("x轴的位置");
    folder1.add(this.directionalLight1.position, 'y').min(-200).max(200).step(1).name("y轴的位置");
    folder1.add(this.directionalLight1.position, 'z').min(-200).max(200).step(1).name("z轴的位置");
    folder1.add(this.directionalLight1, 'intensity').min(0).max(1).step(0.1).name("强度");

    folder2.add(this.directionalLight2.position, 'x').min(-200).max(200).step(1).name("x轴的位置");
    folder2.add(this.directionalLight2.position, 'y').min(-200).max(200).step(1).name("y轴的位置");
    folder2.add(this.directionalLight2.position, 'z').min(-200).max(200).step(1).name("z轴的位置");
    folder2.add(this.directionalLight2, 'intensity').min(0).max(1).step(0.1).name("强度");


    folder3.add(this.ambientLight, 'intensity').min(0).max(1).step(0.1).name("强度");
  }
}