var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(0, 10, 5);
camera.lookAt(scene.position);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
var boxGeom = new THREE.BoxBufferGeometry(1, 1, 3);
boxGeom.translate(0, 0, 2.5);
var box = new THREE.Mesh(boxGeom, new THREE.MeshNormalMaterial());
box.rotation.y = Math.PI * 0.5;
scene.add(box);
window.addEventListener("keydown", onKeyDown, false);
function onKeyDown(event) {
if (![65, 68, 83, 87].includes(event.keyCode)) return;
var angleTo = 0;
switch (event.keyCode) {
case 87:
angleTo = Math.PI;
break;
case 65:
angleTo = Math.PI * -0.5;
break;
case 83:
angleTo = 0;
break;
case 68:
angleTo = Math.PI * 0.5;
break;
}
startTween(angleTo);
}
function startTween(angleTo) {
let tween = new TWEEN.Tween(box.rotation).to({
y: angleTo
}, 250).onStart(() => {
window.removeEventListener("keydown", onKeyDown, false);
}).onComplete(() => {
window.addEventListener("keydown", onKeyDown, false)
});
tween.start();
}
renderer.setAnimationLoop(() => {
TWEEN.update();
renderer.render(scene, camera);
})
body {
overflow: hidden;
margin: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/100/three.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tween.js/17.2.0/Tween.min.js"></script>