three.js 怎么用Tween.js 来实现点击按钮切换视角

你可以使用Tween.js库来实现three.js中的动画效果。首先，你需要在HTML文件中引入Tween.js和three.js库。然后，你可以使用Tween.js的Tween类来创建一个动画对象，该对象可以控制three.js中的摄像机位置和旋转。在点击按钮时，你可以使用Tween.js的to()方法来设置摄像机的目标位置和旋转，然后使用start()方法来启动动画。以下是一个示例代码：

// 引入Tween.js和three.js库
import * as THREE from 'three';
import { Tween } from '@tweenjs/tween.js';

// 创建场景、摄像机和渲染器
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 创建一个立方体
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

// 创建一个Tween对象
const tween = new Tween(camera.position)
  .to({ x: 0, y: 0, z: 5 }, 1000)
  .easing(TWEEN.Easing.Quadratic.InOut)
  .onUpdate(() => {
    camera.lookAt(scene.position);
  });

// 点击按钮时启动Tween动画
document.getElementById('button').addEventListener('click', () => {
  tween.start();
});

// 渲染场景
function animate() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
}
animate();

在上面的代码中，我们创建了一个立方体和一个Tween对象。当点击按钮时，我们启动Tween动画，将摄像机的位置移动到(0, 0, 5)的位置，并使用Quadratic.InOut缓动函数使动画更加平滑。在动画更新时，我们使用camera.lookAt()方法来使摄像机始终朝向场景中心。最后，我们使用requestAnimationFrame()方法来循环渲染场景。