I'm currently working on a three.js project where I want to create a block that moves when different keys are pressed. I've managed to set up a functional event listener, used console.log() for checking purposes, and successfully moved the block individually. However, when I try to combine everything together, the block doesn't seem to move. I even attempted to continuously loop the code responsible for moving the block to confirm if it responds to commands, but the block still remained stationary with the __dirtyPosition set to true.
As someone with decent programming experience, I've developed multiple operational programs similar to this one in the past. Despite comparing them side by side, I can't pinpoint what exactly is causing this issue in my current project.
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);
Is there something crucial I may have overlooked?