Alter the texture or hue in the mesh surface

I am faced with a challenge involving a Three.Geometry object that contains multiple vertices and faces forming a grid. My goal is to dynamically alter the color or material of a selected face.

geometry.colorsNeedUpdate = true; 
geometry.faces[1].color.setHex(0xcccccc);   //this doesn't work

The above code results in an unusual opacity for the new color. It seems like it's not replacing the old color entirely, but rather blending the two together. This makes it impossible to overwrite a darker color with a lighter one. How can this be fixed? I have already applied my materials:

mat = new THREE.MeshBasicMaterial({color:"white",shading: THREE.FlatShading,side: THREE.DoubleSide,vertexColors: THREE.FaceColors,  needsUpdate : true});

Another approach I considered was changing the reference to another material:

geometry.faces[0].materialIndex = 1; // works only when disabled OpenGL in browser

I have also set 

material.needsUpdate flag to true
and consulted the resources at https://github.com/mrdoob/three.js/wiki/Updates

However, despite these efforts, no changes are observed.

javascriptthree.jswebgl

Answer №1

You are comparing two different things here. It is not recommended to use both face colors and MeshFaceMaterial at the same time.

In WebGLRenderer, once a mesh has been rendered, you cannot change the face materialIndex. However, you can modify one of the materials in the material array.

To achieve what you want, use MeshBasicMaterial for your mesh material and set vertexColors: THREE.FaceColors to control each face color. Make sure to initialize each face color properly for a checkerboard pattern. Also, set the material color to 0xffffff to prevent unintended effects.

This advice is based on three.js r.58

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

Mocking a function from within the method under test

I need to run tests on a method in my code that runs a series of functions, one of which sends an email. Is there a way to prevent this function from sending emails during testing? I want to avoid using conditional statements like the one below in my cod ...

javascriptnode.jsunit-testingtestingmocking

Is there a way to prevent HTML rendering with Javascript within a JSP page?

When a user accesses our site from China, we need to block certain assets to optimize the speed of the site. For example, resources from Facebook need to be blocked from loading altogether. The challenge is that this task must be accomplished using JavaSc ...

javascripthtmljsp

When aot is enabled, ngClass and ngIf condition may not compile successfully

I am encountering an issue with a div using ngClass and ngIf conditions: <div [ngClass]="{ 'active': nbActive === 1 }" > <!-- some stuff --> </div> There is also a similar div using a ngIf condition: <div *ngIf="nbActi ...

javascriptangulartypescriptangular8angular-aot

What is the best way to incorporate a custom event listener into my React Native component?

Hello everyone, I am currently working with React Native+Expo and have created a custom component called a stepper. Here's how it looks: https://i.sstatic.net/CfQcl.png Below is the code for this custom stepper: import React, { useState } from ' ...

javascriptreactjsreact-nativeexpo

The JQuery library seems to be unresponsive on my webpage, despite being correctly included

Despite trying multiple ways to include the JQuery library on my page, I keep encountering the "$ is not defined" error. I have ensured that all the links were correct and from various sources, both local and external. What other options should I consider ...

javascriptjquery

What could be the reason that Ng Repeat fails to work when a button is triggered from a separate form

I have an HTML table that includes an ng repeat directive and two buttons. The first button opens a modal with a form to create a new user. When I click save, it adds the new user to the list. The second button is within the same form and also adds a user. ...

javascriptjqueryangularjsjspangularjs-ng-repeat

"Exploring the world of digital art with JavaScript through canvas and canvas

