What is the function of computeCentroids in Three.js?

While working on my custom geometry in three.js with TypeScript, I encountered an issue where the object appeared dark with Lambert material. To troubleshoot, I examined the source code and noticed that nearly every geometry class had the following two lines at the end of the constructor:

this.computeCentroids();
this.computeFaceNormals();

After adding computeFaceNormals, the problem was resolved. I vaguely recall that normals are related to lighting, which makes sense.

However, I am unsure about the purpose of computeCentroids and why centroids are necessary. Can someone provide an explanation? Do I also need to call that function, and what consequences might arise if I neglect it?

javascriptthree.js

Answer №1

findTriangleCenters computes the centroid of each individual triangle within a given mesh, rather than determining the overall center of the entire mesh.

An effective method to understand their functionality is by searching for references to .centroid in the source code of three.js. Based on what I can discern, these centroids seem primarily utilized for lighting effects and are particularly relevant when working with the CanvasRenderer.

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

Starting the node server using the port value specified in the .env file results in an error when attempting to restart the server

I have built a simple node application and specified the port number in the .env file. However, I am encountering an issue where when using app.listen(process.env.PORT,()=>{}), the server runs successfully the first time but when attempting to run it ag ...

javascriptnode.jsexpressenvironment-variables

The process of embedding variables within a JSON Array function in JavaScript

As a newcomer to JavaScript, I am facing an issue while trying to create a simple program. I am attempting to store the variables 'name', 'document', and 'code' inside the JSON array called 'records'. var records = ...

javascriptarraysjson

Is there a way to modify the appearance of a particular element in ng-repeat?

On my website, I am using ng-repeat to display various dish postings. I want to trigger a modal to open when I click on a dish, showing the specific data for that dish. To achieve this, I'm assigning each dish a modal div with a unique ID (dish-$index ...

javascriptangularjsangularjs-ng-repeat

Trouble with AngularJS: Updates not reflecting when adding new items to an Array

I am facing a persistent issue that I have been unable to resolve, despite researching similar problems on StackOverflow. My current project involves building an application with the MEAN stack. However, I am encountering difficulties when trying to dynam ...

javascriptangularjspromiseangularjs-ng-repeat

What is the process for populating a checkbox with data from a configuration file using JavaScript?

I have a requirement where I need to populate a list of checkboxes with data from a configuration file. To elaborate, if my checkboxes are meant to select sports, within my JSON configuration file I have an array like this: sports: ["Tennis", "Rugby", "S ...

javascripthtmlcheckboxconfig

Developing custom events in an NPM package

Developing a basic npm package with signalr integration has been my recent project. Here's how it works: First, the user installs the package Then, the package establishes a connection using signalr At a certain point, the server triggers a function ...

javascripttypescripteventsnpmdom-events

What is the best way to determine the range in which the value falls?

Currently, I am working on validating whether a User has the required karma (reputation) to perform certain actions, such as placing a bid on an item. The karma value falls within the interval [-25; 100]. Additionally, it is noted that as a user accumulate ...

javascriptnode.js

Using a Firebase forEach loop to push items into an array and returning the completed array

At the moment, I am facing difficulties with nodejs (v6.14.0) because I made a post request that needs to complete some tasks before returning a valid response. The issue is that I receive an empty array as a response initially (the response becomes valid ...

javascriptnode.jsfirebasepromisegoogle-cloud-functions

Efficiently reducing the size of a CSS selector string with javascript

Is there a library that already performs this function? I've only been able to find online tools. The reason I am interested in accomplishing this task using JavaScript is because I need to ensure that the strings a > b, a and a> b,a are conside ...

javascriptjquerycss

Executing functions in a loop using Angular

Within my component, there is a foreach loop triggered when a client is selected. Inside this loop, I need to execute a function within the same component. The issue arises with calling the function using `this.functionName()` because 'this' no ...

javascriptangularjsangularforeach

Issue with IE7 when using JQuery to repopulate a <ul> unordered list: new elements showing up under previously hidden elements

Within this javascript snippet, I am utilizing the code below to clear out a list of countries within a <ul> element and then repopulate it (with a slight animation using jQuery's hide() function). The functionality works smoothly in Chrome and ...

javascriptjqueryinternet-explorer-7

Issues have been encountered with the functionality of $rootScope

I am currently struggling with a code snippet in my loginCtrl.js file where I can't seem to get $rootScope to store the value of vm.userEmail. app.controller('LoginCtrl', function($timeout, $q, $log, $rootScope /*$auth*/, $location, $mdTo ...

javascriptangularjs

JavaScript - Capture the Values of Input Fields Upon Enter Key Press

Here's the input I have: <input class="form-control" id="unique-ar-array" type="text" name="unique-ar-array" value="" placeholder="Enter a keyword and press return to add items to the array"> And this is my JavaScript code: var uniqueRowsArr ...

javascriptphpjqueryarrays

What is the best way to create a linear flow when chaining promises?

I am facing an issue with my flow, where I am utilizing promises to handle the process. Here is the scenario: The User clicks a button to retrieve their current position using Ionic geolocation, which returns the latitude and longitude. Next, I aim to dec ...

javascriptangulartypescriptionic-frameworkpromise

The signup controller encountered a malfunction with illegal arguments: an undefined value and a string

I recently started learning MERN through a tutorial and encountered an issue with my database. I have successfully created a function to send data to the database, but for some reason, I can't see the data in the database. Below is the code snippet: ...

javascriptmongodbmern

Convert a Material UI dropdown into a Bootstrap dropdown

The reason for this transformation is due to the unsightly appearance of the dropdown from Material UI. Despite that, the code is functioning properly. It features a dropdown with multiple choices, loading a list of strings and their corresponding images. ...

javascriptreactjstwitter-bootstrapdrop-down-menumaterial-ui

What is the most effective way to display a card with varying values depending on the user's input in a form?

For a while now, I've been grappling with a particular challenge. In my project, I am utilizing multiple states to display values within a card after they are entered into a form. The first state captures the values and modifies the initial state, whi ...

javascriptreactjs

How to grab selected HTML content with jQuery

I have been scouring the internet for a solution to this issue. My goal is to convert text selection start and end points into their corresponding HTML selection values. For example: HTML: test text **some <span style="color:red">te**st t</span& ...

javascriptjqueryhtmlselection

Analyzing the current time against a user-inputted time using Javascript

Looking at this html and javascript code, the goal is to compare an input time with the current time. If the input time is less than 2 hours, "Less time" should be displayed in the label; if it's more than 2 hours, then "sufficient time" should appear ...

javascripthtmlfunctiontimecompare

What's causing the unexpected rendering outcome in Three.js?

Here is a mesh created in Blender: https://i.sstatic.net/KBGM5.jpg Upon loading it into Three.js, I am seeing this result: https://i.sstatic.net/PCNQ8.jpg I have exported it to .obj format and ensured all faces are triangulated. I am not sure why this is ...

javascript3dthree.js