web-dev-qa-db-fra.com

Comment déplacer un cube Trois JS avec une entrée au clavier?

Le code suivant correspond à ce que j’ai écrit jusqu’à présent en utilisant trois js pour essayer de déplacer ou traduire un objet de cube en rotation vers le haut, le bas, la gauche et la droite à l’aide des touches WASD, puis de revenir à la position initiale (milieu de la fenêtre). écran) avec la barre d'espace. Je suis très nouveau à trois js et je ne peux pas comprendre comment faire fonctionner le mouvement. Toute aide serait grandement appréciée. Voici ce que j'ai jusqu'à présent:

    // first 5 lines are a template and should be pretty much the same always
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// end template here

var geom = new THREE.BoxGeometry(10, 10, 10);
var mat = new THREE.MeshBasicMaterial({color: "red"});
var cube = new THREE.Mesh(geom, mat);

scene.add(cube);
camera.position.x = 2;
camera.position.y = 1;
camera.position.z = 20;

var light = new THREE.AmbientLight( 0x404040 ); // soft white light
scene.add( light );

// White directional light at 70% intensity shining from the top.
var directionalLight = new THREE.DirectionalLight( 0xffffff, 0.7 );
scene.add( directionalLight );

// movement
document.addEventListener("keydown", onDocumentKeyDown, false);
function onDocumentKeyDown(event) {
    var keyCode = event.which;
    // up
    if (keyCode == 87) {
        cube.position.y += 1;
        // down
    } else if (keyCode == 83) {
        cube.position.y -= 1;
        // left
    } else if (keyCode == 65) {
        cube.position.x -= 1;
        // right
    } else if (keyCode == 68) {
        cube.position.x += 1;
        // space
    } else if (keyCode == 32) {
        cube.position.x = 0.0;
        cube.position.y = 0.0;
    }
    render();
};

var render = function() {
  requestAnimationFrame(render);
  cube.rotation.x += 0.03;
  cube.rotation.y += 0.02;
  cube.rotation.z += 0.01;
  renderer.render(scene, camera);
};

render();

Ceci est juste le fichier javascript. J'ai aussi un fichier HTML séparé pour lancer. Voici le HTML:

<html><head><title>WebGL with three.js</title>
<style>
  body { margin: 0; }
  canvas { width: 100%; height: 100% }
</style>
</head><body>
<script src="three.js"></script>
<script src="Learn_Cube3.js"></script>
</body></html>
javascriptjavascript-eventsthree.jsevent-handlingkeyboard-events
4
Teej

Que dis-tu de ça ? -

// movement - please calibrate these values
var xSpeed = 0.0001;
var ySpeed = 0.0001;

document.addEventListener("keydown", onDocumentKeyDown, false);
function onDocumentKeyDown(event) {
    var keyCode = event.which;
    if (keyCode == 87) {
        cube.position.y += ySpeed;
    } else if (keyCode == 83) {
        cube.position.y -= ySpeed;
    } else if (keyCode == 65) {
        cube.position.x -= xSpeed;
    } else if (keyCode == 68) {
        cube.position.x += xSpeed;
    } else if (keyCode == 32) {
        cube.position.set(0, 0, 0);
    }
};

Pour déplacer un objet, vous devez en modifier la position. De plus, calibrez les xSpeed et ySpeed selon vos besoins.

5
Rasheduzzaman Sourov

Relancez votre méthode de rendu dans votre événement clé en bas:

function onDocumentKeyDown(event) {
    ...
    render();
};

Le problème était que vous mettiez à jour les valeurs, mais ThreeJS ne re-rend pas automatiquement la vue lorsque les choses changent, vous devez lui indiquer de re-rendre.

Edition: dans votre méthode de rendu, vous ne modifiez que les propriétés de rotation, le cube ne fera donc que pivoter. Vous devez également indiquer à ThreeJS la nouvelle position du cube.

Je ne pense pas que votre solution de "xSpeed" et "ySpeed" fonctionnera, vous devez en fait ajouter/soustraire des valeurs position.x et position.y.

0
dzylich