Merge branch 'dev-threejs'

ZhangXianQiang

2024-04-17 65d3edb21f25900d84d3bb18ff17dbada7c6c8f4

Merge branch 'dev-threejs'

 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;
@@ -13,20 +16,22 @@
    this.setRotateHola();
    this.setBackground();
    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,25 @@
      this.hola2.rotation.z -= 0.001;
    }
  }

  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("强度");
  }
}

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

@@ -29,7 +29,8 @@
        textureMapFx.repeat.set(scale, scale);
        this.topFaceMaterial = new THREE.MeshPhongMaterial({
            map: textureMap,
            color: 0xb4eeea,
            // color: 0xb4eeea,
            color: 0xb3fffa,
            combine: THREE.MultiplyOperation,
            transparent: true,
            opacity: 1,
@@ -80,7 +81,7 @@
            }
            this.map.add(province);
        });
        this.map.position.set(1, 1, -2);
        this.map.position.set(1, 1, -1.5);
        this.map.scale.set(10, 10, 10);
        this.map.rotation.set(THREE.MathUtils.degToRad(-90), 0, THREE.MathUtils.degToRad(20));
        this.container = new THREE.Object3D();