Kann mir jemand bei dem TPS (Third Person shooter) Code helfen?
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>
1 Antwort
Wozu hat man so etwas wie eine Dokumentation?
Wenn man die Installationsanweisungen befolgt wird schon mal was angezeigt.
Zusammenfassung:
1. Füge in den head Bereich folgendes ein:
<script type="importmap">
{
"imports": {
"three": "https://unpkg.com/three@0.161.0/build/three.module.js"
}
}
</script>
2. Setzte dem type deines Hauptskriptes auf module:
<script type="module">
3. Schreibe am Anfang des Hauptskriptes folgendes
import * as THREE from 'three';
Es wäre hilfreich wenn du zukünftig bei so etwas noch die Ausgabe der Konsole mit Posten würdest, da jetzt nicht ganz klar ist wo jetzt der Fehler bei dir lag. Außerdem würde das die Lösung des Problem deutlich vereinfachen.
Da ich mich nicht weiter in dem Thema auskenne kann ich dir leider nicht weiter helfen. Tipp: Wenn eine Bibliothek eine Dokumentation hat sollte man diese auch nutzen.
lg Suiram1