Coloring vertices in Three.js IcosahedronGeometry

I have been experimenting with dynamically changing the color of a selected vertex. Based on my work at https://jsfiddle.net/pmankar/m70cpxes/, I constructed an IcosahedronGeometry point cloud geometry. When a click event occurs, my goal is to alter the color of vertex 100.

document.addEventListener('click', function() {
  mesh.geometry.colorsNeedUpdate = true;
  mesh.geometry.colors[100] = new THREE.Color("rgb(255,0,0)");
  console.log(mesh.geometry);
})

Currently, I have two queries:

  1. How can I successfully change the colors of vertex 100?
  2. What might be causing the point cloud to display random colors?
javascriptthree.js

Answer №1

You started by declaring var material, then proceeded to create 

materail = new THREE.PointsMaterial();
and ended up mistakenly applying material again to your mesh. It seems there's a small typo: material is not the same as materail.

In order to have different colors for vertices, you need to specify the colors for each individual vertex.

  geometry = new THREE.IcosahedronGeometry(102, detailsLevel);

  var colors = [];
  geometry.vertices.forEach(function(){
    colors.push(new THREE.Color(0xffffff));
  });
  geometry.colors = colors;

Next, in your material definition, make sure to include the option of vertexColors set to THREE.VertexColors

material = new THREE.PointsMaterial( { size:4, vertexColors: THREE.VertexColors} );

Finally, in your "click" event listener, you can modify the color of a specific vertex like this:

mesh.geometry.colors[100].set(0xff0000);
mesh.geometry.colorsNeedUpdate = true;

For a working example, check out this jsfiddle.

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

Converting Node JS request to an API into React Fetch syntax

I have encountered a problem while developing an app in React-Native that connects with the Hubspot API. Initially, I tried to make the request using the Node JS request module, but it didn't work well with React Native when Expo was involved. Now, I ...

javascriptnode.jsreact-nativerequesthubspot

How can we use Mongoose .find to search with an array stored in req.params and respond with an array containing each value along with its

It would be great if a user could input multiple tags in a search field, and have them separated client-side (before making the .get call) to send over ajax with each keypress. While testing the API with Postman on the server-side, if the .get method retu ...

javascriptarraysnode.jsexpressmongoose

What is the best way to confirm the success of my post method using XMLHttpRequest?

I have limited experience with API's and recently wrote a function to send data to an API. I have bound this function to a textbox text change event, but I am unsure if it is working since I am not receiving any errors. Below is the code for the funct ...

javascriptjsonapihttp

Trail of crumbs leading to pages displayed in a div container

My website is designed with only one page where all other pages are loaded within a div. I am looking to implement breadcrumbs to keep track of the pages loaded inside the div. However, the solutions I have found online only work for pages loaded in the en ...

phpjavascriptjqueryajaxbreadcrumbs

Rearranging information within a JSON structure

Here is a sample of Javascript object and code to consider: Javascript Object { "thing":{ "data":"some data", "thumb":"some data", "data1":"some data", "data2":"some data", "data3":"some data", }, "extra1":[ ...

javascriptjson

Avoid abrupt image flickering when the source is being changed

I'm encountering an issue with image flickering when using large images. Within my body, I have a set of 5 images: <img id="img1" src="img1.png" width="250"> <img id="img2" src="img2.png" width="250"> <img id="img3" src="img3.png" widt ...

javascriptjqueryhtmldragsrc

Choosing the date and time using the picker with the type of 'datetime-local'

Is there a way to ensure that the start date/time is always earlier than the end date/time when selecting them using two text-field HTML elements? <v-text-field id="setTime" outlined type="datetime-local" label="Start ...

javascriptvue.jsvuetify.js

Unconventional way of assigning class properties in Typescript (Javascript): '?='

Recently, I came across the ?= assignment expression within a class property declaration. Can anyone provide some insight into what this means? I am familiar with the new Optional Chaining feature (object?.prop), but this particular syntax is unfamiliar t ...

javascripttypescriptexpression

Exploring the Power of JQuery with Hover Effects and SlideToggle

I was struggling to keep the navbar displaying without it continuously toggling when my pointer hovered over it. I just wanted it to stay visible until I moved my pointer away. <script> $(document).ready(function(){ $(".menu-trigger").hover(funct ...

javascriptjqueryhtmlcsshover

What is the best method for globally configuring the Angular moment timezone?

I integrated angular moment js into my angular application. I am looking to display the date and time based on the time zone of the user accessing the app. However, I am facing difficulty in applying the time zone globally throughout my application. https ...

javascriptangularjstimezonemomentjs

Permission has been given for viewing public content on Instagram, but there is an error with the access token stating it is unauthorized

After applying for Basic and Public content permission on Instagram, I received confirmation that both permissions have been approved. However, when attempting to retrieve public feeds using the designated access token, an error was encountered. The req ...

javascriptnode.jsinstagraminstagram-api

Finding the location of a file within a published web component

I am currently working on a webcomponent where I need to include a link tag in the head section and set the href attribute to a folder within a node module. At this stage, during the development of my component, my project structure looks like this: http ...

javascripttypescriptpath

Try uploading a file with the imageUpload function in JavaScript, could be something basic

Today I successfully uploaded a picture using a basic button (id: "imageUpload") to select and upload a file. Everything worked flawlessly, with the thumbnail of the picture appearing in "thumb1." Now, I am attempting to allow users to upload a picture by ...

javascriptphpjqueryfile-uploadimage-uploading

Error: a is missing in the Google Maps configuration

I'm looking to integrate Google Maps into my program, but I've encountered an error stating that 'a is null' when using a variable in the Google Maps API. Below is my current implementation: //Creates a new center location for the goog ...

javascriptgoogle-maps

npm Error: The installation script for [email protected] has encountered a failure

I encountered an error while attempting to execute "ionic start MyApp" in the Windows terminal. This is a new machine and I have already reinstalled nodejs and ionic, but the same error persists. Can someone lend a hand? npm WARN tar invalid entry & ...

javascriptnode.jsionic-frameworknpmnpm-install

Tips for choosing and emphasizing multiple items using rectangular selection (ribbon) in three.js

I am attempting to draw a rectangle using a bounding box in a mouse drag event and highlight the objects inside the rectangle. To achieve this, I plan to draw a rectangle using the box3 bounding box on mouse down and mouse up events, and then highlight t ...

three.jsfrustum

When activated multiple times, Element pays no attention to jQuery

As I work on making my website responsive, I have encountered an issue with the jQuery script. When rapidly changing the window size, it seems to ignore the conditions set for elements to be displayed or hidden. The CSS is straightforward: body:after{dis ...

javascriptjqueryhtmlcsswordpress

What is the best way to add a gradient color to the bottom of your content?

Seeking assistance in replicating the unique UI design featured in the image below, taken from a course description section on udemy.com. The goal is to create a gradient effect on specific parts of the content, similar to what is shown in the image. http ...

javascripthtmlcssreactjsmaterial-ui

Swap out the traditional for loop with a LINQ query utilizing the any method

In my TypeScript code, I have the following snippet: public executeTest(test: Test): void { const testFilters: Record<string> = getTestFilters(); let isTestingRequired: boolean = false; for (let i: number = 0; i < testFilters.leng ...

javascripttypescriptlinqlambdaany

NextJS does not support the rendering of the map function

Currently, I am getting acquainted with NextJS by creating a basic blog. I have successfully passed the data through props and can see it logged in the console within the map function. However, I am facing an issue where the HTML content does not display i ...

javascriptreactjsnext.js