Почему моя игровая камера контролирует глюк / не работает ⇐ Javascript

[Anonymous]

Я сделал игру, и все работает, за исключением случаев, когда я перемещаю камеру с моей мышью, на мой взгляд, все дублирует. Я вижу быстро чередующуюся версию, чередующуюся между моим оригинальным представлением камеры и моим новым представлением камеры. , но это не работает. Вот мой сломанный код до сих пор: < /p>





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

Подробнее здесь: https://stackoverflow.com/questions/794 ... h-not-work