Hello there! Greetings to everyone :-)
I apologize if my question isn't very interesting. I recently started coding, so I believe my issue is quite basic. I created a 3D city using Three.js with the help of Isaac Sukin's book titled "Game Development with Three.js".
The creation part was simple. But when I attempted to add movement options, I couldn't succeed. Here is the code that is working:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
body {
background-color: #ffffff;
margin: 0;
overflow: hidden;
}
</style>
</head>
<body>
<script src="http://cdnjs.cloudflare.com/ajax/libs/three.js/r57/three.min.js">
</script>
<script src="FirstPersonControls.js"></script>
<script>
var camera, scene, renderer, light;
var clock, controls;
function setup() {
document.body.style.backgroundColor = '#00BFFF';
setupThreeJS();
setupWorld();
requestAnimationFrame(function animate() {
renderer.shadowMapEnabled = true;
renderer.shadowMapSoft = true;
renderer.render(scene, camera);
controls.update(clock.getDelta());
requestAnimationFrame(animate);
});
}
function setupThreeJS() {
// Code for setting up Three.js environment
}
function setupWorld() {
// Code for setting up the 3D world
}
setup();
</script>
</body>
</html>
Displayed below is a screenshot with the directory containing my firstattempt.html and FirstPersonControls.js files.
The FirstPersonControls.js file was obtained from three.js/examples/js on github dot com.
The problem arises when I view my city in the browser as it "loses" its texture (as seen in the initial screenshot) and keyboard movements do not work. Additionally, I encountered this error in the Developer tools:
I would greatly appreciate any assistance. I suspect the issue may lie in how I am using the FirstPersonControls.js file? Please forgive my limited knowledge of JavaScript :-(