Enhancing efficiency with Three.js for my time management script

After testing out the threejs library with a project (link: ), I noticed that the performance was quite poor. Any suggestions on how to improve it?

The main components of my experiment include a timeFont class for generating instances, camera initialization, scene setup, lighting, and renderer configuration. Instances are deleted when they move out of the scene.

I'm unsure what's causing the resource consumption - is it the fonts, frequent text updates, or limitations of the library itself.

Below is the source code snippet:

// timeFont class
class timeFont {
    // constructor and methods here...
};

// global variables and functions
var container;
var camera, cameraTarget, scene, renderer;

var windowHalfX = window.innerWidth / 2;

var instances = [];

var frameRate = 5;
document.getElementById("setFrameRate-Input").value = frameRate;

var instanceCreationTime = 1;
document.getElementById("setInstanceCreation-Input").value = instanceCreationTime;

// Initialization and animation functions included as well.

Note: The script has been updated on my website link mentioned above. Now, I only update the text every second if seconds are displayed, but the performance issue persists.

Answer №1

Your application is facing an issue with the excessive allocation of geometries over time. When removing objects from the scene, it appears that you are forgetting to call dispose() in order to release internal resources.

The removal of objects occurs at two specific points:

  • Within the updateText() function using
    this.group.remove(this.textMesh1);
  • In the updatePosition() function via this.scene.remove(this.group);

To properly free the material and geometry in the updateText() function, consider utilizing this code snippet:

this.textMesh1.geometry.dispose();

if ( Array.isArray( this.textMesh1.material ) === true ) {

    for ( let material of this.textMesh1.material ) material.dispose();

} else {

    this.textMesh1.material.dispose();

} 

For handling object disposal within the updatePosition() function, implement this general approach:

this.group.traverse( function( object ) {

    if ( object.isMesh ) {

        object.geometry.dispose();
        // dispose material as shown above

    }

} );

You may also find more information on memory management in the official guide linked below:

How to dispose of objects

Furthermore, consider loading your fonts just once at the start and then reusing them to prevent significant frametime spikes caused by parsing overhead during animations.

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

The function is not being called as expected when using `onclick` or `eventListener('click')`

I'm in the process of developing a login form for my website that will offer 2 options - "login" and "signup". The concept is similar to mini tabs and iframe windows. Essentially, I have two divs side by side for "login" and "signup". When the user cl ...

Incorporating append and clone through a loop with jQuery

Is there a way to properly order div elements generated using .append() and .clone methods in a for loop? Despite creating the initial div before the loop, the order seems to be incorrect. The first div (class news0) is being displayed after the last div ( ...

Issues with Vue.js input values failing to update after data modifications

Recently delving into the world of Vue.js, I've encountered some obstacles with reactive datasources in Vue.js. My goal is to code a function that can add and remove a row containing a textfield and a textarea within the parent element. Your code sh ...

Is there a solution for the issue of delta time changing when switching tab values?

After switching tabs for 5-10 seconds and then returning, the value changes as a result of the fps dropping to 8fps before returning to normal. How can this issue be resolved? https://i.sstatic.net/2FKpw.png ...

I'm looking to retrieve the selected value from my autocomplete box in React using the Material UI library. How can I

Here is a snippet of code that utilizes an external library called material ui to create a search box with autocomplete functionality. When a value is selected, an input tag is generated with the value "selected value". How can I retrieve this value in ord ...

Is it possible to exchange meshes across different scenes in three.js?

Can meshes or geometry be shared across scenes? I am facing an issue where I have multiple scenes that require the same large meshes, but attempting to share these meshes between scenes results in WebGL context errors. It seems like certain variables are ...

Tips for attaching event listeners to custom elements

Let's suppose I create a Vue component called Checkbox.vue that contains the following code. <template> <div class="checkbox"> <input id="checkbox" type="checkbox"> <label for="checkbox">Label</label> ...

Currently experiencing difficulties while attempting to create a Simon game in JavaScript. Seeking assistance to troubleshoot the issue

var buttonColor = ["red", "blue", "green", "yellow"]; var userClickedPattern = []; var gamePattern = []; var totalKey = []; var level = 0; $("*").on("keydown", function(m) { var key = m.key; totalKey.push(key); var keyLength = totalKey.leng ...

Tips for managing mouse over events in legends on highcharts

I have successfully implemented mouseover/mouseout event handling for donut slices. Please review my code below: http://jsfiddle.net/nyhmdtb8/6/ Currently, when I hover over a slice, it highlights that slice and greys out all others. Is it possible to ac ...

steps to verify the status of a sent request

I am utilizing the contenteditable property in a p tag. My code is as follows: <p contenteditable="true" id="Option1_<?php echo $i ?>" style="width:98%;border:4px thin black; background-color:#D6D6D6;font-size:18px;color:black;padding:3px ">&l ...

Checking for collisions among numerous elements in JS: An insightful guide

I have created 40 images with random positions, however, some of them collide in certain cases. My question is how to prevent collisions and assign new positions if they do occur? Below is my code along with comments for clarity. $( document ).ready(fun ...

Having trouble decoding JWE using the NPM Jose library

Although I can successfully decrypt a JWE using an older version of jose, I'm facing difficulties in utilizing the latest version API. The headers of my token are as follows: { "alg": "A128KW", "enc": "A128CBC-H ...

req.body is not defined or contains no data

I am facing an issue with my controllers and routers. bookController.js is functioning perfectly, but when I try to use userControllers for registration and login logic, req.body always appears empty. I tried logging the form data using console.log, but it ...

Is there a way for me to identify the vertical gaps in my code using JavaScript?

Within this specific HTML document, there are multiple div elements that have an absolute positioning applied to them I am looking to develop a JavaScript code that can determine the row of each individual div. I define a row as any space on the vertical ...

At what times should we utilize the renderer.outputEncoding = THREE.sRGBEncoding setting?

As a newcomer to three.js, I have been immersing myself in the world of three.js by creating simple scenes and delving into the official examples to gain a better understanding. Lately, I have been exploring , but I'm puzzled by the necessity of usin ...

Using Vue.js to make an AJAX request to an API that returns a list in JSON format

I am attempting to utilize an AJAX call with the free API located at that returns a list in JSON format. My goal is to display the result on my HTML using Vue.js, but unfortunately, it doesn't seem to work as expected. This is my JavaScript code: va ...

Generating unique identifiers and names for duplicated input fields in a form, which change dynamically

Innovative approach: When dealing with multiple replicated inputs, changing the id and name attributes can be a hassle. How can we ensure that each input remains unique, especially in a real project with several inputs like component_date and component_own ...

How can I remove ASCII characters from an ajax response?

Experimenting with the API found at , but encountered an issue with properly formatting the received string. The string looks like this: Communication that doesn&#8217;t take a chance doesn&#8217;t stand a chance. The original response includes a ...

User retrieval failed following successful passport authentication

After a successful authentication, the user is directed to the "/profile" route, as demonstrated in the code snippet below. app.get( "/auth/google/callback", passport.authenticate("google", { successRedirect: "/profile", failureRedirect: " ...

What is the best way to transfer a JavaScript variable to a PHP file and then store it in a PHP variable?

I am working on a webpage that displays multiple images, each of which can be replaced by another image in the same location. Adjacent to each image is a form where users can upload the new image. One important requirement is that the newly uploaded image ...