Three.js -如何缓慢地改变相机的方向，直到它到达一个特定的矢量

Question

我正在使用Three.js开发一个360°图片播放器，我需要一些建议。

我在场景中创建了几个可剪裁的网格。当前，当用户单击网格时，摄像机的方向会被残酷地更改为网格的方向。(这是通过调用THREE.Camera.lookat()来完成的)。

我想要的是，当用户点击，相机平稳地从它的目标矢量过渡到网格的方向。我希望相机需要大约1秒的时间从它的当前矢量到网格的方向。

我见过吐温是一个图书馆，我们可以动画的场景，但我没有真正理解它是如何工作。你知道我能用什么来实现这个动画吗？如果吐温可以帮助我，你能解释一下吐温是如何与three.js合作的吗?或者你能链接一些githubs或者其他的吗？

谢谢你的反馈。

Answer 1

只是Tween.js对manthrax思想的扩展

​

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(0, 0, 0);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var sphere = new THREE.Mesh(new THREE.SphereGeometry(10, 32, 24), new THREE.MeshBasicMaterial({
  color: "yellow",
  wireframe: true
}));
scene.add(sphere);

var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2();
var startRotation = new THREE.Quaternion();
var targetRotation = new THREE.Quaternion();
window.addEventListener("mousedown", onMouseDown, false);

function onMouseDown(event) {
  mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
  mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
  raycaster.setFromCamera(mouse, camera);
  let newPosition = raycaster.ray.at(10);
  setPoint(newPosition);

  // manthrax's idea + Tween.js
  startRotation.copy(camera.quaternion);
  camera.lookAt(newPosition);
  camera.updateMatrixWorld();
  targetRotation = camera.quaternion.clone();
  camera.quaternion.copy(startRotation);

  new TWEEN.Tween(camera.quaternion).to(targetRotation, 1000).easing(TWEEN.Easing.Bounce.Out).delay(250).start();
  // one of benefits of using Tween.js is easings
  // you can find many of them here
  // https://sole.github.io/tween.js/examples/03_graphs.html

}

function setPoint(position) {
  let point = new THREE.Mesh(new THREE.SphereGeometry(0.125, 4, 2), new THREE.MeshBasicMaterial({
    color: "red",
    wireframe: true
  }));
  point.position.copy(position);
  scene.add(point);
}

render()

function render() {
  requestAnimationFrame(render);
  TWEEN.update(); // don't forget to put this line into the animation loop, when you use Tween.js
  renderer.render(scene, camera);
}

body {
  overflow: hidden;
  margin: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/91/three.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tween.js/17.2.0/Tween.min.js"></script>

​

Answer 2

类似于：

var targetRotation,startTime,transitionDuration;
var startRotation = camera.quaternion.clone();

function smoothTransition(newTarget){
    startRotation.copy(camera.quaternion);
    camera.lookAt(newTarget);
    camera.updateMatrixWorld();
    targetRotation = camera.rotation.clone();
    startTime = performance.now();
    transitionDuration = 1000;
}

在动画中：

if(startRotation){
    var playTime = (performance.now()-startTime)/transitionDuration;
    if(playTime>1)playTime = 1;
    Quaternion.slerp(startRotation,targetRotation,camera.rotation,playTime);
    camera.updateMatrixWorld();
}