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

fuliqi

2024-09-18 0da5ee3189dd5eedd5404ee3c1a783442b69645c

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

@@ -3,50 +3,93 @@
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;
    this.scene = this.experience.scene;
    // this.setSunLight();
    this.textureLoader = new THREE.TextureLoader();

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

    // this.debuger();
  }
  setSunLight() {
    this.sunLight = new THREE.DirectionalLight('#ffffff', 4);
    this.sunLight.castShadow = true;
    this.sunLight.shadow.camera.far = 15;
    this.sunLight.shadow.mapSize.set(2048, 2048);
    this.sunLight.shadow.normalBias = 0.05;
    this.sunLight.position.set(-1.3, 7, 10);
    this.scene.add(this.sunLight);
    //   平行光1
    this.directionalLight1 = new THREE.DirectionalLight(0xffffff, 0.9);
    this.directionalLight1.position.set(0, 57, 33);
    //   平行光2
    this.directionalLight2 = new THREE.DirectionalLight(0xffffff, 0.6);
    this.directionalLight2.position.set(-95, 28, -33);
    // 环境光
    this.ambientLight = new THREE.AmbientLight(0xffffff, 0.8);

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

  setBackground() {
    const texture = new THREE.TextureLoader();
    const rotatingApertureTexture = texture.load(rotatingAperture);
    const rotatingPointTexture = texture.load(rotatingPoint);
    const circlePointTexture = texture.load(circlePoint);
    const sceneBgTexture = texture.load(sceneBg);
    let meshConfig1 = {
      width: 100,
      height: 100,
  setRotateHola() {
    const rotatingApertureTexture = this.textureLoader.load(rotatingAperture);
    const rotatingPointTexture = this.textureLoader.load(rotatingPoint);
    const meshConfig1 = {
      width: 48,
      height: 48,
      texture: rotatingApertureTexture,
      positionList: [0, 0.13, 0.3],
      scaleList: [0.048, 0.048, 0.048],
      positionList: [0, 0.4, 0],
      scaleList: [1, 1, 1],
      rotateList: [-Math.PI / 2, 0, 0]
    };
    let meshConfig2 = {
      width: 100,
      height: 100,
    const meshConfig2 = {
      width: 40,
      height: 40,
      texture: rotatingPointTexture,
      positionList: [0, 0.1, 0.3],
      scaleList: [0.04, 0.04, 0.04],
      positionList: [0, 0.3, 0],
      scaleList: [1, 1, 1],
      rotateList: [-Math.PI / 2, 0, 0]
    };
    this.hola1 = this.createMesh(meshConfig1);
    this.hola2 = this.createMesh(meshConfig2);

    this.scene.add(this.hola1);
    this.scene.add(this.hola2);
  }

  setBackground() {
    const sceneBgTexture = this.textureLoader.load(sceneBg);
    const plane = new THREE.PlaneGeometry(120, 120);
    const material = new THREE.MeshPhongMaterial({
      // color: 0x061920,
      color: 0xffffff,
      map: sceneBgTexture,
      transparent: true,
      opacity: 1,
      // depthTest: true
    });
    this.background = new THREE.Mesh(plane, material);
    this.background.rotation.set(-Math.PI / 2, 0, 0);
    this.background.position.set(0, 0.1, 0);
    this.scene.add(this.background);
  }

  setCirclePoint() {
    const circleTexture = this.textureLoader.load(circlePoint);
    const plane = new THREE.PlaneGeometry(45, 45);
    const material = new THREE.MeshPhongMaterial({
      color: 0x00ffff,
      map: circleTexture,
      transparent: true,
      opacity: 1,
      depthTest: false,
    });
    this.circle = new THREE.Mesh(plane, material);
    this.circle.rotation.set(-Math.PI / 2, 0, 0);
    this.circle.position.set(0, 0.2, 0);
    this.scene.add(this.circle);
  }

  createMesh(config) {
@@ -56,7 +99,7 @@
      map: texture,
      transparent: true,
      opacity: 1,
      depthTest: true,
      depthTest: false,
    });
    let mesh = new THREE.Mesh(plane, material);
    mesh.position.set(...positionList);
@@ -73,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("强度");
  }
}