web-dev-qa-db-ja.com

Three.jsでオブジェクトを前方に移動する方法は？

Three.jsでオブジェクトを前方に移動する方法はありますか？

Rotation.x、y、zをベクトルに変換して処理する必要があるかもしれません。しかし、私は初心者です、そして、私はそれをする方法を全く知りません。

javascriptthree.js
24
eqiproo

Object3D には便利なメソッドがいくつかあります。

object.translateZ( 10 );
47
mrdoob

ThreeJSの作成者である@mrdoobの上記の回答を使用してください。

object.translateZ( delta );

===古い回答===

古い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;

より多くのオプション：

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

ここに投稿された詳細 https://gamedev.stackexchange.com/questions/7490/translate-object-in-world-space-usings-its-local-rotation

7
www.eugenehp.tk

カメラは空間内のポイントです。 「前方」は空間の別のポイントです。そのため、2番目のポイントの座標を使用して、カメラの位置を「前方」の位置に近づけることができます。

ただし、極座標が関係する可能性があるため、左右に回転する必要がある場合もあります。

便宜上、これらの値を調整します。

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;

この関数はシーンを初期化します：

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

}

プレーヤーが上キーを押すと、プレーヤーの動きが停止します。

function key_up(event){
    playerIsMovingForward = 0;
    playerIsMovingBackwards = 0;
    playerIsRotatingLeft = 0;
    playerIsRotatingRight = 0;
    playerGoesUp = 0;
    playerGoesDown = 0;
}

プレーヤーが動いているときに、位置を更新します。

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

    }

}

将来的には「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;
    }


}

プレイヤーはブラウザと同じ速さでしか動きません。このコードを調整するのでしょうか？

function animate() {
    requestAnimationFrame( animate );

    updatePlayer();



    renderer.render( scene, 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 );    

}

通常、前方に移動するには左右に回転します。これを行うコードをいくつか示します。また、極座標を使用して、カメラに対して点を移動します（これは「円」の中心で、指定された角度（ラジアン）

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

それがお役に立てば幸いです。

2
Felipe Valdes