web-dev-qa-db-fra.com

Comment faire avancer un objet dans Three.js?

Est-il possible de faire avancer un objet dans Three.js?

Peut-être devrais-je convertir le fichier rotation.x, y, z en un vecteur et le traiter Mais je suis débutant et je ne sais pas comment le faire.

javascriptthree.js
21
eqiproo

Object3D a quelques méthodes pratiques pour cela.

object.translateZ( 10 );
45
mrdoob

La caméra est un point dans l'espace . "En avant" est un autre point dans l'espace . Vous pouvez donc simplement utiliser les coordonnées d'un second point et rapprocher l'emplacement de la caméra de celui "en avant".

cependant, vous devrez peut-être également tourner à gauche et à droite, ce qui pourrait impliquer des coordonnées polaires.

ajustez ces valeurs pour votre convenance:

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;

cette fonction initialisera la scène:

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

}

le mouvement du lecteur est arrêté lorsque le joueur appuie sur la touche haut.

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

lorsque le joueur se déplace, nous mettons à jour la position:

function updatePlayer(){
    if(playerIsRotatingLeft){ // rotate left
        playerDirection -= angularSpeed;
    }
    if(playerIsRotatingRight){ // rotate right
        playerDirection += angularSpeed;
    }
    if(playerIsRotatingRight || playerIsRotatingLeft){
        setPlayerDirection();
        return;
    }
    if(playerIsMovingForward){ // go forward
        moveForward(playerSpeed);
        return;
    }
    if(playerIsMovingBackwards){ // go backwards
        moveForward(-playerBackwardsSpeed);
        return;
    }

}

Nous supposons par avant que vous vouliez dire "en utilisant les clés 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;
    }


}

le joueur se déplacera aussi vite que son navigateur . alors peut-être ajuster ce code?

function animate() {
    requestAnimationFrame( animate );

    updatePlayer();



    renderer.render( scene, camera );
}

c'est le code qui déplace la caméra dans la position de l'objet dVector et repositionne également le vecteur de direction (dVector), de sorte qu'il soit toujours transmis depuis la caméra.

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

}

pour avancer, il faut généralement tourner à gauche et à droite, voici un code qui utilise des coordonnées polaires pour déplacer le point par rapport à la caméra (qui est le centre du "cercle" d'une quantité donnée de degrés (en 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();

J'espère que ça aide.

1
Felipe Valdes