Taste Kamera bewegen THREE.js

Question

Ich möchte die separaten Tasten auf meiner Website haben, und jede Taste bewegt die Kamera an eine andere Position. Wie gehe ich dabei vor? Momentan habe ich es so eingerichtet, dass die Kamera, wenn ich einen Knopf drücke, einer Kette von Kamerapositionen folgt, die ich eingestellt habe. Aber ich weiß nicht, wie man diese trennt, sodass jede Taste die Kamera an eine andere Stelle in meiner Szene bewegt. Hier

ist der Code, den ich derzeit haben:

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

Vielleicht versuchen Sie Folgendes:

Verwenden Sie ein einzelnes Tween anstelle von einem pro Schaltfläche. Auf diese Weise können Sie sicherstellen, dass sie nicht stören:

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

und die Positionen und Rotationen für jede der Tasten in ihrer vollständigen Form definieren. Wenn Sie also eine Position definieren, definieren Sie sie immer mit allen drei Komponenten. Gleiches gilt für die Rotation. Wenn Sie keinen Wert angeben, wird dieser Wert nicht geändert, daher hängt die Position davon ab, wo sich die Kamera zuvor befand.

Hier verwende ich die Schaltflächen ID-Attribut, um die Position abzurufen. Also vorausgesetzt, ich bin die HTML für die Tasten etwas wie folgt aussieht:

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

Und die JS wäre:

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

Sie können nun einen Event-Handler für alle Tasten registrieren und die Einstellungen Nachschlag für die Schaltfläche:

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

    updateCameraTweens(cameraSettings); 
}); 

Nun zum letzten Teil, die Funktion updateCameraTweens würde wie folgt aussehen:

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

Wenn Sie unterschiedliche Dauern pro Animation benötigen, können Sie auch diese Zahlen zu den Parametern hinzufügen.

Noch ein Hinweis zu den Rotationen. Aus irgendeinem mathematischen Grund ist es in der Regel nicht die beste Idee, die in der Kamera gespeicherten Rotationswinkel zu animieren. Animationen neigen dazu, besser auszusehen, wenn stattdessen die Quaternion des Objekts animiert wird.

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

Für Ihre Szene ist automatisch Rendern, also nur die camere wie folgt ändern:

html:

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

js:

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