button move camera 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-элементов для получения позиции. Поэтому я предполагаю 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(); 
    } 
} 

Если вам нужна разная продолжительность анимации, вы можете просто добавить эти числа к параметрам.

Другое примечание относительно поворота. По какой-то математической причине, как правило, не самая лучшая идея - анимировать углы Эйлера, хранящиеся в камере. Анимации имеют тенденцию выглядеть лучше, если вместо этого выполняется анимирование кватерниона объекта.

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

Для вашей сцены делают автомобиль, так что просто изменить Camere так:

HTML:

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

ЯШ:

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