Normalization in THREE.js involves scaling vector values to have a magnitude

I am so close to figuring out how to render a sphere with vertex colors, but I'm stuck on the normalization process. My goal is to calculate normals for each vertex by averaging face normals and then convert them to HSL values. The lines below should do that.

sphere.geometry.computeFaceNormals();
sphere.geometry.computeVertexNormals();

After normalization, I need to pass the values as Hue, Saturation, and Lightness using...

myGeometry.color.setHSL();

The challenge lies in normalizing and converting the values to x, y, z coordinates for HSL usage. Any guidance on this would be greatly appreciated! Here's a snippet of the code I have been working on.

var sphereBaked =  new THREE.MeshPhongMaterial();
sphere = new THREE.Mesh(new THREE.SphereGeometry( 150, 32, 32),sphereBaked);

sphere.geometry.computeFaceNormals();
sphere.geometry.computeVertexNormals();

//sphereBaked.color.setHSL();

sphere.position.set(0,150,0);
scene.add(sphere);
javascriptthree.js

Answer №1

I'm not completely certain if this is the exact solution you are looking for, but I took a shot at it:

// Consider trying something along these lines:
for (let index = 0; index < myShape.faces.length; index++) {

    // Obtain and normalize the current normal
    let currentNormal = myGeometry.faces[index].normal.clone();
    currentNormal.normalize();

    // Iterate through the vertexColors
    // as demonstrated in http://example.com/color-change-tutorial
    for (let j = 0; j < myGeometry.faces[index].vertexColors.length; j++) {
        myGeometry.faces[index].vertexColors[j].setHSL(currentNormal.x, currentNormal.y, currentNormal.z);
    }
}

// Trigger color update
myGeometry.colorsNeedUpdate = true;

Hopefully, this provides some assistance!

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

Steps to resolve the error message 'npm ERR! Cannot read property 'startsWith' of null':

As I embark on creating my very first react-native app, I encountered a stumbling block while trying to set up the react-native command line interface following the instructions provided here. Every attempt I make to initialize the react-native command lin ...

javascriptnode.jsnpmcommand-linechocolatey

Extracting information from JSON using arrays

I'm facing a bit of a challenge with this one. I've been trying to use jQuery on my website to update an element. It works perfectly fine without using an array of data in JSON, but as soon as I introduce an array of data, it stops functioning. I ...

javascripthtmljqueryjson

Having trouble with if-else conditions in AngularJS?

As a beginner in angularjs, I am trying to display the text "Part Time" when my employment status is equal to HALFTIME. But despite writing the code below, nothing seems to be displayed on the screen. Can anyone point out where I might be going wrong? & ...

javascriptangularjs

Determine the number of occurrences of specific values within a group of objects based on a

