import * as THREE from 'three';
import rotatingAperture from '@/assets/map/texture/rotatingAperture.png';
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';
export default class Enviroment {
  constructor(experience) {
    this.experience = experience;
    this.scene = this.experience.scene;
    this.textureLoader = new THREE.TextureLoader();

    this.setSunLight();
    this.setRotateHola();
    this.setBackground();
    this.setCirclePoint();
  }
  setSunLight() {
    //   平行光1
    let directionalLight1 = new THREE.DirectionalLight(0xffffff, 0.6);
    directionalLight1.position.set(400, 200, 200);
    //   平行光2
    let directionalLight2 = new THREE.DirectionalLight(0xffffff, 0.6);
    directionalLight2.position.set(-400, -200, -300);
    // 环境光
    let ambientLight = new THREE.AmbientLight(0xffffff, 0.5);

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

  setRotateHola() {
    const rotatingApertureTexture = this.textureLoader.load(rotatingAperture);
    const rotatingPointTexture = this.textureLoader.load(rotatingPoint);
    const meshConfig1 = {
      width: 48,
      height: 48,
      texture: rotatingApertureTexture,
      positionList: [0, 0.4, 0.3],
      scaleList: [1, 1, 1],
      rotateList: [-Math.PI / 2, 0, 0]
    };
    const meshConfig2 = {
      width: 40,
      height: 40,
      texture: rotatingPointTexture,
      positionList: [0, 0.3, 0.3],
      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) {
    let { width, height, texture, positionList, rotateList, scaleList } = config;
    let plane = new THREE.PlaneGeometry(width, height);
    let material = new THREE.MeshBasicMaterial({
      map: texture,
      transparent: true,
      opacity: 1,
      depthTest: false,
    });
    let mesh = new THREE.Mesh(plane, material);
    mesh.position.set(...positionList);
    mesh.scale.set(...scaleList);
    mesh.rotation.set(...rotateList);
    return mesh;
  }

  update() {
    if (this.hola1) {
      this.hola1.rotation.z += 0.001;
    }
    if (this.hola2) {
      this.hola2.rotation.z -= 0.001;
    }
  }
}