My friend and I have been collaborating on a university assignment - creating a basic Pacman clone using ThreeJS (which is a requirement). From the start, we've encountered a persistent issue. As our scene continues to run, it progressively speeds up with each passing second. Strangely, there isn't a decrease in the amount of content being rendered; everything remains consistent.
import * as THREE from '././../three.js-master/build/three.module.js';
function main() {
const canvas = document.querySelector('#canva');
const renderer = new THREE.WebGLRenderer({ canvas });
renderer.setSize(window.innerWidth, window.innerHeight);
/* Camera */
const fov = 40;
const aspect = window.innerWidth / window.innerHeight;
const near = 0.1;
const far = 1000;
const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
// The goal is to achieve an angled perspective that displays depth while keeping all significant elements visible
camera.position.set(0, 65, -45);
camera.up.set(0, 0, 1);
camera.lookAt(0, 0, 0);
const scene = new THREE.Scene();
/* Lights */
const mainLight = new THREE.DirectionalLight(0xffffff, .85);
mainLight.position.set(0, 20, 0);
scene.add(mainLight);
mainLight.castShadow = true;
mainLight.shadow.mapSize.width = 2048;
mainLight.shadow.mapSize.height = 2048;
/* Additional code for board, player, enemies, collectibles, walls, points update, collision checking, etc.
This section involves setting up various elements within the game environment */
function render(time) {
/* Rendering logic with resize handling, updating object positions, handling user input, rendering the scene, etc. */
requestAnimationFrame(render);
}
requestAnimationFrame(render);
}
main();