Tips for addressing lag problems in my Three.js game as time progresses

My game in Three.js doesn't start off with any lag, but after a few minutes, the performance begins to slow down on computers running it. I've tried reviewing my code and checking my arrays, adjusting values to troubleshoot, but so far, nothing seems to work!

// cloud and skeleton spawning
for(i = 0; i < 100; i++){
    makeCloud()
}

for (i = 0; i < 30; i++){
    makeSkeleton()
}

// render function
function render() {
      requestAnimationFrame(render);
      renderer.render(scene, camera);
      // skybox position update
      skybox.position.set(player.position.x + 125, player.position.y + 125, player.position.z + 125);
      // camera positioning
      camera.position.set(player.position.x, player.position.y - 1, player.position.z);
      // other functions called...
}
render()

// various functions for distance, collision, barriers, cloud creation, etc...

// expected and actual results
<p>My expected results after changing values of arrays and making the map smaller was that the lag issue would stop.</p>

<p>My actual results was just lag.</p>


Answer №1

One important aspect to consider is the readability and conciseness of your code, as mentioned by others. It's best to keep it organized in small, manageable chunks to make it easier for others to understand and assist you. It's also helpful to indent your code and use semi-colons ; for better readability.


Now, let me shed some light on a possible reason behind the issue you're facing.

It appears that your code is incomplete, with certain parts missing, which complicates the debugging process. The issue might be related to a memory leak, where you're continuously adding objects to the scene without removing them.

Within your main update function render(), which is called every frame, you seem to be indefinitely adding barriers to the scene. This results in lag because the scene and memory are constantly being filled with more information without any objects being cleared.

To resolve this issue, you should track the objects in the scene, remove them when necessary, and call .dispose() to free up memory. This should help alleviate the lag.

However, without more details on the problem, it's challenging to pinpoint the exact issue. Consider updating your original post with any missing information to make it more comprehensible, and I'll be happy to revise this response accordingly.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Instructions for printing a page and closing the Print window using Selenium

New to using Selenium: I tried the following code in Selenium to open the print window, but unfortunately it doesn't seem to work Keyboard keyboard = ((HasInputDevices)driver).getKeyboard(); keyboard.pressKey(Keys.ENTER); keyboard.pressKey(Keys.ch ...

Why is my NextJs app loading slowly on Safari but quickly on Chrome?

Currently, I am in the process of developing a web app using nextjs. I have encountered some issues with linking to pages, particularly the home page which contains multiple svgs and images. The performance lags when using Safari, as it does not show a loa ...

Make sure the page preloader is visible before any other content is loaded

Currently, I am working on a straightforward preloader page that remains visible until the main content of the page is completely loaded. Despite the functionality of the loading page, my main concern lies in the quick display of the main content before th ...

The issue of array sorting, specifically the function(a, b) {return b.value - a.value), is causing some

I am struggling to retrieve data from firebase and sort them according to the field 'overallScore' in descending order. Despite following suggestions like using array.sort(function(a, b) {return b.value - a.value), I have not been successful in s ...

Having issues with the Email type in the JQuery Validation Plugin?

Recently, I set up a Grunt file to consolidate all my libraries and code into a single JS file for inclusion in my website. However, after adding the JQuery Validate plugin (http://jqueryvalidation.org/), I noticed that it's not working as expected. I ...

Accessing a JavaScript variable in another <script> section

I'm facing a challenge where I need to access a JavaScript variable that is declared in one block of an HTML page from another block on the same page. This is crucial for me to be able to halt an AJAX call that is currently ongoing. However, I'm ...

When converting to a React Functional Component using Typescript, an error occurred: The property 'forceUpdateHandler' could not be found on the type 'MutableRefObject<Spinner | null>'

Looking to convert the App component in this CodePen into a Functional component using Typescript. Encountering an error when attempting to run it: ERROR in src/App.tsx:13:14 TS2339: Property 'forceUpdateHandler' does not exist on type 'Mu ...

Implementing a long press feature for a stopwatch in React

I'm facing a dilemma with this particular issue. Before reaching out here, I scoured the community and found numerous solutions for handling long press events in React, but they all seem to focus on click button events. Currently, I am devising a sto ...

React fails to acknowledge union types

I have the following types defined: export enum LayersItemOptionsEnum { OPERATOR, HEADER, } type sharedTypes = { children: string | ReactElement; }; type LayersItemStatic = sharedTypes & { label: string; option: LayersItemOptionsEnum; }; t ...

Tips for creating animations with JavaScript on a webpage

I created a navigation bar for practice and attempted to show or hide its content only when its title is clicked. I successfully toggled a hidden class on and off, but I also wanted it to transition and slide down instead of just appearing suddenly. Unfort ...

Using HTML5 video with cue points and stop points

I've noticed that there are various options available for implementing cuepoints in HTML5 videos, such as using PopcornJS or CuepointsJS to trigger play events at specific times within the video track. However, I am wondering if there is a solution t ...

Best Method for Updating a Single Scope and Setting the Others to False in AngularJS

If I have 4 fields in my view that need to be toggled open or closed when clicked, with the requirement of closing the other three, how can this be achieved without duplicate code? <div class="square red"></div> <div class="square blue"> ...

A guide on utilizing Puppeteer for capturing screenshots of web pages with embedded videos

Currently, I am using Puppeteer to access a website and capture a screenshot of a video. Unfortunately, the default Chromium browser that Puppeteer uses does not support certain video types. I have managed to get it working by launching Puppeteer with a l ...

Issue encountered while attempting to send an HTML file using express.js

I have been trying to display an HTML file using Express.js with a static __dirname, but the HTML content does not show up after calling localhost/ var express = require('express'); var web = express(); ...

Transitioning images smoothly and responsively with jQuery, creating a beautiful

Hey there! I'm looking for some help with transforming this jQuery effect. Instead of having fixed sized images, I want to set the size in percentage (width:100%; height:auto) so they can be responsive. Any creative ideas or suggestions? <scri ...

What causes a syntax error when trying to create an array of objects within a map using colons?

In my Google Apps Script, I created a function to retrieve the date and subject of emails with a specific label in Gmail. However, when attempting to store each result as an object, I encountered a SyntaxError: unexpected token ':' issue. Althoug ...

Mocking in AngularJS: Utilizing the same service with varied functions for unit testing with Jasmine

Exploring a new service, Service A, with various functionalities: The snippet of application code is as follows: angular.module('app').factory('ServiceA', function() { var ServiceA = { _retryItem: null, retryItem: ...

JavaScript module encounters an uncaught error: Attempting to assign a value to a constant variable

In another module, I defined a variable in the following manner: // module1.js let directory; export { directory }; Now, I am trying to access it in a separate module like so: // module2.js import { directory } from '../js/module1.js'; directo ...

Uploading multiple files simultaneously in React

I am facing an issue with my React app where I am trying to upload multiple images using the provided code. The problem arises when console.log(e) displays a Progress Event object with all its values, but my state remains at default values of null, 0, and ...

Mapping an array based on specific conditions

When using my photo gallery app, I faced a challenge in mapping an array of images based on the user-selected album name. The current setup works perfectly for the 'Cambodia' album where all images are correctly logged in the console after mappin ...