三个JS重置Camera动画答案

【问题标题】：Three JS reset Camera animation三个JS重置Camera动画
【发布时间】：2021-04-22 16:24:54
【问题描述】：

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

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

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

【问题讨论】：

标签： three.js 3d

【解决方案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>

【讨论】：

非常感谢。这完美！抱歉回复晚了。直到今天我才有机会应用代码。