three.js相机场景旋转动画（tween.js动画）

1.引入

import TWEEN from "@/common/js/libs/Tween.min.js";

2.创建相机

function createCamera(width, height) {
  var k = width / height; //窗口宽高比
  var s = 200; //三维场景显示范围控制系数，系数越大，显示的范围越大
  // //创建相机对象
  // 正交相机
  // camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
  // 透视相机（此处需要全景和透视）
  camera = new THREE.PerspectiveCamera(
    45,
    window.innerWidth / window.innerHeight,
    0.1,
    20000
  );
  // camera.position.set(200, 300, 200); //设置相机位置
  camera.position.set(0, 300, 200); //设置相机初始位置
  camera.lookAt(scene.position); //设置相机方向(指向的场景对象)
}

3.创建相机动画

// 创建相机动画
function createCameraAnimation() {
  var obj = {
    x: 0,
    y: 200,
    z: 300,
  };
  var tween = new TWEEN.Tween(obj);
  tween.to(
    {
      x: 400,
      y: 200,
      z: 300,
    },
    5000
  );
  tween.onUpdate(function() {
    // 动态更新相机位置
    camera.position.set(obj.x, obj.y, obj.z); //设置相机位置
    camera.lookAt(0, 0, 0); //保持相机目标观察点不变
  });
  tween.start();//tween动画开始执行
}

4.更新动画

function render() {
  TWEEN.update();//更新TWEEN

  requestAnimationFrame(render); //请求再次执行渲染函数render，渲染下一帧
  renderer.render(scene, camera); //执行渲染操作
}

5.即可实现场景的旋转动画