三个JS重置Camera动画

如何解决三个JS重置Camera动画

有没有办法让我们三个 JS 的相机重置运动动画？

我正在使用以下代码重置相机，但它会立即重置。我想知道是否有办法为相机重置运动设置动画。

$(".rest-btn").on('click',(e) => {
   camera.position.x = 0;
   camera.position.y = 0;
   camera.position.z = 150;
 });

解决方法

这可以通过像 GSAP 这样的动画库来实现。例如

let renderer,scene,camera;

init();
animate();

function init() {

  renderer = new THREE.WebGLRenderer( { antialias: true } );
  renderer.setSize(window.innerWidth,window.innerHeight);
  renderer.setPixelRatio(window.devicePixelRatio);
  document.body.appendChild(renderer.domElement);

  scene = new THREE.Scene();

  camera = new THREE.PerspectiveCamera(60,window.innerWidth / window.innerHeight,0.1,100);
  camera.position.set(0,30);

  const geometry = new THREE.BoxGeometry(10,10,10);
  const material = new THREE.MeshNormalMaterial();

  const mesh = new THREE.Mesh(geometry,material);
  scene.add(mesh);

  gsap.to(camera.position,{
    duration: 2,x: 0,y: 0,z: 15
  });

}

function animate() {

  requestAnimationFrame(animate);
  renderer.render(scene,camera);

}

body {
    margin: 0px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.4.0/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/three.js"></script>