Kamera in drei Schritten vorwärts und rückwärts bewegen

Question

Wie würden Sie eine Kamera von einem festen Punkt entlang der Bahn, auf die sie gerichtet ist, hin und her bewegen?

Ich weiß, dass es mehrere Kontrollskripte gibt, die das tun, aber ich muss etwas Brauchbares machen und ich bin nicht in der Lage, ihren Code zu zerlegen, um herauszufinden, wie man das obige Verhalten isoliert.

Ich habe this answer gesehen, was ich denke, die Frage Adressen und habe mit diesem Code kommen:

cameraPosition = camera.position 
cameraRotation = new THREE.Vector3(camera.rotation._x, camera.rotation._y, camera.rotation._z) 
newCamera = new THREE.Vector3().addVectors(cameraPosition, cameraRotation) 
camera.position.set(newCamera.x, newCamera.y, newCamera.z) 
camera.updateProjectionMatrix() 

Aber das scheint zu bewegen, um die Kamera in einem Kreis statt hin und her.

Jede Hilfe würde sehr geschätzt werden. Vielen Dank!

Answer 1

Um die Kamera zu bewegen, vorwärts oder rückwärts die Richtung er konfrontiert ist, verwenden

camera.translateZ(- distance); 

oder

camera.translateZ(distance); 

drei .js r. 78

Answer 2

Gehen Sie wie folgt vor, indem Sie die camera.position.z aktualisieren. Verwenden der W = vorwärts, S = rückwärts

var camera, scene, renderer, geometry, material, mesh; 
 

 
init(); 
 
animate(); 
 

 
function init() { 
 

 
    scene = new THREE.Scene(); 
 

 
    camera = new THREE.PerspectiveCamera(50, window.innerWidth/window.innerHeight, 1, 10000); 
 
    camera.position.z = 500; 
 
    scene.add(camera); 
 

 
    geometry = new THREE.CubeGeometry(200, 200, 200); 
 
    material = new THREE.MeshNormalMaterial(); 
 

 
    mesh = new THREE.Mesh(geometry, material); 
 
    scene.add(mesh); 
 

 
    renderer = new THREE.WebGLRenderer({ antialias: true }); 
 
    renderer.setSize(window.innerWidth, window.innerHeight); 
 
    
 
    document.body.appendChild(renderer.domElement); 
 
    document.body.addEventListener('keydown', onKeyDown, false); 
 

 
} 
 

 
function animate() { 
 

 
    requestAnimationFrame(animate); 
 
    render(); 
 

 
} 
 

 
function render() { 
 
    mesh.rotation.x += 0.01; 
 
    mesh.rotation.y += 0.02; 
 

 
    renderer.render(scene, camera); 
 
} 
 

 
function onKeyDown(){ 
 
switch(event.keyCode) { 
 
    case 83: // up 
 
    camera.position.z += 50; 
 
    break; 
 
    case 87: // down 
 
    camera.position.z -= 50; 
 
    break; 
 
} 
 
    
 
}

<script src="https://ajax.googleapis.com/ajax/libs/threejs/r76/three.min.js"></script>