Asynchronous handling of Three.JS geometry operations

I've been developing a browser-based game that retrieves terrain data from a remote server.

My current implementation involves creating a PlaneGeometry with 100x100 segments based on the received data.

However, when the terrain is added to the game scene, the entire website freezes momentarily, typically lasting around one to two seconds.

Is there a way to make this process asynchronous in order to provide a more seamless gameplay experience?

If so, what steps can I take to achieve this without providing specific code examples?

Answer №1

Absolutely, the key lies in your hands to solve this puzzle. The main reason behind this issue is the transition to the GPU carried out by THREE.WebGLRenderer using gl.bufferData(). When a large amount of geometry is transferred all at once, it can overwhelm the browser causing it to freeze. One workaround is to split the data into smaller batches before adding it to the scene or objects.

This problem typically arises when you invoke render() for the first time with new geometry that has not yet been processed by the renderer in the scene graph.

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

Struggling with integrating API response formatting in React and updating state with the data

This is the content found in the file 'Search.js' import React, { Component } from 'react'; import * as BooksAPI from './BooksAPI' class Search extends Component{ constructor(props){ super(props); this.state={ ...

javascript reactjs

What is the best approach to execute this function repeatedly at specific intervals?

I'm attempting to execute everything inside the checkUser() function, but it's not running at the specified interval. Is there a more efficient way to achieve this? My goal is to verify the address every few minutes. The line const accounts = awa ...

javascript async-await

Is there a way to create a dropdown selection for font families with vue js?

Here is a select element with font families that I want to apply to my texts: <select v-model="focused_font"> <option value="" disabled selected>Font</option> <option v-for="font in available_fonts" ...

javascript css vue.js vuejs2 vue-component

Styling with CSS Variables and Transforming Elements

After conducting thorough research both on this platform and via Google, I have yet to find a solution to my query: "how can CSS variables be utilized in a CSS transform?" Within the HTML header, three CSS variables and their fallback values are declared: ...

javascript html css

Mapping an array using getServerSideProps in NextJS - the ultimate guide!

I'm facing an issue while trying to utilize data fetched from the Twitch API in order to generate a list of streamers. However, when attempting to map the props obtained from getServerSideProps, I end up with a blank page. Interestingly, upon using co ...

javascript next.js

Just starting out with Angular - facing issues with setting up in eclipse

I'm attempting to create a test Angular project in Eclipse by copying the three files from the Angular website https://docs.angularjs.org/api/ng/directive/ngController into my Eclipse project. I initially created it as a static web project and then co ...

javascript angularjs eclipse

Ways to obtain the <a> using the title attribute

Is there a way to remove 3 classes from a specific <a> element that is dynamically generated? The only constant is the title. How can I locate an element based on its title? I've searched online but haven't found exactly what I'm looki ...

javascript jquery css

What is the process for assigning specific tags to specific items within an array?

As I navigate through a list of students, I am encountering an issue with my tag functionality. Currently, when a student adds a tag to their container, it is being added to every student's tags instead of just the intended student. How can I modify t ...

javascript reactjs jsx

Issue with Node/Express: Middleware addition to router does not function as expected

Here is the configuration of my router: app.get('/getReport', (req, res) => { res.send("This is the report"); }); Initially, this router functions properly and successfully displays the message This is the report in the browser However, ...

javascript node.js ecmascript-6

Trouble with submitting a form and showing a success message in AngularJS version 1.6.8

My query submission form consists of fields for name, email, and the actual query. The component includes a controller function with a submit function to handle form submission. To submit user input and display a success message upon submission, I utilize ...

javascript angularjs forms angularjs-1.6 angularjs-forms

Aurelia's numerous applications spread across various pages

Currently, I am in the process of finalizing the initial release of a large-scale website built using PHP (Phalcon), MySQL, and JQuery. The technology stack may be a bit outdated, but it was originally prototyped years ago and due to various circumstances, ...

javascript aurelia

What steps are needed to create a transport directly from the Console?

In my current setup, this is the code I have: const logger = new winston.Logger(); logger.add(winston.transports.Console, { level: environment === 'development' ? 'silly' : 'info', colorize: true, prettyPrint: true }); ...

javascript node.js express winston

Tips for utilizing the simple-peer module within a Node.js environment?

I recently started using Node.js and I'm interested in incorporating the simple-peer module into my application. However, I am struggling to understand how to implement it based on the provided documentation. Are there any resources available that can ...

javascript node.js webrtc

Exploring the possibilities of using React for looping?

I have integrated Dexie.js with React for this specific example. However, the implementation details are not of great importance to me. My main focus is on finding out how to iterate through all objects in my IndexDB database using React. In the code snip ...

javascript reactjs

Implement functionality in JS to track the number of clicks on an element

I am dealing with a ul-list containing an unpredictable number of li-elements, ranging from 2 to 8. My goal is to capture votes using these li-elements and display the vote count on the specific element that was clicked. I have attempted to catch the click ...

javascript jquery

Verification with Express Validator

I am currently using express-validator for validation purposes. At the same time, I am utilizing mongoose for database operations, which also offers built-in validation capabilities. I'm a bit confused about whether I should focus on using express-val ...

node.js validation express asynchronous express-validator

Updating multiple subdocuments with Mongoose

My goal is to update a specific subdocument called addresses (which is working fine) and then update all other subdocuments except the one that was just changed. Whenever an address is changed to have is_preferred set to true, I need to update the previous ...

javascript node.js mongodb express mongoose

Schema-specific conditions for JSON data

I have been experimenting with the if-then-else statement in JSON, but I am encountering some issues with it. { "type": "object", "minProperties": 2, "maxProperties": 2, "properties": { "human": { "enum": [ "Kids", "Ad ...

javascript arrays json if-statement

What are some ways to find your way without using the Navigator app?

Navigator.js const App = createStackNavigator({ screenA: { screen: ScreenA }, screenB: { screen: ScreenB } }) const Navigator = createAppContainer(App); export default Navigator; App.js return ( <SafeAreaView> <Provider store={ ...

javascript reactjs react-native react-navigation onesignal

Tips for sending <p> data to a router function with HTML

I am currently working on a page where users are presented with a list of unverified accounts, each containing its own form element. Each form has a "submit" button that triggers a POST call to /verify. However, I am facing an issue where the data within t ...

javascript html node.js express handlebars.js

JavaScripter Q&A