Javascript 如何在 Three.js 中向前移动对象？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11127543/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to move an object forward in Three.js?
提问by eqiproo
Is there any way to move an object forward in Three.js?
有没有办法在 Three.js 中向前移动对象？
Maybe I should convert the rotation.x,y,z to a vector, and deal with it. But I'm beginner, and I don't have any idea how to do it.
也许我应该将 rotation.x,y,z 转换为向量，然后处理它。但我是初学者，我不知道该怎么做。
回答by www.eugenehp.tk
Please use above answer of @mrdoob, creator of ThreeJS:
请使用ThreeJS的创建者@mrdoob的上述答案：
object.translateZ( delta );
object.translateZ( delta );
===OLD ANSWER===
===旧答案===
A tutorial that worked for older ThreeJS version: http://www.aerotwist.com/tutorials/getting-started-with-three-js/
适用于旧 ThreeJS 版本的教程：http://www.aerotwist.com/tutorials/getting-started-with-three-js/
// set position of YOUR_OBJECT
YOUR_OBJECT.position.x = 10;
YOUR_OBJECT.position.y = 50;
YOUR_OBJECT.position.z = 130;
More options:
更多选择：
var STEP = 10;
var newCubeMatrix = cube.matrix;
newCubeMatrix.identity();
//newCubeMatrix.multiplySelf(THREE.Matrix4.rotationYMatrix(cube.rotation.y));
newCubeMatrix.multiplySelf(THREE.Matrix4.translationMatrix(cube.position.x, cube.position.y, cube.position.z + STEP));
cube.updateMatrix();
details posted here https://gamedev.stackexchange.com/questions/7490/translate-object-in-world-space-usings-its-local-rotation
回答by Felipe Valdes
The camera is a point in space. "Forward" is another point in space. so you can simply use the coordinates of a second point, and make the camera location closer to the "forward" location.
相机是空间中的一个点。“前进”是空间中的另一个点。所以你可以简单地使用第二个点的坐标，并使相机位置更接近“前进”位置。
however, you may also need to turn left and right, which might involve polar coordinates.
但是，您可能还需要向左和向右转，这可能涉及极坐标。
adjust these values for your convenience:
为方便起见调整这些值：
var scene;
var camera;
var playerDirection = 0;//angles 0 - 2pi
var dVector;
var angularSpeed = 0.01;
var playerSpeed = 0.075;
var playerBackwardsSpeed = playerSpeed * 0.4;
this function will initialize the scene:
此函数将初始化场景：
function init(){
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
camera.position.z = 5;
dVector = new THREE.Vector3( 0, 0, 0 ) ;
camera.lookAt( dVector );
animate();
}
movement of the player is stopped when the player presses the up key.
当玩家按下向上键时，玩家的移动停止。
function key_up(event){
playerIsMovingForward = 0;
playerIsMovingBackwards = 0;
playerIsRotatingLeft = 0;
playerIsRotatingRight = 0;
playerGoesUp = 0;
playerGoesDown = 0;
}
when the player is moving, we update the position:
当玩家移动时，我们更新位置：
function updatePlayer(){
if(playerIsRotatingLeft){ // rotate left
playerDirection -= angularSpeed;
}
if(playerIsRotatingRight){ // rotate right
playerDirection += angularSpeed;
}
if(playerIsRotatingRight || playerIsRotatingLeft){
setPlayerDirection();
}
if(playerIsMovingForward){ // go forward
moveForward(playerSpeed);
}
if(playerIsMovingBackwards){ // go backwards
moveForward(-playerBackwardsSpeed);
}
}
We assume by forward you meant "using the WASD keys"
我们假设您的意思是“使用 WASD 键”
function key_down(event){
var W = 87;
var S = 83;
var A = 65;
var D = 68;
var minus = 189;
var plus = 187;
var k = event.keyCode;
console.log(k);
if(k == A){ // rotate left
playerIsRotatingLeft = 1;
}
if(k == D){ // rotate right
playerIsRotatingRight = 1;
}
if(k == W){ // go forward
playerIsMovingForward = 1;
}
if(k == S){ // go back
playerIsMovingBackwards = 1;
}
}
player will only move as fast as his browser. so maybe adjust this code?
玩家的移动速度只会与他的浏览器一样快。所以也许调整这个代码？
function animate() {
requestAnimationFrame( animate );
updatePlayer();
renderer.render( scene, camera );
}
this is the code that moves the camera into the position of the dVector object and also repositions the direction vector (dVector), so that it is always forward from the camera.
这是将相机移动到 dVector 对象的位置并重新定位方向矢量 (dVector) 的代码，以便它始终从相机向前。
function moveForward(speed){
var delta_x = speed * Math.cos(playerDirection);
var delta_z = speed * Math.sin(playerDirection);
var new_x = camera.position.x + delta_x;
var new_z = camera.position.z + delta_z;
camera.position.x = new_x;
camera.position.z = new_z;
var new_dx = dVector.x + delta_x;
var new_dz = dVector.z + delta_z;
dVector.x = new_dx;
dVector.z = new_dz;
camera.lookAt( dVector );
}
moving forward usually involves turning left and right, here is some code that does that, it also uses polar coordinates, to move the point in relation to the camera (which is the center of the "circle" by a given amount of degrees (in radians)
向前移动通常涉及向左和向右转动，这里有一些代码可以做到这一点，它还使用极坐标来移动相对于相机的点（这是“圆”的中心给定的度数（在弧度）
function setPlayerDirection(){
//direction changed.
var delta_x = playerSpeed * Math.cos(playerDirection);
var delta_z = playerSpeed * Math.sin(playerDirection);
var new_dx = camera.position.x + delta_x;
var new_dz = camera.position.z + delta_z;
dVector.x = new_dx;
dVector.z = new_dz;
console.log(dVector);
camera.lookAt( dVector );
}
animate();
I hope that helps.
我希望这有帮助。
回答by Master James
Another option is to use Vector3's set method/function.
另一种选择是使用 Vector3 的 set 方法/函数。
position.set(x, y, z);
