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中的欧拉角进行动画处理通常不是最佳选择。如果对象的四元数是动画的，动画往往看起来更好。

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

Answer 2

对于你的场景是渲染自动，所以只需改变像这样的光源：

HTML：

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

JS：

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

按钮移动相机THREE.js

2 个答案: