vue3+threeJs实现可视化大屏展示

最终效果

可视化大屏展示

实现技术：

1. vue3.js
2. three.js

3. tween.js（用于动画过渡）

这里主要讲tween.js的作用，为了让视角切换不那么生硬，所以使用了tween.js进行动画过渡，除了通过事件进行切换视角，还有初始化加载的时候也可以有个过渡动画效果，看起来更炫酷。

// 事件控制视角
const switchView = (x, y, z) => {
  const views = { position: new THREE.Vector3(x, y, z), lookAt: new THREE.Vector3(0, 0, 0) };

  // 直接切换视角的话太生硬，所以使用Tween.js
  /* camera.position.copy(views.position);
  camera.lookAt(views.lookAt); */

  // 使用 Tween.js 进行平滑过渡动画
  const currentCameraPosition = camera.position.clone(); // 获取当前相机位置
  new TWEEN.Tween(currentCameraPosition)
    .to(views.position, 1000)
    .easing(TWEEN.Easing.Cubic.InOut)
    .onUpdate(() => {
      camera.position.copy(currentCameraPosition);
      camera.lookAt(views.lookAt);
    })
    .start();
};

直接在初始化的时候也调用switchView方法

onMounted(() => {
  render3d();
  loadModels();
  create3DTag();
  createCSS3DRenderer();
  create3dDialog();
  createCSS2DRenderer();
  create2dDialog();
  switchView(90, 140, 300); //初始化加载实现动画切换视角
});