JG-ADMIN-TEMP/src/views/report/statistics/screens/line/middle3D.vue

<template>
  <div style="position: relative">
    <div ref="containerRef" id="middle3D"></div>
  </div>
</template>

<script setup>
import { getOnlineInfo } from "@/api/bigScreen";
import * as THREE from "three";
import * as TWEEN from "three/examples/jsm/libs/tween.module.js";
import gsap from "gsap";
//导入轨道控制器
import { OrbitControls } from "three/addons/controls/OrbitControls.js";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
import { GUI } from "three/examples/jsm/libs/lil-gui.module.min.js";

const containerRef = ref(null);
//相机y轴高度
const cameraYVal = ref(8);
//相机x轴半宽度
const cameraXVal = ref(20);
//相机z轴高度
const cameraZVal = ref(6);
const modleColor = ref({
  online: "0x06ffa5",
  outline: "0xdb4848",
});
const infoArray = ref([]);
const getInfoArray = async () => {
  const { data } = await getOnlineInfo();
  infoArray.value = data;
};

const init3D = () => {
  //创建场景
  const scene = new THREE.Scene();
  //渲染函数
  const render = () => {
    renderer.render(scene, camera);
    requestAnimationFrame(render);
    TWEEN.update();
  };
  //灯光
  const lights = () => {
    //给场景增加环境光
    let Light1 = new THREE.DirectionalLight(0xffffff, 1);
    Light1.position.set(0, 0, 10);
    scene.add(Light1);
    let Light2 = new THREE.DirectionalLight(0xffffff, 1);
    Light2.position.set(0, 0, -10);
    scene.add(Light2);
    let Light3 = new THREE.DirectionalLight(0xffffff, 1);
    Light3.position.set(10, 0, 0);
    scene.add(Light3);
    let Light4 = new THREE.DirectionalLight(0xffffff, 1);
    Light4.position.set(-10, 0, 10);
    scene.add(Light4);
    let Light5 = new THREE.DirectionalLight(0xffffff, 1);
    Light5.position.set(0, 10, 0);
    scene.add(Light5);
    let Light6 = new THREE.DirectionalLight(0xffffff, 1);
    Light6.position.set(0, -10, 0);
    scene.add(Light6);
    let Light7 = new THREE.DirectionalLight(0xffffff, 1);
    Light7.position.set(5, 10, 0);
    scene.add(Light7);
    let Light8 = new THREE.DirectionalLight(0xffffff, 1);
    Light8.position.set(0, 10, 5);
    scene.add(Light8);
    let Light9 = new THREE.DirectionalLight(0xffffff, 1);
    Light9.position.set(-5, 10, 0);
    scene.add(Light9);
  };
  lights();
  //创建一个相机
  const camera = new THREE.PerspectiveCamera(
    45, //视角
    document.getElementById("middle3D").clientWidth /
      document.getElementById("middle3D").clientHeight,
    0.1, //近平面
    1000 //远平面
  );
  camera.position.set(0, 15, 8);
  const renderer = new THREE.WebGLRenderer({
    //抗锯齿
    antialias: true,
  });
  renderer.setSize(
    document.getElementById("middle3D").clientWidth,
    document.getElementById("middle3D").clientHeight
  );
  containerRef.value.appendChild(renderer.domElement);
  scene.fog = new THREE.Fog(0x000000, 0.1, 50);
  scene.background = new THREE.Color(0x000000);
  //
  const controls = new OrbitControls(camera, renderer.domElement);
  controls.update();
  const loader = new GLTFLoader();
  render();
  //圆锥体动画
  function animateModel(model) {
    // 创建一个时间轴
    const tl = gsap.timeline({
      repeat: -1, // 无限重复
      yoyo: true, // 往复运动
      ease: "power1.inOut", // 缓动函数
    });

    // 添加动画到时间轴
    tl.to(model.position, {
      duration: 1, // 动画持续时间
      y: 4, // 上升到y=3.5的位置
      ease: "power1.inOut",
    });
  }
  //单个巡航实现函数
  function timeout(time, option, i) {
    setTimeout(() => {
      camera.position.set(
        cameraPositions[i].reset.x,
        cameraYVal.value,
        cameraPositions[i].reset.z
      );
      camera.lookAt(0, 0, 0);
      camera.position.set(
        cameraPositions[i].start.x,
        cameraYVal.value,
        cameraPositions[i].start.z
      );
      const tl = gsap.timeline({
        defaults: { ease: "linear" },
      });
      tl.to(camera.position, option);
    }, time);
  }
  //车间巡航动画
  function animateCamera() {
    let timer = 0;
    for (let i = 0; i < cameraPositions.length; i++) {
      // 创建一个时间轴
      if (i !== 0) {
        timer = timer + cameraPositions[i - 1].time * 1000;
      }
      const object = {
        duration: cameraPositions[i].time,
        [cameraPositions[i].change.lable]: cameraPositions[i].change.value,
      };
      timeout(timer, object, i);
    }
    // 添加动画到时间轴
  }
  // const gui = new GUI();
  // gui.add(camera.position, "x").min(-50).max(50).step(0.1).name("相机x");
  // gui.add(camera.position, "y").min(-50).max(50).step(0.1).name("相机y");
  // gui.add(camera.position, "z").min(-50).max(50).step(0.1).name("相机z");
  // gui.add(camera, "fov").min(0).max(50).step(0.1).name("相机视角");
  //加载模型
  loader.load("/3dmodel/XF.glb", (gltf) => {
    console.log(gltf);
    scene.add(gltf.scene);
    gltf.scene.position.set(2.8, 0, 0);
    const motorModel = gltf.scene;
    motorModel.traverse((obj) => {
      if (/^锥体-/.test(obj.name)) {
        obj.material.color.set(0x06ffa5);
        animateModel(obj);
      }
    });
    animateCamera();
    setInterval(() => {
      animateCamera();
    }, 30000);
  });
  //巡航路线 ->reset 为调整相机lookat向量点 start 为调整后相机位开始位置 change 为本次动画调整的坐标和距离
  const cameraPositions = [
    {
      reset: {
        x: 0,
        z: cameraZVal.value,
      },
      start: {
        x: cameraXVal.value,
        z: cameraZVal.value,
      },
      change: {
        lable: "x",
        value: -cameraXVal.value,
      },
      time: 10,
    },
    {
      reset: {
        x: -cameraXVal.value,
        z: 0,
      },
      start: {
        x: -cameraXVal.value,
        z: cameraZVal.value,
      },
      change: {
        lable: "z",
        value: -cameraZVal.value,
      },
      time: 5,
    },
    {
      reset: {
        x: 0,
        z: -cameraZVal.value,
      },
      start: {
        x: -cameraXVal.value,
        z: -cameraZVal.value,
      },
      change: {
        lable: "x",
        value: cameraXVal.value,
      },
      time: 10,
    },
    {
      reset: {
        x: cameraXVal.value,
        z: 0,
      },
      start: {
        x: cameraXVal.value,
        z: -cameraZVal.value,
      },
      change: {
        lable: "z",
        value: cameraZVal.value,
      },
      time: 5,
    },
  ];
  //监听窗口变化
  window.addEventListener("resize", () => {
    renderer.setSize(
      document.getElementById("middle3D").clientWidth,
      document.getElementById("middle3D").clientHeight
    );
    camera.aspect =
      document.getElementById("middle3D").clientWidth /
      document.getElementById("middle3D").clientHeight;
    camera.updateProjectionMatrix();
  });
};

onMounted(() => {
  getInfoArray();
  init3D();
});
</script>

<style lang="scss" scoped>
#middle3D {
  height: 29vh;
  width: 100%;
  position: absolute;
  z-index: 5;
}
</style>