The Color property on faces is failing to update in Three.js WebGL renderer

Looking to change the color of a face on a simple plane mesh at run-time by having a character walk over the “floor tile”.

Attempted solution:

face.color.setRGB(Math.random(), Math.random(), Math.random());

This approach is successful when using CanvasRenderer, but fails when switching to WebGLRenderer.

Even after setting the geometry.colorsNeedUpdate flag and setting both the mesh and geometry as dynamic, the issue remains unsolved. Is there another step I may be overlooking?

(Current version in use: Three.js r59)

Thank you,

Phil.

javascriptthree.jswebgl

Answer №1

When using the WebGLRenderer, follow this pattern for working with THREE.Geometry.

Make sure to assign a color to each face.

for ( let i = 0; i < geometry.faces.length; i ++ ) {
    geometry.faces[ i ].color.setHex( Math.random() * 0xffffff );
}

In the material, set vertexColors = THREE.FaceColors.

material = new THREE.MeshPhongMaterial( { color: 0xffffff, vertexColors: THREE.FaceColors } );

Don't forget to update colorsNeedUpdate after making changes to the colors.

mesh.geometry.colorsNeedUpdate = true;

Version three.js.r.76

Answer №2

According to the information provided in the Geometry documentation, in order to notify a change in the faces of an object, you need to set Geometry.elementsNeedUpdate to true.

This code snippet demonstrates how to change the colors of all faces:

var faces = mesh.geometry.faces;

for(var i = 0 ; i < faces.length; i++){
  var face = faces[i];
  var color = new THREE.Color("rgb(255, 0, 0)");
  face.color = color;
}

mesh.geometry.elementsNeedUpdate = true;

render();

Answer №3

Have you given 

geometry.colorsNeedUpdate = true;
a try as an alternative to using needsColorUpdate?

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

Leveraging jQuery within a method defined in an object using MyObject.prototype.method and the 'this' keyword

Recently, I've started exploring Object-oriented programming in JavaScript and have encountered a challenge. I'm trying to define an object like the example below, where I am using jQuery inside one of the methods. I'm curious about the best ...

javascriptjqueryobjectmethodsthis

What causes json.parse to malfunction? and how can you resolve the issue

My server sends data to my JavaScript code in the format below. {"triggers": [{"message_type": "sms","recipients": "[\"+91xxxxxxxxx\",\"+91xxxxxxxxx\"]", "message": "This is a test"}]} To parse this JSON string, my code executes the f ...

javascriptpython

Serve different files using Node.js socket.io webserver, not just index.html

I recently started delving into socket.io and decided to use this chat example as a reference. As I navigate to ip:8080/public/index.html, I realize the need to access other files, such as additional JS scripts that will be used on the client side in the ...

javascriptnode.jssocketssocket.io

Tips for building a diverse array of data types and effectively utilizing them based on their specific type in Typescript

