告诉我，为什么Three.js对象不移动？

Question

I am trying to create a three.js block that will move when I press different keys. I have been successful with creating a functional eventListener , checking using console.log() , and also been successful with moving my block, but when I put both together, the block doesn't move. I've also tried using the successful block moving code and looping it so I can see that it moves on command, and the block has __dirtyPosition set to true, but even that didn't move it.

I'm a fairly experienced programmer, and have created many working programs like this one, but for some reason it just isn't working, even though I've compared it to my working programs and nothing's different.

var block1 = new Physijs.ConvexMesh(
  new THREE.CubeGeometry(5, 5, 5),
  new THREE.MeshBasicMaterial({color: 0x444444})
);
block1.position.set(0, 0, 0);
block1.__dirtyPosition = true;
scene.add(block1);

the eventListener :

document.addEventListener("keydown", function(event) {
  var code = event.keyCode;
  //a, s, w, d respectively
  if (code === 65) block1.translateX(-3);
  if (code === 83) block1.translateY(-3);
  if (code === 87) block1.translateY(3);
  if (code === 68) block1.translateX(3);
});

and the renderer :

Top of the code:

var renderer = new THREE.CanvasRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

Bottom of the code:

renderer.render(scene, camera);

Am I missing anything?

Answer 1

Thanks to @Radio, I realized I had completely forgotten to loop the renderer. I just changed this

renderer.render(scene, camera);

to

function animate() {
  renderer.render(scene, camera);
  setTimeout(animate, 20);
}
animate();