threejs 3d地图通过gsap实现从远到近的入场动画

数据可视化大屏项目开发工程中，对效果追求越来越高，所以前端也需要不断的积累效果，以便于快速应用到项目用，不用等到用的时候才想到开发，时间上就紧张了，今天要实现的是地图从远到近的入场动画。

threejs版本号

 "three": "^0.154.0",

vue版本号

"vue": "^3.2.45",

效果截图

动态效果

在线演示地址

原理

使用gsap来动态调整相机的位置，从而实现地图从远到近的入场动画。注意相机的选择，这里使用的是透视相机

// 创建透视相机
const fov = 45; // 视场角度（fov）
const aspect = width / height; // 宽高比（aspect ratio）
const near = 1; // 近裁剪面
const far = 1000; // 远裁剪面
camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
// 设置相机初始位置
camera.position.set(112.43007658933894, -64.41010519817381, 15.879374310990187);
camera.lookAt(scene.position);

关键代码

使用gsap的fromTo来调整相机的位置

const cameraStartPosition = {x: 112.20929449299491, y: 5.19241909563627, z: 13.291026054316227};
const cameraEndPosition = {x: 112.14357995282774, y: 31.705195961754452, z: 1.7322278452088524};
const controlsTargetStart = {x: center.x, y: center.y, z: 0};
const controlsTargetEnd = {x: center.x, y: center.y, z: 0};

// 创建gsap时间轴
const tl = gsap.timeline();

tl.fromTo(camera.position, cameraStartPosition, {
duration: 2,
x: cameraEndPosition.x,
y: cameraEndPosition.y,
z: cameraEndPosition.z,
ease: "power2.out",
onUpdate: () => {
  gsap.to(controls.target, {
    x: controlsTargetEnd.x,
    y: controlsTargetEnd.y,
    z: controlsTargetEnd.z,
    duration: 0.01,
    ease: "power2.out",
    onUpdate: () => {
      controls.update();
    }
  });
}
})

完整实例代码

代码环境 vue3 + vite + js + nodejs 14