<template>
  <div class="webglContainer" style="overflow: hidden">
    <div class="loading" v-show="!hasload">
      <img src="models/tnd/bg.jpg" alt="" />
      <div class="progress">
        <div class="bar" :style="'width:' + barWidth + '%'"></div>
      </div>
    </div>
    <img class="bg" :src="'models/tnd/bg' + index + '.jpg'" alt="" />
    <img class="title1" src="models/tnd/atxt2.png" alt="" />
    <img v-show="index == 1" class="title2 title2_1" src="models/tnd/txt1.png" alt="" />
    <img v-show="index == 2" class="title2 title2_2" src="models/tnd/txt2.png" alt="" />
    <img v-show="index == 3" class="title2 title2_3" src="models/tnd/txt3.png" alt="" />
    <img v-show="index == 4" class="title2 title2_4" src="models/tnd/txt4.png" alt="" />
    <img class="title3" :src="'models/tnd/icon' + index + '.png'" alt="" />
    <div id="webgl" ref="webgl"></div>
    <div v-show="index == 2 && videoPlay" class="videoBox">
      <div class="wrap">
        <video ref="myVideo" src="models/tnd/c1ypr-q4fm7.mp4" loop></video>
      </div>
    </div>
    <img class="videoBtn" v-show="index == 2" @click="playVideo" src="models/tnd/btn5.png" alt="" srcset="" />
    <div class="btns">
      <div :class="{ btn: true, btn1: true, active: index == 1 && showPage }" @click="change(1)">
        <img src="models/tnd/btn1.png" alt="" srcset="" />
      </div>
      <div :class="{ btn: true, btn2: true, active: index == 2 }" @click="change(2)">
        <img src="models/tnd/btn2.png" alt="" srcset="" />
      </div>
      <div :class="{ btn: true, btn3: true, active: index == 3 }" @click="change(3)">
        <img src="models/tnd/btn3.png" alt="" srcset="" />
      </div>
      <div :class="{ btn: true, btn4: true, active: index == 4 }" @click="change(4)">
        <img src="models/tnd/btn4.png" alt="" srcset="" />
      </div>
    </div>
  </div>
</template>

