三个JS重置相机动画

Question

有没有办法用三个 JS 来制作相机重置运动的动画？

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

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

Answer 1

这可以用像 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, 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/three@0.127/build/three.js"></script>

三个JS重置相机动画

Three JS reset Camera animation

3d

three.js