I have made a game, and everything works, except when I move the camera with my mouse, everything duplicates in my view. I see a quickly alternating version alternating between my original camera view and my new camera view.
I made this code, and I have tried to make the camera update and change it instead of duplicating it, but it doesn’t work. Here is my broken code so far:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D Platformer</title>
<style>
body { margin: 0; }
canvas { display: block; }
</style>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script>
// 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 <= 0) {
player.position.y = 0;
onGround = true;
}
// AI random movement and jumping
ai.position.add(aiDirection.clone().multiplyScalar(aiSpeed));
if (Math.random() < 0.05 && aiOnGround) { // Increased jump frequency
aiVelocityY = aiJumpSpeed;
aiOnGround = false;
}
ai.position.y += aiVelocityY;
aiVelocityY -= 0.01; // Gravity effect
if (ai.position.y <= 0) {
ai.position.y = 0;
aiOnGround = true;
}
// Avoid getting stuck with AI
var distance = player.position.distanceTo(ai.position);
if (distance < 1) {
var pushDirection = new THREE.Vector
Vector3().subVectors(player.position, ai.position).normalize();
player.position.add(pushDirection.multiplyScalar(0.1));
}
// Position camera
camera.position.set(player.position.x, player.position.y + 1.5, player.position.z);
camera.lookAt(player.position.x + Math.sin(camera.rotation.y), player.position.y + 1.5, player.position.z - Math.cos(camera.rotation.y));
renderer.render(scene, camera);
}
animate();
</script>
</body>
</html>
