按钮移动相机 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

因为您的场景是自动渲染的，所以只需像这样更改摄像机即可：

html:

<button onclick="move()">Move</button>

js:

function move()
{
  camera.position += 10;
}

Answer 2

也许可以尝试以下方法：

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

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 属性来检索位置。所以我假设按钮的 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 中的欧拉角设置动画通常不是最好的主意。如果对象的四元数被动画化，动画往往看起来更好。

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();

按钮移动相机 THREE.js

button move camera THREE.js

javascript

camera

position

button

three.js