Перемещение камеры назад и вперед в три js

Question

Как бы вы перемещали камеру назад и вперед из неподвижной точки вдоль траектории, на которой она обращена?

Я знаю, что есть несколько контрольных сценариев, которые делают это, но мне нужно сделать что-то обычай, и я не могу сломать их код, чтобы понять, как изолировать вышеуказанное поведение.

Я видел this answer, который я думаю, рассматривается вопрос и придумали этот код:

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

Но это, кажется, перемещать камеру по кругу, а не взад и вперед.

Любая помощь будет высоко оценена. Спасибо!

Answer 1

Чтобы переместить камеру вперед или назад направление она сталкивается, использовать

camera.translateZ(- distance); 

или

camera.translateZ(distance); 

three.js r. 78

Answer 2

Вот как это делается, обновив camera.position.z. Используйте W = вперед, S = ОН назад

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>