Trying to store both custom types, Graphic and Asset, in the same array is proving to be a challenge. The goal is to access them and retain their individual type information. const trail: Array<Graphic | Asset> = []; for (let index = 0; index < t ...

javascripttypescript

Struggling with ThreeJS bufferGeometry position attribute not refreshing after applying translation

Leveraging STLLoader, I successfully loaded an stl file onto a threeJS scene and obtained a BufferGeometry. Following that, I utilized myMesh.position.set(x, y, z) myMesh.rotation.setFromQuaternion(quaternion, 'XYZ'); to manipulate the geome ...

javascriptthree.jsbuffer-geometry

SyntaxError: An invalid character was encountered (at file env.js, line 1, column 1)

This marks my debut question so kindly indulge me for a moment. I recently stumbled upon a guide that outlines how to dynamically alter environment variables in a React project without the need for re-building. You can find the guide here. The method work ...

javascripthtmlreactjsenvironment-variables

Ensuring Valid Submission: Utilizing Jquery for a Straightforward Form Submission with 'Alajax'

After searching for a straightforward JQuery plugin to streamline the process of submitting forms via Ajax, I stumbled upon Alajax. I found it quite useful as it seamlessly integrates into standard HTML forms and handles all the necessary tasks. However, I ...

javascriptjqueryajaxforms

What is the best way to correctly showcase dynamic pages in ExpressJS?

Within my app.js file, there exists an array of objects that is defined as follows: var people = [ {name: "Henrique Melo", username: "heenrique", email: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7a121f1408130b0f1 ...

javascriptnode.jsrestloopsexpress

What is the best way to check the validity of an if statement within JavaScript or AngularJS?

Here is a snippet of code that I have: $scope.changePassword = function () { sessionService.save($scope.sessionData); if(sessionService.account.newPassword == sessionService.account.currentPassword) { ...

javascriptangularjsunit-testing

Prevent swiping beyond the final slide in a react-slick carousel

I am currently using react-slick to create a carousel, and I have a specific requirement to prevent swiping and dragging of slides once the last image is reached. After conducting some research, I attempted to set swipe: false on the final slide, which suc ...

javascriptreactjstypescriptslick.jsreact-slick

Transforming precise military time using Angular and Javascript filtering

There are a few times where I find myself liking 01:45 //and 15:00 I believe this time format is HH:MM in military time? While I have come across some advanced functions that can parse sentences and even include seconds like HH:MM:SS, I am looking for a ...

javascriptangularjsdate

Utilizing the <head> element in Vue.js for Injection

I am facing an issue with loading multiple EXTERNAL scripts on different pages, like Google Places Autocomplete and Facebook APIs. It doesn't make sense to load them on every route, but the documentation provides no guidance on how to handle this com ...

javascriptvue.js

"Trouble ensues when OrbitControls fail to function properly while loading a

I have a code snippet that displays a 3D file (obj, stl, 3mf) uploaded by the user using three.js OBJLoader, STLLoader, and 3MFLoader. Everything seems to be working fine, but I attempted to integrate OrbitControls so users can zoom in, zoom out, rotate, e ...

javascripthtmlthree.js3d

How to dynamically populate a Vue multiple select dropdown with v-for loop?

I have been attempting to implement multi-select questions in Vue using v-for. The Select menu and its options are populated via JSON data. Unfortunately, I am facing difficulty in retrieving the selected results as expected. Whenever I select an option ...

javascriptvue.jsvuejs2

Listening for an event or using a CSS pseudo-class to detect when the scrollbar becomes

Are there any JavaScript event listeners or CSS pseudo classes that can detect when a scrollbar appears and disappears? For example, on Mac OS and Windows Internet Explorer 10 or newer, the scrollbars are hidden by default but appear when scrolling begins. ...

javascripthtmlcssjquery-eventspseudo-class

The issue of an undefined Node.js variable post "await"

While I know similar questions have been asked before, I assure you that I've gone through them; however, I'm still facing a challenge. I have a simple code snippet to retrieve a token for a 3rd-party API service: let tok = ''; const g ...

javascriptnode.jspromiseasync-await

Using Phoenix Channels and Sockets in an Angular 2 application: A comprehensive guide

My backend is built with Elixir / Phoenix and my frontend is built with Angular 2 (Typescript, Brunch.io for building, ES6). I'm eager to start using Phoenix Channels but I'm struggling to integrate the Phoenix Javascript Client into my frontend. ...

javascripttypescriptangularphoenix-frameworkbrunch

Having trouble with the Javascript denial of submit functionality?

I'm dealing with an issue in my code where form submission is not being denied even when the input validation function returns false. I can't figure out what's causing this problem. <script> function validateName(x){ // Validati ...

javascriptphphtml

Unable to establish API connection in node.js

As a novice, I recently delved into the world of APIs using node.js. My goal was to fetch data from a simple API for practice. This venture is just an experiment and any assistance or guidance on connecting to APIs, especially those requiring an API key, ...

javascriptnode.js

Tips for saving data to a file using the frontend

Is it possible for draw.io to write directly to a local file from my browser without the need for any server app or browser extension? I'm not referring to simply downloading a file, but actually writing to a file. For example, when creating a new dia ...

javascriptfileiofrontend