如何使用键盘输入移动三个 JS 立方体？答案

【问题标题】：How do I move a Three JS cube with keyboard input?如何使用键盘输入移动三个 JS 立方体？
【发布时间】：2017-08-14 22:58:13
【问题描述】：

以下代码是我目前使用三个 js 编写的代码，尝试使用 WASD 键上下左右移动或平移旋转的立方体对象，并重置为空格键的原始位置（屏幕中间）。我对三个 js 很陌生，我不知道如何让运动发挥作用。任何帮助将不胜感激。这是我到目前为止所拥有的：

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

这只是 Javascript 文件。我还有一个单独的 HTML 文件可供启动。这是 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>

【问题讨论】：

如果你想改变它的位置，我想你需要在按键后在你的代码中的某处访问cube.position.x/y/z。

标签： javascript three.js event-handling dom-events keyboard-events

【解决方案1】：

这个怎么样？ -

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

要移动对象，您必须更改对象的位置。此外，根据需要校准xSpeed 和ySpeed。

【讨论】：

非常感谢！只有一个问题。出于某种原因，无论我按什么键，立方体旋转得越来越快。位置改变了它应该的方式，但我不确定我的代码的哪一部分导致立方体在任何按键上旋转得更快。
@Tyler 从您的按键事件中移除 render()。

【解决方案2】：

在您的按键事件中重新调用您的渲染方法：

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

问题是您正在更新值，但 ThreeJS 不会在事情发生变化时自动重新渲染视图，您必须告诉它重新渲染。

编辑：在你的渲染方法中，你只是修改了旋转属性，所以立方体只会旋转。您还需要告诉 ThreeJS 立方体的新位置。

我认为您的“xSpeed”和“ySpeed”解决方案行不通，您需要实际添加/减去 position.x 和 position.y 值。

【讨论】：

我在 keydown 内部调用了渲染，但不是按键沿着 x 和 y 滑动立方体，它只会增加旋转速度。我认为问题出在我的 xSpeed 和 ySpeed 变量上，但我不确定。