<script>
import "../config/rem";
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader_z";
import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader";
import zcfCommon from "../../public/com/zcf_common";
import { TWEEN } from "three/examples/jsm/libs/tween.module.min";
import { MyParticleEngine, MyTween } from "../../public/com/ParticleEngineModify1";
import https from "../https.js";
let vm;
export default {
  data: () => {
    return {
      modelID: "",
      modelInfos: "models/tnd/",
      index: 1,
      canAni: false,
      step: 0.01,
      smokeInfo: {},
      candleInfo: {},
      canParticle: false,
      hasload: false,
      barWidth: 0,
      modelLoaded: false,
      showPage: false,
      stepLight: 0.1,
      videoPlay: false,
    };
  },
  created() {
    vm = this;
  },
  mounted() {
    this.clock = new THREE.Clock();
    this.rafId = null;
    this.container = null;
    this.scene = null;
    this.camera = null;
    this.mesh = null;
    this.cylinder = null;
    this.cylinder1 = null;
    this.cylinder2 = null;
    this.plane = null;
    this.biaozhu = null;
    this.renderer = null;
    this.controls = null;
    this.containerW = 0;
    this.containerH = 0;
    this.ambientLight = null;
    this.directionalLight = null;
    this.directionalLight01 = null;
    this.pointLight = null;
    this.selectionBox = null;
    this.transformControls = null;
    this.mouse = new THREE.Vector2();
    this.raycaster = new THREE.Raycaster();
    this.onDownPosition = new THREE.Vector2();
    this.onUpPosition = new THREE.Vector2();
    this.lightGroup = new THREE.Group();
    this.lightHelpGroup = new THREE.Group();
    this.pmremGenerator = null;
    this.candle = null;
    this.smoke = null;
    this.engines = [];
    this.engine1 = null;
    this.engine2 = null;
    this.init();
  },
  methods: {
    playVideo() {
      if (!this.videoPlay) {
        this.videoPlay = true;
        this.$nextTick(() => {
          this.$refs.myVideo.play();
        });
      } else {
        this.videoPlay = false;
        this.$refs.myVideo.pause();
        this.$refs.myVideo.currentTime = 0;
      }
    },
    change(num) {
      if (this.index == 1 && this.index == num) {
        if (this.showPage) {
          this.showPage = false;
          this.controls.enabled = false;
          this.plane.visible = true;
          var v = new THREE.Vector3().copy(this.camera.position);
          this.tweenCamera(v, new THREE.Vector3(0, 0, 0), new THREE.Vector3(0, 0, 300), new THREE.Vector3(0, 0, 0), () => {
            this.controls.maxPolarAngle = Math.PI;
            this.controls.minPolarAngle = 0;
            this.cylinder.visible = false;
            this.cylinder1.visible = false;
            this.cylinder2.visible = false;
            this.controls.enableZoom = true;
            this.controls.minDistance = 100;
            this.controls.maxDistance = 500;
            this.controls.rotateSpeed = 1;
          });
          new TWEEN.Tween(this.mesh.scale)
            .to(
              {
                x: 100,
                y: 100,
                z: 100,
              },
              500
            )
            .onUpdate(() => {})
            .easing(TWEEN.Easing.Exponential.InOut)
            .onComplete(() => {})
            .start();
        } else {
          this.showPage = true;
          this.controls.enabled = false;
          this.plane.visible = false;
          var v = new THREE.Vector3().copy(this.camera.position);
          this.tweenCamera(v, new THREE.Vector3(0, 0, 0), new THREE.Vector3(0, 0, 300), new THREE.Vector3(0, 0, 0), () => {
            this.controls.maxPolarAngle = Math.PI / 2;
            this.controls.minPolarAngle = Math.PI / 2;
            this.cylinder.visible = true;
            this.cylinder1.visible = true;
            this.cylinder2.visible = true;
            this.controls.enableZoom = true;
            this.controls.minDistance = 220;
            this.controls.maxDistance = 300;
            this.controls.rotateSpeed = 0.5;
          });
          new TWEEN.Tween(this.mesh.scale)
            .to(
              {
                x: 30,
                y: 30,
                z: 30,
              },
              500
            )
            .onUpdate(() => {})
            .easing(TWEEN.Easing.Exponential.InOut)
            .onComplete(() => {})
            .start();
        }
      }
      if (this.index != num) {
        if (this.index == 1 && this.showPage) {
          this.plane.visible = true;
          this.controls.minDistance = 100;
          this.controls.maxDistance = 500;
          this.controls.rotateSpeed = 1;
          new TWEEN.Tween(this.mesh.scale)
            .to(
              {
                x: 100,
                y: 100,
                z: 100,
              },
              500
            )
            .onUpdate(() => {})
            .easing(TWEEN.Easing.Exponential.InOut)
            .onComplete(() => {})
            .start();
        }
        if (this.index == 2) {
          this.ambientLight.intensity = 1;
          this.directionalLight.intensity = 1;
          this.directionalLight01.intensity = 0;
          this.pointLight.intensity = 0;
          this.scene.fog.density = 0.0005;
          this.engine1.destroy(this.scene);
          this.engine1 = null;
          this.engine2.destroy(this.scene);
          this.engine2 = null;
          this.videoPlay = false;
          this.$refs.myVideo.pause();
          this.$refs.myVideo.currentTime = 0;
          this.mesh.getObjectByName("lazhu").visible = false;
          this.mesh.getObjectByName("Cylinder001").visible = false;
        }
        if (this.index == 4) {
          new TWEEN.Tween(this.mesh.getObjectByName("04dengzuo").position)
            .to({ x: 0, y: 0, z: 0 }, 500)
            .onUpdate(() => {})
            .easing(TWEEN.Easing.Exponential.InOut)
            .onComplete(() => {})
            .start();
          new TWEEN.Tween(this.mesh.getObjectByName("default001b").rotation)
            .to(
              {
                x: this.mesh.getObjectByName("default001b").rotation.x,
                y: 0,
                z: 0,
              },
              500
            )
            .onUpdate(() => {})
            .easing(TWEEN.Easing.Exponential.InOut)
            .onComplete(() => {})
            .start();
          new TWEEN.Tween(this.mesh.getObjectByName("default").rotation)
            .to(
              {
                x: this.mesh.getObjectByName("default").rotation.x,
                y: 0,
                z: 0,
              },
              500
            )
            .onUpdate(() => {})
            .easing(TWEEN.Easing.Exponential.InOut)
            .onComplete(() => {})
            .start();
          new TWEEN.Tween(this.mesh.getObjectByName("03dengpan").rotation)
            .to(
              {
                x: this.mesh.getObjectByName("03dengpan").rotation.x,
                y: 0,
                z: 0,
              },
              500
            )
            .onUpdate(() => {})
            .easing(TWEEN.Easing.Exponential.InOut)
            .onComplete(() => {
              this.plane.visible = true;
            })
            .start();
          new TWEEN.Tween(this.mesh.getObjectByName("03dengpan").position)
            .to({ x: 0, y: 0, z: 0 }, 500)
            .onUpdate(() => {})
            .easing(TWEEN.Easing.Exponential.InOut)
            .onComplete(() => {})
            .start();
          new TWEEN.Tween(this.mesh.getObjectByName("lazhu").position)
            .to({ x: 0, y: 0, z: 0 }, 500)
            .onUpdate(() => {})
            .easing(TWEEN.Easing.Exponential.InOut)
            .onComplete(() => {})
            .start();
          new TWEEN.Tween(this.mesh.getObjectByName("Cylinder001").position)
            .to({ x: 0, y: 0, z: 0 }, 500)
            .onUpdate(() => {})
            .easing(TWEEN.Easing.Exponential.InOut)
            .onComplete(() => {})
            .start();
          new TWEEN.Tween(this.mesh.getObjectByName("ProOptimizer").position)
            .to({ x: 0, y: 0, z: 0 }, 500)
            .onUpdate(() => {})
            .easing(TWEEN.Easing.Exponential.InOut)
            .onComplete(() => {})
            .start();
        }
        this.index = num;
        this.mesh.getObjectByName("04dengzuo").material.emissiveIntensity = 0;
        this.mesh.getObjectByName("03dengpan").material.emissiveIntensity = 0;
        this.mesh.getObjectByName("ProOptimizer").material.emissiveIntensity = 0;
        this.canAni = false;
        this.biaozhu.visible = false;
        switch (num) {
          case 1:
            this.controls.enabled = false;
            this.showPage = false;
            var v = new THREE.Vector3().copy(this.camera.position);
            this.tweenCamera(v, new THREE.Vector3(0, 0, 0), new THREE.Vector3(0, 0, 300), new THREE.Vector3(0, 0, 0), () => {
              this.controls.maxPolarAngle = Math.PI;
              this.controls.minPolarAngle = 0;
              this.cylinder.visible = false;
              this.cylinder1.visible = false;
              this.cylinder2.visible = false;
              this.controls.enableZoom = true;
            });
            break;
          case 2:
            this.controls.enabled = false;
            this.ambientLight.intensity = 0.8;
            this.directionalLight.intensity = 0.5;
            this.directionalLight01.intensity = 0;
            this.pointLight.intensity = 1;
            this.scene.fog.density = 0.001;
            this.cylinder.visible = false;
            this.cylinder1.visible = false;
            this.controls.maxPolarAngle = Math.PI;
            this.controls.minPolarAngle = 0;
            this.controls.enableZoom = true;
            // this.mesh.getObjectByName('lazhu').visible = true
            // this.mesh.getObjectByName('Cylinder001').visible = true
            var v = new THREE.Vector3().copy(this.camera.position);
            this.tweenCamera(v, new THREE.Vector3(0, 0, 0), new THREE.Vector3(0, 0, 300), new THREE.Vector3(0, 0, 0), () => {
              this.engine1 = new MyParticleEngine();
              this.engine1.setValues(this.smokeInfo);
              this.engine1.initialize(this.scene);
              this.engine2 = new MyParticleEngine();
              this.engine2.setValues(this.candleInfo);
              this.engine2.initialize(this.scene);
              this.canParticle = true;
            });
            break;
          case 3:
            this.controls.enabled = false;
            var v = new THREE.Vector3().copy(this.camera.position);
            this.tweenCamera(v, new THREE.Vector3(0, 0, 0), new THREE.Vector3(0, 0, 300), new THREE.Vector3(0, 0, 0), () => {
              this.cylinder.visible = false;
              this.cylinder1.visible = false;
              this.controls.maxPolarAngle = Math.PI;
              this.controls.minPolarAngle = 0;
              this.controls.enableZoom = true;
              this.canAni = true;
            });
            break;
          case 4:
            this.controls.enabled = false;
            var v = new THREE.Vector3().copy(this.camera.position);
            this.tweenCamera(v, new THREE.Vector3(0, 0, 0), new THREE.Vector3(0, 0, 300), new THREE.Vector3(0, 0, 0), () => {
              new TWEEN.Tween(this.mesh.getObjectByName("04dengzuo").position)
                .to({ x: 0, y: -0.1, z: 0 }, 500)
                .onUpdate(() => {})
                .easing(TWEEN.Easing.Exponential.InOut)
                .onComplete(() => {})
                .start();
              //default001b
              new TWEEN.Tween(this.mesh.getObjectByName("default001b").rotation)
                .to(
                  {
                    x: this.mesh.getObjectByName("default001b").rotation.x,
                    y: -Math.PI / 7,
                    z: 0,
                  },
                  500
                )
                .onUpdate(() => {})
                .easing(TWEEN.Easing.Exponential.InOut)
                .onComplete(() => {})
                .start();
              new TWEEN.Tween(this.mesh.getObjectByName("default").rotation)
                .to(
                  {
                    x: this.mesh.getObjectByName("default").rotation.x,
                    y: -Math.PI / 7,
                    z: 0,
                  },
                  500
                )
                .onUpdate(() => {})
                .easing(TWEEN.Easing.Exponential.InOut)
                .onComplete(() => {})
                .start();
              new TWEEN.Tween(this.mesh.getObjectByName("03dengpan").rotation)
                .to(
                  {
                    x: this.mesh.getObjectByName("03dengpan").rotation.x,
                    y: -Math.PI / 3,
                    z: 0,
                  },
                  500
                )
                .onUpdate(() => {})
                .easing(TWEEN.Easing.Exponential.InOut)
                .onComplete(() => {})
                .start();
              new TWEEN.Tween(this.mesh.getObjectByName("03dengpan").position)
                .to({ x: 0, y: -0.05, z: 0 }, 500)
                .onUpdate(() => {})
                .easing(TWEEN.Easing.Exponential.InOut)
                .onComplete(() => {})
                .start();
              new TWEEN.Tween(this.mesh.getObjectByName("lazhu").position)
                .to({ x: 0, y: -0.05, z: 0 }, 500)
                .onUpdate(() => {})
                .easing(TWEEN.Easing.Exponential.InOut)
                .onComplete(() => {})
                .start();
              new TWEEN.Tween(this.mesh.getObjectByName("Cylinder001").position)
                .to({ x: 0, y: -0.05, z: 0 }, 500)
                .onUpdate(() => {})
                .easing(TWEEN.Easing.Exponential.InOut)
                .onComplete(() => {})
                .start();
              new TWEEN.Tween(this.mesh.getObjectByName("ProOptimizer").position)
                .to({ x: 0, y: 0.05, z: 0 }, 500)
                .onUpdate(() => {})
                .easing(TWEEN.Easing.Exponential.InOut)
                .onComplete(() => {
                  this.biaozhu.visible = true;
                })
                .start();
              this.plane.visible = false;
              this.cylinder.visible = false;
              this.cylinder1.visible = false;
              this.controls.maxPolarAngle = Math.PI;
              this.controls.minPolarAngle = 0;
              this.controls.enableZoom = true;
            });
            break;
          default:
            break;
        }
      }
    },
    tweenCamera(oldP, oldT, newP, newT, callBack) {
      var tween = new TWEEN.Tween({
        x1: oldP.x, // 相机x
        y1: oldP.y, // 相机y
        z1: oldP.z, // 相机z
        x2: oldT.x, // 控制点的中心点x
        y2: oldT.y, // 控制点的中心点y
        z2: oldT.z, // 控制点的中心点z
      });
      tween.to(
        {
          x1: newP.x,
          y1: newP.y,
          z1: newP.z,
          x2: newT.x,
          y2: newT.y,
          z2: newT.z,
        },
        500
      );
      tween.onUpdate((object) => {
        this.camera.position.x = object.x1;
        this.camera.position.y = object.y1;
        this.camera.position.z = object.z1;
        this.controls.target.x = object.x2;
        this.controls.target.y = object.y2;
        this.controls.target.z = object.z2;
        this.controls.update();
      });
      tween.onComplete(() => {
        this.controls.enabled = true;
        callBack && callBack();
      });
      tween.easing(TWEEN.Easing.Exponential.InOut);
      tween.start();
    },
    // 场景初始
    init() {
      this.container = this.$refs.webgl;
      this.containerW = this.$refs.webgl.getBoundingClientRect().width;
      this.containerH = this.$refs.webgl.getBoundingClientRect().height;
      this.scene = new THREE.Scene();
      this.scene.fog = new THREE.FogExp2(0x000000, 0.0005);
      this.scene.add(this.lightGroup);
      let modelLoader;
      this.camera = new THREE.PerspectiveCamera(25, this.containerW / this.containerH, 1, 9999);
      this.camera.position.set(0, 0, 300);
      this.camera.name = "camera";
      this.scene.add(this.camera);

      this.ambientLight = new THREE.AmbientLight(0x444444, 1);
      this.scene.add(this.ambientLight);

      this.directionalLight = new THREE.DirectionalLight(0xffffff, 1);
      this.directionalLight.position.set(100, 100, 100);
      this.scene.add(this.directionalLight);

      this.directionalLight01 = new THREE.DirectionalLight(0xffffff, 0);
      this.directionalLight01.position.set(-100, 0, -100);
      this.scene.add(this.directionalLight01);

      this.pointLight = new THREE.PointLight(0xffffff, 0, 10);
      this.pointLight.position.set(0.5, 7, 0);
      this.scene.add(this.pointLight);
      // var ph = new THREE.PointLightHelper(this.pointLight,1,0xff0000)
      // this.scene.add(ph);

      this.renderer = new THREE.WebGLRenderer({
        antialias: true,
        alpha: true,
      });
      this.renderer.outputEncoding = THREE.LinearEncoding;
      this.renderer.setPixelRatio(window.devicePixelRatio);
      this.renderer.setSize(this.containerW, this.containerH);
      // this.renderer.toneMapping = THREE.Uncharted2ToneMapping
      // this.renderer.toneMappingExposure = 1.5

      this.container.appendChild(this.renderer.domElement);

      //controls
      this.controls = new OrbitControls(this.camera, this.renderer.domElement);
      this.controls.enableDamping = true;
      this.controls.dampingFactor = 0.1;
      this.controls.maxPolarAngle = Math.PI;
      this.controls.minPolarAngle = 0;
      this.controls.enablePan = false;
      this.controls.minDistance = 100;
      this.controls.maxDistance = 500;
      this.controls.enableZoom = true;
      console.log(this.controls);
      // this.controls.update()

      let textrueLoader = new THREE.TextureLoader();
      let envMap;
      let exrBackground;
      this.pmremGenerator = new THREE.PMREMGenerator(this.renderer);
      this.pmremGenerator.compileEquirectangularShader();
      textrueLoader.load("env/EnvMap01.jpg", (texture) => {
        texture.encoding = THREE.LinearEncoding;

        let pngCubeRenderTarget = this.pmremGenerator.fromEquirectangular(texture);

        envMap = pngCubeRenderTarget.texture;

        texture.dispose();
      });

      const geometry = new THREE.CylinderGeometry(60, 60, 47, 64, 1, true, 0, Math.PI);
      var map = textrueLoader.load(vm.modelInfos + "/tu-s.png");
      map.magFilter = THREE.LinearFilter;
      map.minFilter = THREE.LinearFilter;
      map.encoding = THREE.LinearEncoding;
      const material = new THREE.MeshBasicMaterial({
        color: 0xffffff,
        map: map,
        transparent: true,
        depthTest: true,
        depthWrite: false,
      });
      this.cylinder = new THREE.Mesh(geometry, material);
      this.cylinder.scale.set(1.5, 1.5, 1.5);
      this.cylinder.rotation.y = -Math.PI / 17;
      this.cylinder.visible = false;
      this.scene.add(this.cylinder);

      const geometry2 = new THREE.CylinderGeometry(60, 60, 47, 64, 1, true, 0, Math.PI);
      var map2 = textrueLoader.load(vm.modelInfos + "/tu-x.png");
      map2.magFilter = THREE.LinearFilter;
      map2.minFilter = THREE.LinearFilter;
      map2.encoding = THREE.LinearEncoding;
      const material2 = new THREE.MeshBasicMaterial({
        color: 0xffffff,
        map: map2,
        transparent: true,
        depthTest: true,
        depthWrite: false,
      });
      this.cylinder1 = new THREE.Mesh(geometry2, material2);
      this.cylinder1.scale.set(1.5, 1.5, 1.5);
      this.cylinder1.rotation.y = Math.PI - Math.PI / 17;
      this.cylinder1.visible = false;
      this.scene.add(this.cylinder1);

      var geometry0 = new THREE.CylinderGeometry(55, 55, 47, 64, 1, true, 0, 2 * Math.PI);
      var material0 = new THREE.MeshBasicMaterial({
        color: 0x000000,
        transparent: true,
        opacity: 0,
        depthTest: true,
        depthWrite: false,
      });
      this.cylinder2 = new THREE.Mesh(geometry0, material0);
      this.cylinder2.scale.set(1.5, 1.5, 1.5);
      this.cylinder2.visible = false;
      this.scene.add(this.cylinder2);

      var geometry1 = new THREE.PlaneBufferGeometry(828, 495);
      var map1 = textrueLoader.load(vm.modelInfos + "/shadow.png");
      map1.magFilter = THREE.LinearFilter;
      map1.minFilter = THREE.LinearFilter;
      map1.encoding = THREE.LinearEncoding;
      var material1 = new THREE.MeshBasicMaterial({
        color: 0xffffff,
        map: map1,
        transparent: true,
      });
      this.plane = new THREE.Mesh(geometry1, material1);
      this.plane.rotation.x = -Math.PI / 2;
      this.plane.rotation.z = Math.PI;
      this.plane.position.y = -25;
      this.plane.scale.set(0.06, 0.06, 0.06);
      this.scene.add(this.plane);

      var geometry3 = new THREE.PlaneBufferGeometry(2044, 1622);
      var map3 = textrueLoader.load(vm.modelInfos + "/biaozhu.png");
      map3.magFilter = THREE.LinearFilter;
      map3.minFilter = THREE.LinearFilter;
      map3.encoding = THREE.LinearEncoding;
      var material3 = new THREE.MeshBasicMaterial({
        color: 0xffffff,
        map: map3,
        transparent: true,
        side: THREE.DoubleSide,
      });
      this.biaozhu = new THREE.Mesh(geometry3, material3);
      this.biaozhu.scale.set(0.035, 0.035, 0.035);
      this.biaozhu.visible = false;
      this.scene.add(this.biaozhu);

      // new EXRLoader()
      //   .setDataType( THREE.UnsignedByteType )
      //   .load( 'env/uncompressed.exr', function ( texture ) {

      //     var exrCubeRenderTarget = this.pmremGenerator.fromEquirectangular( texture );
      //     exrBackground = exrCubeRenderTarget.texture;

      //     texture.dispose();

      //   } );
      this.candleInfo = {
        positionStyle: 2,
        positionBase: new THREE.Vector3(0.5, 1, 0),
        positionRadius: 0.4,

        velocityStyle: 1,
        velocityBase: new THREE.Vector3(0, 5, 0),
        velocitySpread: new THREE.Vector3(0.5, 0, 0.5),

        particleTexture: new THREE.TextureLoader().load("./images/smokeparticle.png"),

        sizeTween: new MyTween([0, 0.3, 1.2], [1, 30, 1]),
        opacityTween: new MyTween([0.9, 1.5], [1, 0]),
        colorTween: new MyTween([0.5, 1.0], [new THREE.Vector3(0.02, 1, 0.5), new THREE.Vector3(0.05, 1, 0)]),
        blendStyle: THREE.AdditiveBlending,

        particlesPerSecond: 120,
        particleDeathAge: 1.5,
        emitterDeathAge: 60,
      };

      this.smokeInfo = {
        positionStyle: 1,
        positionBase: new THREE.Vector3(0.5, 6, 0),
        positionSpread: new THREE.Vector3(1, 0, 1),

        velocityStyle: 1,
        velocityBase: new THREE.Vector3(0, 15, 0),
        velocitySpread: new THREE.Vector3(1, 5, 1),
        accelerationBase: new THREE.Vector3(0, -10, 0),

        particleTexture: new THREE.TextureLoader().load("./images/smokeparticle.png"),

        angleBase: 0,
        angleSpread: 720,
        angleVelocityBase: 0,
        angleVelocitySpread: 720,

        sizeTween: new MyTween([0, 1], [10, 20]),
        opacityTween: new MyTween([0.8, 2], [0.3, 0]),
        colorTween: new MyTween([0.4, 1], [new THREE.Vector3(0, 0, 0.7), new THREE.Vector3(0, 0, 0.9)]),

        particlesPerSecond: 60,
        particleDeathAge: 2.0,
        emitterDeathAge: 60,
      };

      this.engine1 = new MyParticleEngine();
      this.engine1.setValues(this.smokeInfo);
      this.smoke = this.engine1.initialize(this.scene);
      // this.smoke.material.depthWrite = false
      // this.smoke.material.depthTest = true
      // this.scene.add( this.smoke );

      this.engine2 = new MyParticleEngine();
      this.engine2.setValues(this.candleInfo);
      this.candle = this.engine2.initialize(this.scene);
      // this.candle.material.depthWrite = false;
      // this.candle.material.depthTest = true;
      // this.scene.add(this.candle);

      modelLoader = new GLTFLoader();
      var dracoLoader = new DRACOLoader();
      dracoLoader.setDecoderPath("com/draco/gltf/");
      modelLoader.setDRACOLoader(dracoLoader);
      modelLoader.setPath(this.modelInfos);
      modelLoader.load("model.gltf", (gltf) => {
        this.mesh = gltf.scene;
        this.scene.add(this.mesh);
        console.log(this.mesh);
        var addStr = "2048";
        var addOtherStr = "1024";
        this.mesh.traverse(function (child) {
          if (child.isMesh) {
            if (child.name == "lazhu") {
              var mat = new THREE.MeshStandardMaterial();
              mat.roughness = 1;
              mat.metalness = 1;
              mat.color = new THREE.Color(0x6e6225);
              mat.envMap = envMap;
              mat.envMapIntensity = 2.0;
              mat.needsUpdate = true;
              child.material.dispose();
              child.material = mat;
              child.visible = false;
            } else if (child.name == "Cylinder001") {
              var mat = new THREE.MeshStandardMaterial();
              mat.roughness = 1;
              mat.metalness = 1;
              mat.color = new THREE.Color(0x6e6225);
              // var mapTexture = textrueLoader.load(
              //   vm.modelInfos + "/you_mat_Base_Color.jpg"
              // );
              // var normalTexture = textrueLoader.load(
              //   vm.modelInfos + "/you_mat_Normal_OpenGL.jpg"
              // );
              // mapTexture.magFilter = THREE.LinearFilter;
              // mapTexture.minFilter = THREE.LinearFilter;
              // mapTexture.encoding = THREE.LinearEncoding;
              // mapTexture.flipY = false;
              // mat.map = mapTexture;
              // normalTexture.encoding = THREE.LinearEncoding;
              // normalTexture.flipY = false;
              // mat.normalMap = normalTexture;
              mat.envMap = envMap;
              mat.envMapIntensity = 2.0;
              mat.needsUpdate = true;
              child.material.dispose();
              child.material = mat;
              child.visible = false;
            } else {
              var mat = new THREE.MeshStandardMaterial();

              mat.roughness = 1;
              mat.metalness = 1;

              mat.envMap = envMap;
              mat.envMapIntensity = 2.0;
              switch (child.name) {
                case "04dengzuo":
                  var mapTexture = textrueLoader.load(vm.modelInfos + child.name + "/d" + addStr + ".jpg");
                  var normalTexture = textrueLoader.load(vm.modelInfos + child.name + "/n" + addOtherStr + ".jpg");
                  var metalnessTexture = textrueLoader.load(vm.modelInfos + child.name + "/m" + addOtherStr + ".jpg");
                  var roughnessTexture = textrueLoader.load(vm.modelInfos + child.name + "/r" + addOtherStr + ".jpg");
                  var emissiveTexture = textrueLoader.load("models/tnd/04_huawen" + addOtherStr + ".jpg");
                  break;
                case "03dengpan":
                  var mapTexture = textrueLoader.load(vm.modelInfos + child.name + "/d" + addStr + ".jpg");
                  var normalTexture = textrueLoader.load(vm.modelInfos + child.name + "/n" + addOtherStr + ".jpg");
                  var metalnessTexture = textrueLoader.load(vm.modelInfos + child.name + "/m" + addOtherStr + ".jpg");
                  var roughnessTexture = textrueLoader.load(vm.modelInfos + child.name + "/r" + addOtherStr + ".jpg");
                  var emissiveTexture = textrueLoader.load("models/tnd/03-huawen-2_resize" + addOtherStr + ".jpg");
                  break;
                case "02dengzhao-02b":
                  var mapTexture = textrueLoader.load(vm.modelInfos + "02dengzhao/02b/d" + addStr + ".jpg");
                  var normalTexture = textrueLoader.load(vm.modelInfos + "02dengzhao/02b/n" + addOtherStr + ".jpg");
                  var metalnessTexture = textrueLoader.load(vm.modelInfos + "02dengzhao/02b/m" + addOtherStr + ".jpg");
                  var roughnessTexture = textrueLoader.load(vm.modelInfos + "02dengzhao/02b/r" + addOtherStr + ".jpg");
                  break;
                case "default":
                  var mapTexture = textrueLoader.load(vm.modelInfos + "02dengzhao/02a/d" + addStr + ".jpg");
                  var normalTexture = textrueLoader.load(vm.modelInfos + "02dengzhao/02a/n" + addOtherStr + ".jpg");
                  var metalnessTexture = textrueLoader.load(vm.modelInfos + "02dengzhao/02a/m" + addOtherStr + ".jpg");
                  var roughnessTexture = textrueLoader.load(vm.modelInfos + "02dengzhao/02a/r" + addOtherStr + ".jpg");
                  break;
                case "default001b":
                  var mapTexture = textrueLoader.load(vm.modelInfos + "02dengzhao/02a/02A-B/d" + addStr + ".jpg");
                  var normalTexture = textrueLoader.load(vm.modelInfos + "02dengzhao/02a/02A-B/n" + addOtherStr + ".jpg");
                  var metalnessTexture = textrueLoader.load(vm.modelInfos + "02dengzhao/02a/02A-B/m" + addOtherStr + ".jpg");
                  var roughnessTexture = textrueLoader.load(vm.modelInfos + "02dengzhao/02a/02A-B/r" + addOtherStr + ".jpg");
                  break;
                case "ProOptimizer":
                  var mapTexture = textrueLoader.load(vm.modelInfos + "01denggai/d" + addStr + ".jpg");
                  var normalTexture = textrueLoader.load(vm.modelInfos + "01denggai/n" + addOtherStr + ".jpg");
                  var metalnessTexture = textrueLoader.load(vm.modelInfos + "01denggai/m" + addOtherStr + ".jpg");
                  var roughnessTexture = textrueLoader.load(vm.modelInfos + "01denggai/r" + addOtherStr + ".jpg");
                  var emissiveTexture = textrueLoader.load("models/tnd/01huawen_resize" + addOtherStr + ".jpg");
                  break;
                default:
                  var mapTexture = textrueLoader.load(vm.modelInfos + "01denggai/d" + addStr + ".jpg");
                  var normalTexture = textrueLoader.load(vm.modelInfos + "01denggai/n" + addOtherStr + ".jpg");
                  var metalnessTexture = textrueLoader.load(vm.modelInfos + "01denggai/m" + addOtherStr + ".jpg");
                  var roughnessTexture = textrueLoader.load(vm.modelInfos + "01denggai/r" + addOtherStr + ".jpg");
                  break;
              }

              mapTexture.magFilter = THREE.LinearFilter;
              mapTexture.minFilter = THREE.LinearFilter;
              mapTexture.encoding = THREE.LinearEncoding;
              mapTexture.flipY = false;
              mat.map = mapTexture;
              normalTexture.encoding = THREE.LinearEncoding;
              normalTexture.flipY = false;
              mat.normalMap = normalTexture;
              // mat.normalScale = new THREE.Vector2(5,5)
              metalnessTexture.encoding = THREE.LinearEncoding;
              metalnessTexture.flipY = false;
              mat.metalnessMap = metalnessTexture;
              roughnessTexture.encoding = THREE.LinearEncoding;
              roughnessTexture.flipY = false;
              mat.roughnessMap = roughnessTexture;
              if (emissiveTexture) {
                emissiveTexture.encoding = THREE.LinearEncoding;
                emissiveTexture.flipY = false;
                mat.emissiveMap = emissiveTexture;
                mat.emissiveIntensity = 0;
                mat.emissive = new THREE.Color(0xd4af37);
              }
              mat.needsUpdate = true;
              child.material.dispose();
              child.material = mat;
            }
          }
        });
        this.mesh.scale.set(120, 120, 120);
        this.mesh.position.set(0, -10, 0);
        this.modelLoaded = true;
        this.animate();
      });
      window.addEventListener("resize", this.onresize, false);
    },
    // 窗口改变
    onresize() {
      this.containerW = this.$refs.webgl.getBoundingClientRect().width;
      this.containerH = this.$refs.webgl.getBoundingClientRect().height;
      this.camera.aspect = this.containerW / this.containerH;
      this.camera.updateProjectionMatrix();
      this.renderer.setSize(this.containerW, this.containerH);
    },
    // 循环渲染
    render() {
      this.renderer.render(this.scene, this.camera);
    },
    animate() {
      this.rafId = requestAnimationFrame(this.animate);
      this.controls.update();
      TWEEN.update();
      if (this.canAni && this.index == 3) {
        this.mesh.getObjectByName("04dengzuo").material.emissiveIntensity += this.step;
        this.mesh.getObjectByName("03dengpan").material.emissiveIntensity += this.step;
        this.mesh.getObjectByName("ProOptimizer").material.emissiveIntensity += this.step;
        if (this.mesh.getObjectByName("04dengzuo").material.emissiveIntensity >= 1) {
          this.step = -0.01;
        }
        if (this.mesh.getObjectByName("04dengzuo").material.emissiveIntensity <= 0) {
          this.step = 0.01;
        }
      }
      if (this.index == 2 && this.canParticle) {
        var dt = this.clock.getDelta();
        this.engine1.update(dt * 0.4);
        this.engine2.update(dt * 0.4);

        if (this.pointLight.distance > 13) {
          this.stepLight = -0.05;
        }
        if (this.pointLight.distance < 9) {
          this.stepLight = 0.05;
        }
        this.pointLight.distance += this.stepLight;
      }
      if (!this.hasload) {
        if (this.barWidth < 50) {
          this.barWidth += 1;
        } else {
          if (this.modelLoaded) {
            if (this.barWidth < 100) {
              this.barWidth += 0.5;
            } else {
              this.hasload = true;
            }
          }
        }
      }
      this.render();
    },
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.onresize, false);
    cancelAnimationFrame(this.rafId);
    this.renderer.dispose();
    this.renderer.forceContextLoss();
    // this.renderer.context = null
    this.renderer.domElement = null;
    this.renderer = null;
    this.scene = null;
    this.camera = null;
    this.rafId = null;
    this.container = null;
    this.mesh = null;
    this.controls = null;
    this.modelInfo = null;
  },
};
</script>
<style scoped>
.webglContainer {
  width: 100%;
  height: 100%;
  position: relative;
}
.videoBtn {
  position: absolute;
  width: 2.2rem;
  height: 0.6rem;
  left: 50%;
  transform: translateX(-50%);
  bottom: 2.6rem;
}
.videoBox {
  position: absolute;
  height: 100%;
  width: 100%;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  background-color: rgba(0, 0, 0, 0.5);
}
.videoBox .wrap {
  position: absolute;
  height: 50%;
  width: 100%;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  background: url(../../public/models/tnd/kuan_huo.png) no-repeat;
  background-size: 100% 100%;
}
.videoBox video {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  max-width: 98%;
  max-height: 90%;
}
.loading {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 999;
  top: 0;
  left: 0;
}
.loading .progress {
  width: 50%;
  height: 6px;
  background-color: gray;
  position: absolute;
  /* box-shadow: 0 0 5px rgba(0,0,0,0.3); */
  left: 50%;
  bottom: 20%;
  transform: translateX(-50%);
  border-radius: 2px 2px;
  overflow: hidden;
}

