Warum funktionieren meine Drei.JS -Spielkamera -steuert Panne / funktioniert nicht? ⇐ JavaScript

[Anonymous]

Ich habe ein Spiel gemacht, und alles funktioniert, außer wenn ich die Kamera mit meiner Maus bewege, doppelt alles aus meiner Sicht. Ich sehe eine schnell wechselende Version, die zwischen meiner ursprünglichen Kameraansicht und meiner neuen Kameraansicht abwechselt. , aber es funktioniert nicht. Hier ist mein bisher gebrochener Code: < /p>

Code: Select all

3D Platformer

body { margin: 0; }
canvas { display: block; }





// Create a scene
var scene = new THREE.Scene();

// Create a camera with increased FOV
var camera = new THREE.PerspectiveCamera(90, window.innerWidth / window.innerHeight, 0.1, 1000);

// Create a renderer
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// Create a large platform
var platformGeometry = new THREE.BoxGeometry(20, 1, 20);
var platformMaterial = new THREE.MeshBasicMaterial({ color: 0xaaaaaa });
var platform = new THREE.Mesh(platformGeometry, platformMaterial);
platform.position.y = -1;
scene.add(platform);

// Create a player
var playerGeometry = new THREE.BoxGeometry(1, 1, 1);
var playerMaterial = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
var player = new THREE.Mesh(playerGeometry, playerMaterial);
scene.add(player);

// Create additional cubes
var cubeGeometry = new THREE.BoxGeometry(1, 1, 1);
var cubeMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000 });
for (var i = 0; i < 5; i++) {
var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
cube.position.set(Math.random() * 18 - 9, 0.5, Math.random() * 18 - 9);
scene.add(cube);
}

// Create an AI that runs around randomly
var aiGeometry = new THREE.BoxGeometry(1, 1, 1);
var aiMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000 });
var ai = new THREE.Mesh(aiGeometry, aiMaterial);
ai.position.set(0, 0.5, -5); // Initial position
scene.add(ai);

// AI movement variables
var aiSpeed = 0.05;
var aiDirection = new THREE.Vector3(Math.random() * 2 - 1, 0, Math.random() * 2 - 1).normalize();
var aiJumpSpeed = 0.2;
var aiVelocityY = 0;
var aiOnGround = true;

// Player controls
var playerSpeed = 0.1;
var jumpSpeed = 0.2;
var velocityY = 0;
var onGround = true;

var keys = {
w: false,
a: false,
s: false,
d: false,
space: false
};

window.addEventListener('keydown', function(event) {
if (keys.hasOwnProperty(event.key)) keys[event.key] = true;
});

window.addEventListener('keyup', function(event) {
if (keys.hasOwnProperty(event.key)) keys[event.key] = false;
});

// Mouse controls
var mouse = {
isDragging: false,
previousX: 0,
previousY: 0,
deltaX: 0,
deltaY: 0
};

document.addEventListener('mousedown', function(event) {
mouse.isDragging = true;
mouse.previousX = event.clientX;
mouse.previousY = event.clientY;
});

document.addEventListener('mouseup', function() {
mouse.isDragging = false;
});

document.addEventListener('mousemove', function(event) {
if (mouse.isDragging) {
mouse.deltaX = event.clientX - mouse.previousX;
mouse.deltaY = event.clientY - mouse.previousY;

camera.rotation.y -= mouse.deltaX * 0.002;
camera.rotation.x -= mouse.deltaY * 0.002;

camera.rotation.x = Math.max(-Math.PI / 2, Math.min(Math.PI / 2, camera.rotation.x));  // Prevent flipping

mouse.previousX = event.clientX;
mouse.previousY = event.clientY;
}
});

// Animation loop
function animate() {
requestAnimationFrame(animate);

// Player movement
if (keys.w) player.position.z -= playerSpeed;
if (keys.a) player.position.x -= playerSpeed;
if (keys.s) player.position.z += playerSpeed;
if (keys.d) player.position.x += playerSpeed;

// Prevent jumping off the edge
player.position.x = Math.max(-9.5, Math.min(9.5, player.position.x));
player.position.z = Math.max(-9.5, Math.min(9.5, player.position.z));

// Player jumping
if (keys.space && onGround) {
velocityY = jumpSpeed;
onGround = false;
}

player.position.y += velocityY;
velocityY -= 0.01; // Gravity effect

if (player.position.y