I have the following dataset: const data2 = [ { App: "testa.com", Name: "TEST A", Category: "HR", Employees: 7 }, { App: "testd.com", Name: "TEST D", Category: "DevOps", Employee ...

javascriptarrays

What is the best way to change the value of an input element (with type='month') to a string format "yyyy-MM"?

Need help converting the input value (type: month) to the format "yyyy-MM". HTML code snippet: <input class="bg-success btn btn-dark" type="month" id="timeCheckTimeSheets" ng-model="month"> AngularJS snippet: $http({ url: url + $scope.p ...

javascripthtmlangularjs

What is the best way to handle requests once a SpookyJS script has finished running?

Occasionally, I find myself needing to log in and extract some data from a specific website. To automate this process, I developed a CasperJS script that runs on Heroku. My goal is to create an endpoint like the following: app.get('/test', func ...

javascriptnode.jsweb-scrapingphantomjsspookyjs

Clicking on a button in the Shield UI Grid Toolbar will apply filters to

Currently, I am working with a grid that utilizes a template for the toolbar. In this grid, there is a column labeled "Status." My goal is to filter the rows so that only those where the Status equals Request to Reschedule, Cancelled, Office Call Required, ...

javascriptjqueryfilteringshieldui

Building a dynamic Single Page Application with the power of Durandal

Our vision for the single-page app is to create a dynamic system where users can personalize their views and widgets in real-time. Instead of predefined views and viewmodels on the server, we want end-users to have the flexibility to define and customize w ...

javascriptknockout.jssingle-page-applicationdurandal

A JavaScript variable that holds simple text alongside HTML tags

Here is the JavaScript code snippet: function startChatSession(){ $.ajax({ url: "chat.php?action=startchatsession", cache: false, dataType: "json", success: function(data) { username = data.username; $.each(data.items, function(i,item) ...

javascriptphpjqueryhtml

When clicking on the HTML div element, it will be appended to the application

Within my vertical menu, there are 5 items including web design and mobile app. When clicked on these items, they reveal their respective href attributes as shown below. <div class="col-md-3"> <ul class="nav nav-tabs nav-stacked"> ...

javascripthtmlcss

Learn how to run a Linux bash command by clicking a button, where the command is generated from user input

HTML: I am presenting two inputs here <input id="range3" type="range" min="0" max="255" value="0" /> <input id="num3" min="0" max="255&q ...

javascriptnode.jselectron

How to transfer data from PHP to JavaScript using Ajax in the webpage_BODY

I am extracting data from my Controller and passing it to a Javascript file via the Ajax success function. This data is then utilized to create charts. Here is an example of my controller logic: $result =array( "PourcentageCommande" => $Pourcen ...

javascriptphpjsonajax

module vue/ref-transform cannot be located

I recently started working on a project in vue.js and had everything running smoothly (homepage). However, I encountered an error after installing bootstrap-vue using the following commands: $ yarn add bootstrap bootstrap-vue. $ npm install bootstrap boots ...

javascriptvue.jsbootstrap-4bootstrap-vue

Numerous memberships for a single assortment within MeteorJS

Currently seeking guidance on the most effective way to accomplish the following task using MeteorJS. The requirements are as follows: a list with items and a sidebar with a selected item (not necessarily from the current page of the list). https://i.sst ...

javascriptmeteor

I am unable to comprehend the function definition

I have familiarity with different types of JavaScript function declarations such as expression functions and anonymous functions. However, I am unsure about the syntax used in these two specific functions: "manipulateData: function (input)" and "getDataByI ...

javascriptangularjs

Maintain constant positioning of the gltf model slightly ahead of the player as they move in the A-frame

Is there a way to make a gltf model in A-frame () follow the player slightly in front and at eye level to the camera? I want the model to always be in front of the player and at their eye level, so it moves along with the player's movements. How can t ...

javascriptjquerythree.jsaframewebvr

Enhance Website Speed by Storing PHP Array on Server?

Is there a way to optimize the page load time by storing a PHP array on the server instead of parsing it from a CSV file every time the page is reloaded? The CSV file only updates once an hour, so constantly processing 100k+ elements for each user seems un ...

javascriptphpjqueryarraysperformance

Reconfigure an ancestral item into a designated key

I have a single object with an array of roles inside, and I need to transform the roles into an array of objects. See example below: Current Object: displayConfiguration: { widgetList: { widgetName: 'widget title', entityType: 'As ...

javascriptangulartypescript

Adding items to a dropdown select tag in React dynamically

I'm currently working on a dynamic form component that collects user input, stores it in JSON format, and generates a form for the end-user. However, I encountered an error stating "TypeError: data.emplist is not iterable" when trying t ...

javascripthtmljqueryreactjsreact-native

When using Javascript, the CanvasRenderingContext2D.drawImage function may not properly detect Image data

function ImageLoader() { this.imageBuffer = []; } ImageLoader.prototype.load = function(src) { var temp = new Image(); temp.src = src; this.imageBuffer.push(temp); } Recently, I've been attempting to display a grid of images on the canvas. After deb ...

javascriptjqueryhtml