javascript - 按钮移动相机 THREE.js

Question

我想在我的网站上有单独的按钮，每个按钮将相机移动到不同的位置。我该怎么做呢？目前，我已将其设置为当我按下按钮时，相机会遵循我设置的一系列相机位置，但我不知道如何将它们分开，因此每个按钮都会将相机移动到场景中的不同位置。

这是我当前拥有的代码:

    camera.position.set(100, 0, 400);
}

function render() {
    requestAnimationFrame(render);

    renderer.render(scene, camera);
    TWEEN.update();
}

function moveCam() {

    var pos1 = new TWEEN.Tween(camera.position).to({
        y: 300
    }, 3000).easing(TWEEN.Easing.Quadratic.InOut);

    var pos2 = new TWEEN.Tween(camera.position).to({
        x: -400
    }, 4000).easing(TWEEN.Easing.Quadratic.InOut);

     var pos3 = new TWEEN.Tween(camera.position).to({
        y: -10
    }, 4000).easing(TWEEN.Easing.Quadratic.InOut);

     var rot1 = new TWEEN.Tween(camera.rotation).to({
        y: -1
    }, 4000).easing(TWEEN.Easing.Quadratic.InOut);

    var pos4 = new TWEEN.Tween(camera.position).to({
        x: 600
    }, 6000).easing(TWEEN.Easing.Quadratic.InOut);

    var pos5 = new TWEEN.Tween(camera.position).to({
        y: -400
    }, 2000).easing(TWEEN.Easing.Quadratic.InOut);

    var rot2 = new TWEEN.Tween(camera.rotation).to({
        y: -5
    }, 2000).easing(TWEEN.Easing.Quadratic.InOut);

    var pos6 = new TWEEN.Tween(camera.position).to({
        z: 10
    }, 5000).easing(TWEEN.Easing.Quadratic.InOut);

    var rot3 = new TWEEN.Tween(camera.rotation).to({
        y: 0
    }, 2000).easing(TWEEN.Easing.Quadratic.InOut);


    pos1.start();
    pos1.chain(pos2);
    pos2.chain(pos3, rot1)
    rot1.chain(pos4)
    pos4.chain(pos5, rot2)
    rot2.chain(pos6)
    pos6.chain(rot3)

Answer 1

也许可以尝试以下方法:

使用单个补间而不是每个按钮一个。这样您就可以确保他们不会干扰:

var positionTween = new TWEEN.Tween(camera.position)
    .easing(TWEEN.Easing.Quadratic.InOut);
var rotationTween = new TWEEN.Tween(camera.rotation)
    .easing(TWEEN.Easing.Quadratic.InOut);

并以完整形式定义每个按钮的位置和旋转。因此，如果您定义一个位置，请始终使用所有三个组件来定义它。旋转也是如此。如果您不指定值，则该值不会更改，因此位置将取决于相机之前的位置。

在这里，我使用按钮 id-attribute 来检索位置。所以我假设按钮的 HTML 看起来像这样:

<button id="button1" class="camera-button">Position 1</button>

JS 是:

var buttonCameraSettings = {
    button1: {
      position: {x: 1, y: 0, z: 0},
      rotation: {x: 0, y: Math.PI, z: 0}
    },
    button2: {
      // ...
    }
};

您现在可以为所有按钮注册事件处理程序并查找按钮的设置:

var button1 = document.getElementById('button1');
button1.addEventListener('click', function(ev) {
  var buttonId = ev.target.id;
  var cameraSettings = buttonCameraSettings[buttonId];

  updateCameraTweens(cameraSettings);
});

现在，对于最后一部分，函数 updateCameraTweens 如下所示:

function updateCameraTweens(params) {
  if (params.position) {
    positionTween.stop();
    positionTween.to(params.position, 1000).start();
  }

  if (params.rotation) {
    rotationTween.stop();
    rotationTween.to(params.rotation, 1000).start();
  }
}

如果您需要每个动画不同的持续时间，您也可以将这些数字添加到参数中。

关于轮换的另一条注释。由于某些数学原因，对存储在camera.rotation中的欧拉 Angular 进行动画处理通常不是最好的主意。如果对象的四元数是动画的，则动画看起来会更好。

var quatTween = new TWEEN.Tween(camera.quaternion);
var toQuaternion = new THREE.Quaternion();
var toEuler = new THREE.Eueler();

// in updateCameraTweens()
toEuler.set(rotation.x, rotation.y, rotation.z);
toQuaternion.setFromEuler(toEuler);
quatTween.to(toQuaternion, 1000).start();