import { getImg } from "@/utils";
import {
  CircleGeometry,
  CylinderGeometry,
  Group,
  Mesh,
  MeshPhongMaterial,
  Object3D,
  Object3DEventMap,
  TextureLoader,
} from "three";
import { getBoxObject, modelGroup } from "./models";
import { getWallMaterial } from "./material";

const vfxGroup = new Group();
vfxGroup.name = "特效";

//模型底部光效
function addBottomLight(obj3d: Object3D<Object3DEventMap> | undefined) {
  //CircleGeometry的顶点UV坐标是按照圆形采样纹理贴图
  const geometry = new CircleGeometry(1, 32);
  //纹理贴图加载器TextureLoader
  const texLoader = new TextureLoader();
  const texture = texLoader.load(getImg("models/cir_bg.png"));
  const material = new MeshPhongMaterial({
    color: "#ffffff",
    map: texture, //map表示材质的颜色贴图属性
    transparent: true,
    opacity: 0.9,
    blending: 2,
    depthWrite: false,
    // depthTest: false,
    side: 2,
  });
  const mesh = new Mesh(geometry, material);
  mesh.rotation.x = -Math.PI / 2;

  const dimesh = mesh.clone();
  dimesh.rotation.x = 0;
  dimesh.position.y = 0.01;
  mesh.add(dimesh);

  const geometry2 = new CylinderGeometry(1, 1, 0.5, 32, 1, true);
  // const texture2 = new TextureLoader().load(getImg("models/cloud.png"));
  const material2 = getWallMaterial("#24BFFD");
  const mesh2 = new Mesh(geometry2, material2);

  const [box] = getBoxObject(mesh2);
  mesh2.visible = false;
  //@ts-ignore
  mesh2.position.y = -box.min.y;
  //   mesh2.rotation.x = -Math.PI / 2;

  const obj = new Object3D(); //作为mesh1和mesh2的父对象
  obj.scale.set(2, 2, 2);
  //   obj.position.set(0, 0.02, 0);
  obj.position.copy(obj3d!.position);
  obj.position.y = 0.02;
  obj.add(mesh, mesh2);

  obj.name = obj3d!.name + "底部光效";
  vfxGroup.add(obj);

  //@ts-ignore
  mesh.animate = function () {
    //@ts-ignore
    mesh.rotateZ(0.01);
    //@ts-ignore
    mesh.animateIndex = requestAnimationFrame(mesh.animate);
  };

  //@ts-ignore
  mesh.animate();
  //@ts-ignore
  // mesh2.animate = function () {
  //   //@ts-ignore
  //   mesh2.material.map.offset.y -= 0.01;
  //   //@ts-ignore
  //   mesh2.animateIndex = requestAnimationFrame(mesh2.animate);
  // };

  //@ts-ignore
  // mesh2.animate();
}

function initModelsLight() {
  // console.log(modelGroup);
  const fhmodel = modelGroup.getObjectByName("负荷");
  addBottomLight(fhmodel);
  const flmodel = modelGroup.getObjectByName("风力/光伏");
  addBottomLight(flmodel);
  const cnmodel = modelGroup.getObjectByName("储能");
  addBottomLight(cnmodel);
  const dwmodel = modelGroup.getObjectByName("电网");
  addBottomLight(dwmodel);
}

export { vfxGroup, initModelsLight };
