What methods can be used to boost performance while loading models in three.js?

Currently, I am facing a challenge with loading .stl files into my viewer. My goal is to utilize the orbit controls provided by three.js to enable users to navigate around the file and view it from various perspectives. While the models do load successfully, the performance of orbiting around the object is sluggish, even on high-performance systems. Additionally, the speed decreases the longer the viewer remains active.

What steps can I take to enhance the overall performance of the viewer?

Unfortunately, due to the setup of my site, I am unable to create a jsFiddle or use Codepen for this particular issue. However, you can access the live version of my project at ethanhammond.github.io, and review the code on github.com/ethanhammond/ethanhammond.github.io.

This is my first experience working with three.js, so there may be some errors in my code as a result.

javascriptthree.js

Answer №1

Here is the issue you're facing:

The problem lies in this line of code:
orbitControls.addEventListener( 'change', renderScene );

Every time the orbit controls are changed, a new render loop is initiated. This leads to multiple render loops running simultaneously. To solve this, you should move that line of code inside your renderScene function like so:

orbitControls.update();

You can refer to the official examples for more guidance: misc_orbit_controls. In those examples, it is mentioned:

//controls.addEventListener( 'change', render ); // add this only if there is no animation loop (requestAnimationFrame)

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 session data is not persisting in the express-session package

I am currently learning about HTTPS and working on implementing a login/logout function. In this function, I store the userId in the session when I login using the POST method. However, when I try to retrieve user information for the next components usin ...

javascriptnode.jsexpresssession

Extracting a particular field from a Meteor collection document in a JavaScript file and removing any HTML tags

In my Meteor Collections, I have a group of Projects each with a title and description. My goal is to extract the rich text content from the description field using a Template helper. I attempted the following code snippet to retrieve the description for ...

javascriptjquerymongodbcollectionsmeteor

Encountering an Issue when Registering New Users in Database using Next.js, Prisma, and Heroku

Currently, I am immersed in my inaugural full-stack app development project, which is aligning with an online course. Unfortunately, I have encountered a major stumbling block that has persisted despite hours of troubleshooting. The issue arises when I try ...

javascriptherokunext.jsprismaheroku-postgres

Using Inline Styling to Showcase a Background Image in a REACTJS Component

import React from 'react'; import Slick from 'react-slick'; import style from './Slider.module.css'; import {Link} from 'react-router-dom'; const SliderTemplates = (props) => { let template = null; const ...

javascriptcssreactjs

Unforeseen execution issues arising from repeated Ajax calls with SetTimeout in JavaScript

I have a list of users displayed in an HTML table that is dynamically created on page load. Each row includes an inline button with onclick="functionName(userId)" that triggers the following actions: When clicked, a Bootstrap modal popup is shown and the ...

javascriptjqueryajax

Using a JavaScript variable to be displayed in a PHP code

Can someone please help me troubleshoot this code? I am attempting to display a JavaScript variable in PHP after applying a regex, but I keep getting the error Uncaught TypeError: document.getElementById(...).html is not a function $.post('display.ph ...

javascriptphpajax

What is the best way to utilize state and an object's keys in React to dynamically style components?

I am working with Create React App (CRA) and Axios, and I'm facing a specific challenge. I want to create a basic stock chart that showcases exchange rates. The component should load on mount, make a call to a static API using Axios, and populate the ...

javascriptreactjsobjectaxios

What is the best way to resize an SVG to perfectly fit the parent div container?

I need to display multiple SVGs from various sources, each with different height, width, and viewbox. I want them all to render within a fixed height and width div, filling up the available space. How can I scale these SVGs to fit the container div? For i ...

javascripthtmlcsssvg

Sharing JSON data between components securely without displaying it in the URL through routing

Seeking to pass JSON through routing URL, my code in app.route.ts looks like this: {path: 'calculator', component: CalculatorComponent,data : {some_data : null}}, The code used to route the data is as follows: this.router.navigate(['/home ...

javascriptangular

Approach to Using Bootstrap 4 with Intl-Tel-Input

I've been attempting to integrate intl-tel-input with bootstrap 4, but I'm facing an issue where the placeholder for the input is not showing up. I've tried various solutions found online, but none of them seem to work. Here's my HTML ...

javascripthtmlcssbootstrap-4intl-tel-input

What is the best way to upload an image along with optional information using multer?

How to send a File object from the frontend using React and FormData Output of files https://i.sstatic.net/gp61r.jpg Upon uploading a file, I am able to access the object in Multer and Express-Upload console.log(req.files.productImages) [{ &qu ...

javascriptnode.jsreactjsexpressexpress-fileupload

Ng-Repeat is generating empty list items

When I view this code in my browser, I see two list items, but there is no content displayed within them. The loop seems to be functioning correctly, but the items are not pulling any information from my list. I have revised my submission to accurately re ...

javascriptangularjs

Determine the vertical dimension of a child division once it has been integrated into an HTML document

My goal is to create a website with multiple pages without having to recreate the toolbar for each page. To achieve this, I have created a separate HTML file and CSS file specifically for the toolbar. On each page, I simply import the toolbar using the fo ...

javascripthtmlcssvs-web-site-project

Tips on implementing jQuery autocomplete feature using PHP, MySQL, and Ajax then retrieving the data to be passed to

I've successfully implemented a JavaScript code for my autocomplete search feature. However, the data returned by the search is currently hardcoded in the code snippet below. I'm looking to retrieve the data from MySQL using PHP instead. Could a ...

phpjavascriptmysqlajaxjquery

Starting Array index value at 1 in React js: A step-by-step guide

Is there a way to make the index value start from 1 instead of 0? {props.useraccountListData.useraccountTypeList.map((item, index) => ( {index} ))} The current output is starting from 0, 1, 2. However, I would like it to start from 1, 2, 3... ...

javascriptreactjsjsx

JavaScript script unexpectedly malfunctioning

http://codepen.io/abdulahhamzic/pen/xVMXQa This project is a challenge for me. Trying to place the letters of userWord in five different boxes, I encountered an issue where only every second letter appears when using this JavaScript code. It's puzzli ...

javascripthtmlcss

Incorporate JSON Records into a DynamoDB Table Using nodeJS

I am trying to transfer data from my JSON file to DynamoDB using the following code: var AWS = require("aws-sdk"); var fs = require('fs'); AWS.config.update({ region: "us-west-2", endpoint: "http://localhost:8000" }); var docClient = ...

javascriptnode.jsjsonamazon-web-servicesamazon-dynamodb

Ensure that the control button is pressed during the JavaScript onclick event function

I am looking to create a JavaScript function that checks if the CTRL button is pressed. Here is my PHP code: <tr class="clickable" onclick="gotolink('<?= base_url() . invoices/createinvoice/' . $customer->Id; ?>')"> And here ...

javascriptphphtmlfunction

What is the best method for multiplying two arrays of numbers together using JavaScript?

I have been attempting to create a function that can multiply two arrays of numbers together without using array.join("") * array2.join(""). I have experimented with various methods, such as: var input = [3, 6, 4]; var scalar = 5; var output = input.map(x ...

javascriptarrays

I'm wondering if there is a specialized event for leaving the "select scroller" interface on iOS that is specific to vendors

Recently, I encountered a problem with iOS where tapping on a <select> box triggers the "scroll wheel" interface, pushing the modal being accessed upwards. While this behavior is acceptable, the issue arises when the modal fails to retain its origina ...

javascriptioscssdom