Как перемещать объект в 3Д пространстве?

Question

[Всеволод Жданов]

Вот я прекрасно понимаю, как в 2Д пространстве можно перемещать объект на определенный градус:

x+=Math.cos(angle)*speed;
y+=Math.sin(angle)*speed;

Но я совершенно не понимаю, как сюда приписать третью координату и третью ось. Я пишу это все на Three.js. Вот собственно код:

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 20000);

var light = new THREE.PointLight( 0xffffff, 1, 2000 );
light.position.set(0,0,0);scene.add( light );

var x = 0, y = 0, z = -500, speed = 0, angle = 0, angle2 = 0;

var geometry = new THREE.CylinderGeometry( 4, 15	, 100, 6 );
var material = new THREE.MeshLambertMaterial( {color: 0xffffff} );
var cylinder = new THREE.Mesh( geometry, material );
scene.add( cylinder );

var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
renderer.shadowMapEnabled = true;
renderer.setClearColorHex( 0x00000, 1 );

var render = function () {
	requestAnimationFrame(render);
	renderer.render(scene, camera);
	switch (key){ 
		case 38: angle2+=0.1; break;
		case 40: angle2-=0.1; break;
		case 37: angle+=0.1; break;
		case 39: angle-=0.1; break;

		case 90: speed-=0.5; break;
		case 88: speed+=0.5; break;
	}
	light.position.set(camera.position.x,camera.position.y+3,camera.position.z-3);

	cylinder.rotation.z=-angle;
	cylinder.position.set( x+=Math.sin(angle)*speed*2, y+=Math.cos(angle)*speed, z );
};
document.onkeydown = keyDn; document.onkeyup = keyUp; key=0;
function keyDn(e) {key = e.which;console.log(key)}
function keyUp(e) {key = 0;}
render();
Заранее спасибо за помощь!)

Answer 1

[linoleum]

Смотрите.. в случае 2D вы используете cos для x и sin для y. Это правильно, но из-за этого у вас и путаница, потому что более строго это выглядит так:

x+=Math.cos(angleX)*speed;
y+=Math.cos(angleY)*speed; // да, тут тоже косинус, но угол другой

потому что мы не можем 'перемещать на угол', мы можем только перемещать вдоль вектора.
В случае 2D - это вектор {cos(angleX), cos(angleY)}.
В случае 3D - {cos(angleX), cos(angleY), cos(angleZ)},
где angle* - угол с соответствующей осью.
Почитайте про направляющие косинусы.

То есть, если отвечать на ваш вопрос 'как сюда приписать третью координату и третью ось', то найдите угол с осью Z и добавьте
z+=Math.cos(angleZ)*speed;

UPD Сейчас внимательнее посмотрел ваш код - у вас объявлена переменная angle2 - может быть это она и есть (угол с осью Z)? :) Тогда будет просто
z += Math.cos(angle2) * speed;

Comments

[Всеволод Жданов]

т.е. надо делать так? Но результат не лучше...
cylinder.rotation.z=angle2;
cylinder.rotation.y=angle1;
cylinder.rotation.x=angle0;
cylinder.position.set( x+=Math.sin(angle0)*speed*2, y+=Math.cos(angle0)*speed, z+=Math.cos(angle2)*speed );

[linoleum]

У вас в rotation angle1, а в position angle0. И, да - rotation на перемещение не влияет, это чтобы объект на месте крутился.

[Всеволод Жданов]

Да, есть такое, описался) Но все равно корабль не плывет в нужную сторону! И не как не пойму почему. Ну я все сделал вроде правильно...
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 20000000);

var light = new THREE.PointLight( 0xffffff, 1, 2000 );
light.position.set(0,0,0);scene.add( light );

var x = 0, y = 0, z = -500, speed = 0.2, angle0 = 0, angle1 = 0, angle2 = 0;

var geometry = new THREE.CylinderGeometry( 4, 15 , 100, 6 );
var material = new THREE.MeshLambertMaterial( {color: 0xffffff} );
var cylinder = new THREE.Mesh( geometry, material );
scene.add( cylinder );

var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
renderer.shadowMapEnabled = true;
renderer.setClearColorHex( 0x00000, 1 );

var render = function () {
requestAnimationFrame(render);
renderer.render(scene, camera);
switch (key){
case 38: angle0+=0.05; break;
case 40: angle0-=0.05; break;
case 37: angle1+=0.05; break;
case 39: angle1-=0.05; break;

case 90: angle2-=0.05; break;
case 88: angle2+=0.05; break;
}
light.position.set(camera.position.x,camera.position.y+3,camera.position.z-3);

cylinder.rotation.z=-angle2;
//cylinder.rotation.y=-angle1;
cylinder.rotation.x=-angle0;
cylinder.position.set( x+=Math.sin(angle0)*speed*2, y+=Math.cos(angle1)*speed, z+=Math.cos(angle2)*speed);
};
document.onkeydown = keyDn; document.onkeyup = keyUp; key=0;
function keyDn(e) {key = e.which;console.log(key)}
function keyUp(e) {key = 0;}
render();

Answer 2

[Всеволод Жданов]

Получается для каждой оси надо по углу... Понял)