Hallo Ich wollte ein einfaches TPS Spiel erstellen, aber bei diesem Prototyp Zeigt es mir in VSC keinen Fehler an, aber wenn ich es mit Google oder einem Live Server öffne kommt nur eine weißer Bildschirm:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Third Person Shooter</title>
<style>
body { margin: 0; }
canvas { display: block; }
</style>
</head>
<body>
<script src="js/three.module.min.js"></script>
<script>
var scene, camera, renderer;
var player, playerControls;
var moveForward = false;
var moveBackward = false;
var moveLeft = false;
var moveRight = false;
init();
animate();
function init() {
scene = new THREE.Scene();
// Player
var geometry = new THREE.BoxGeometry();
var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
player = new THREE.Mesh(geometry, material);
scene.add(player);
// Camera
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
playerControls = new PlayerControls(player, camera);
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
document.addEventListener('keydown', handleKeyDown);
document.addEventListener('keyup', handleKeyUp);
window.addEventListener('resize', onWindowResize, false);
}
function animate() {
requestAnimationFrame(animate);
playerControls.update();
renderer.render(scene, camera);
}
function handleKeyDown(event) {
switch (event.key) {
case 'w':
moveForward = true;
break;
case 's':
moveBackward = true;
break;
case 'a':
moveLeft = true;
break;
case 'd':
moveRight = true;
break;
}
}
function handleKeyUp(event) {
switch (event.key) {
case 'w':
moveForward = false;
break;
case 's':
moveBackward = false;
break;
case 'a':
moveLeft = false;
break;
case 'd':
moveRight = false;
break;
}
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
// PlayerControls class to handle player movement
function PlayerControls(player, camera) {
this.player = player;
this.camera = camera;
this.speed = 0.1;
this.update = function() {
var movement = new THREE.Vector3();
if (moveForward) movement.z -= this.speed;
if (moveBackward) movement.z += this.speed;
if (moveLeft) movement.x -= this.speed;
if (moveRight) movement.x += this.speed;
this.player.translateX(movement.x);
this.player.translateZ(movement.z);
// Update camera position and look at the player
var offset = new THREE.Vector3(0, 5, -10);
var playerWorldPosition = new THREE.Vector3();
this.player.getWorldPosition(playerWorldPosition);
this.camera.position.copy(playerWorldPosition.clone().add(offset));
this.camera.lookAt(playerWorldPosition);
};
}
</script>
</body>
</html>
