Currently, I have a simple object rendered using the GLTFLoader. However, I would like to know how to move the object using keyboard inputs. Below is the current code. (I’m sorry, I don’t know how to format it properly.)
<html>
<head>
<title>Brick Game</title>
<style>
body { margin; 0; }
canvas { width: 100%; height 100%; };
</style>
</head>
<body>
<script src="js/three.min.js"></script>
<script src="js/GLTFLoader.js"></script>
<script>
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
const light = new THREE.PointLight(0xFFFFFF);
const boxGeometry = new THREE.BoxGeometry(20, 20, 20);
const basicMaterial = new THREE.MeshNormalMaterial({color: 0x0095DD});
const cube = new THREE.Mesh(boxGeometry, basicMaterial);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0xDDDDDD, 1);
document.body.appendChild(renderer.domElement);
const loader = new THREE.GLTFLoader()
loader.load('/models/brick1.glb', (loadedModel) => {
scene.add(loadedModel.scene)
console.log('model loaded!')
})
// Draw.
function render()
{
requestAnimationFrame(render);
renderer.render( scene, camera );
camera.position.z = 50;
scene.add(camera);
//scene.add(cube);
light.position.set(-10, 15, 50);
scene.add(light);
}
render();
function animate()
{
requestAnimationFrame(animate);
// cube.rotation.x += 0.02;
// cube.rotation.y += 0.02;
renderer.render(scene, camera);
}
animate();
</script>
</body>