How can I adjust the value of a canvas arc? The input accepts larger values, but not smaller ones. var btn = document.querySelector(".btn"); btn.addEventListener("click", () => { var inputVal = document.querySelector(&q ...

javascriptcanvas

Can you explain the distinctions between Rundeck and Quartz in terms of their job scheduling capabilities?

In my quest for a job scheduler compatible with both node.js and Rundeck, I stumbled upon Quartz. However, despite my efforts to grasp the differences between Quartz and Rundeck, I find myself at a loss. Any assistance on this matter would be immensely a ...

javascriptnode.jsquartz-schedulerjob-schedulingrundeck

Eliminate duplicate values in a JSON array using JavaScript

Good evening, I need to filter out duplicate country names from a list retrieved from mongoDB and then populate a select box with the unique country names stored in the "title" field. { "_id": { "$oid": "60885f86f642f81 ...

javascriptjsonreactjsmongodbduplicates

How to effectively handle asynchronous calls in Node.js using readdir and stat functions

My current project involves implementing a post method on the server side to fetch all files within a specified directory (non-recursively). Below is my code snippet. I am encountering challenges in sending back the response (res.json(pathContent);) with ...

javascriptnode.jsexpressasynchronous

Is it possible to automatically submit a form at regular intervals without reloading the page and simultaneously insert the submitted data into

I am attempting to automatically submit a form every x number of seconds without refreshing the page and then insert the input data into a MYSQL database. The problem I'm facing is that while I can successfully insert the form's input value into ...

javascriptphpjquerymysqlforms

Difference between module.export and export handler in JavaScript and TypeScript

Can you explain the contrast between these two methods of exporting in TypeScript? export const handler = someWrapper( eventHandler({ ...someMiddlewares, lambdaHandler }) ) Compare that to this export syntax in JavaScript: module.export = { ...

javascriptnode.jstypescriptamazon-web-services

insert <asp:linkbutton> dynamically

I have a question regarding ASP: I am receiving a list of IDs from the server on my webpage. Can I display this list in a div below an ASP.NET control? div_containing_link += "" If not, is there another way to achieve this? For example, I want to displ ...

javascriptasp.net

How to append double zeros to a number in Material UI Data Grid

I'm currently working on a React.js application that utilizes the DataGrid component from the Material UI (MUI) library to display data. My challenge lies in formatting full numbers with trailing zeroes for better clarity. For example, displaying 625 ...

javascriptreactjsmaterial-ui

How to Implement Context Menu in THREE.JS

I am looking to implement a context menu when I right click on a 3D object in the scene. Here is an example of JavaScript code that accomplishes this: $(function(){ $.contextMenu({ selector: '.context-menu-one', callback: function(key, ...

three.js

In search of the most efficient method for integrating an AJAX-powered TreeGrid feature

Can anyone recommend an Ajax/TreeGrid implementation that meets the following criteria: Must support server side sorting Should be able to load leaf nodes on demand, meaning only children of open nodes are loaded Needs to support paging so that nodes are ...

javascriptajaxtreeviewdhtml

Ways to verify if one div in jQuery contains identical text to another div

I need help with a jQuery script to remove duplicate text in div elements Here's the requirement: If div1 contains the text "hi" and div2 also contains "hi", then div2 should be removed Below is my current code snippet: <script src="https:/ ...

javascriptjqueryhtml

What is the best way to save longitude and latitude coordinates in a database using the <input> method?

Learn how to use HTML code <html> <body> <p>Press the button below to receive your coordinates.</p> <button onclick="getLocation()">Get Coordinates</button> <p id="demo"></p> <script> var x = doc ...

javascriptphphtmlajaxlaravel

Encountering issues with installing @vue/cli on Linux Ubuntu

Currently facing an issue while attempting to install the Vue CLI on Ubuntu (WSL). After running both yarn add global @vue/cli and npm install @vue/cli --global, it seems like the commands were successful. However, upon checking the version using vue --v ...

javascriptvue.jsubuntunpmwindows-subsystem-for-linux

The AutoComplete component in React Material UI does not automatically assign the initialValue

I've encountered an issue with my form.js component. In this component, I have two states: update and create. Within the component, there's an AutoComplete component that works perfectly fine in the create state (data creation works as intended). ...

javascriptreactjsmaterial-ui