当目标相机位置移动时，如何在三个js中与animejs平滑交易？

Question

当当前位置位于顶部时，我有一个按钮，然后它移动到底部并以 Vector3 为中心，但并不平滑，就像我们在上面的交易中从 **

display: none;

到

display: block**

一样在这里，

const setupCameraForPart2 = (propsCameraPart: CameraPropsPart): void => {
  const { center, distance, name } = propsCameraPart;
  if (!name) {
    console.error('Part name is not provided);
    return;
  }
  console.log('Current Position:', _camera.position);
  const targetPosition = new THREE.Vector3(center.x, center.y, center.z + (distance * 1));
  console.log('Target Position:', targetPosition);

  // Animate opacity to 0 first
  anime({
    targets: '.viewport-three-d > canvas',
    opacity: 0,
    duration: 400,
    easing: 'easeInOutQuad',
    complete: () => {
      // After opacity animation completes, animate the camera position
      anime({
        targets: _camera.position,
        x: targetPosition.x,
        y: targetPosition.y,
        z: targetPosition.z,
        duration: 1200,
        easing: 'easeInOutQuad',
        update: () => {
          renderSceneAndCamera();
        },
        complete: () => {
          _camera.lookAt(_scene.position);
          _control.target.set(center.x, center.y, 0);
          _control.update();

          // Animate opacity back to 1 after camera movement completes
          anime({
            targets: '.viewport-three-d > canvas',
            opacity: 1,
            duration: 1000,
            delay: 800,
            easing: 'easeInOutQuad',
            update: () => {
              renderSceneAndCamera();
            }
          });
        }
      });
    }
  });

  _camera.lookAt(_scene.position);
  _control.target.set(center.x, center.y, center.z);
  _control.update();
}

当前位置相机到目标相机的位置

Current Position: _Vector3 {x: 0, y: 1.3438600897789001, z: 0.4259342574950393}
----
Target Position: _Vector3 {x: 0, y: 1.5364376306533813, z: 0.20977267946690245}

我当前的功能在移动到另一个位置时没有交易，我这里的目标是在当前位置和目标位置移动时进行交易

Answer 1

您对动画的解释...就像我们显示时一样：无；显示：块...，对我来说有点不清楚，但我假设你写的是

interpolation

。 要制作流畅的动画，就像我写的那样，可以通过在两点之间插入

camera

位置：

startPosition

和

targetPosition

。您可以使用

lerpVectors

，与两个 lerp 对象之间的

classical

Vector3

函数相关。单击网格，您就会明白我的意思。

<script type="importmap">
  {
    "imports": {
      "three": "https://unpkg.com/[email protected]/build/three.module.js",
      "three/addons/": "https://unpkg.com/[email protected]/examples/jsm/"
    }
  }
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.2/anime.min.js" integrity="sha512-aNMyYYxdIxIaot0Y1/PLuEu3eipGCmsEUBrUq+7aVyPGMFH8z0eTP0tkqAvv34fzN6z+201d3T8HPb1svWSKHQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<script type="module">
import * as THREE from "three";

const s = new THREE.Scene();
const c = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const r = new THREE.WebGLRenderer({ antialias: true });
r.setSize(window.innerWidth, window.innerHeight);
r.setPixelRatio(2);
document.body.appendChild(r.domElement);

const g = new THREE.BoxGeometry();
const m = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(g, m);
s.add(cube);

c.position.set(0, 1.34, 0.43);
c.lookAt(0, 0, 0);

function animate() {
  requestAnimationFrame(animate);
  r.render(s, c);
}
animate();
  
function smoothCameraTransition(startPosition, targetPosition, duration = 1000, onComplete = () => {}) {
  anime({
targets: { t: 0 },
t: 1,
duration,
easing: 'easeInOutQuad',
update: anim => {
  c.position.lerpVectors(startPosition, targetPosition, anim.animatables[0].target.t);
  c.lookAt(0, 0, 0);
},
complete: () => {
  c.position.copy(targetPosition);
  onComplete();
}
  }); 
}
const currentPosition = new THREE.Vector3(0, 1.34, 0.43);
const targetPosition = new THREE.Vector3(0, 1.54, 0.21);
let goingToTarget = true;

document.addEventListener('click', () => {
  const start = goingToTarget ? currentPosition : targetPosition;
  const end = goingToTarget ? targetPosition : currentPosition;
  smoothCameraTransition(start, end, 2000, () => {
goingToTarget = !goingToTarget;
  });
});
</script>