.loading .bar {
  width: 0%;
  height: 6px;
  background-color: rgba(230, 197, 106, 1);
  position: absolute;
  left: 0;
}
.loading img {
  position: absolute;
  min-width: 100%;
  height: 100%;
}
.btns {
  position: absolute;
  left: 0.2rem;
  bottom: 0rem;
}
.btns .btn {
  position: relative;
  width: 0.6rem;
  height: 0.6rem;
  margin-bottom: 0.2rem;
}
.btns .btn.active {
  background-color: aliceblue;
}
.btns .btn img {
  width: 100%;
  position: absolute;
}
.bg {
  min-width: 100%;
  min-height: 100%;
  max-height: 100%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
}
.title1 {
  width: 0.6rem;
  height: 2.73rem;
  position: absolute;
  left: 0.38rem;
  top: 1.85rem;
}
.title2 {
  position: absolute;
  right: 0.35rem;
  top: 1.85rem;
}
.title2_1 {
  width: 1.2rem;
  height: 7.12rem;
}
.title2_2 {
  width: 1.2rem;
  height: 6.49rem;
}
.title2_3 {
  width: 1.2rem;
  height: 6.49rem;
}
.title2_4 {
  width: 1.2rem;
  height: 6.49rem;
}
.title3 {
  width: 0.8rem;
  height: 0.76rem;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0.44rem;
}
#webgl {
  width: 100%;
  height: 100%;
  position: absolute;
}
.test {
  position: absolute;
  width: 200px;
  height: 50px;
  z-index: 5;
  font-size: 30px;
  text-align: center;
  line-height: 50px;
}
</style>
