Modifying the hues of a model imported from Blender in Three.js while running the program

I have successfully imported a model of a soccer ball (truncated icosahedron) from Blender using the JSON loader. My goal is to change the colors of individual faces upon clicking, but I'm struggling to do so. While I can change the color of the entire model, I am unable to target specific faces. Upon further investigation, I discovered that the colors are correctly assigned to soccerball.geometry.faces[i], but the new face colors are not being displayed.

Despite exploring various solutions proposed in similar threads such as using different materials, dirtyColors, dynamic, colorsNeedUpdate, etc., none of them have resolved my issue.

This is how I import the model:

var loader = new THREE.JSONLoader();
var onGeometry = function(geom) {
    soccer = new THREE.Mesh(geom, new THREE.MeshLambertMaterial());
    soccer.position.set(0, 0, 0);
    soccer.scale.set(2, 2, 2);
    soccer.geometry.dynamic = true;
    soccer.geometry.dirty = true;
    soccer.overdraw = true;
    objects.push(soccer);
    scene.add(soccer);
};

loader.load("models/model.js", onGeometry);

Any assistance would be greatly appreciated. Thank you in advance.

Answer №1

football.material.vertexColors = THREE.VertexColors;

Alternatively,

football.material.vertexColors = THREE.FaceColors;

In case the above solutions do not yield results, I may require access to the model for further testing.

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

Is coffeescript supported by Moovweb?

Lately, I've been researching the Moovweb platform and I'm curious about its compatibility with CoffeeScript. Could someone share a code example to demonstrate how Moovweb works with CoffeeScript? ...

What is the best way to save Vue state in a cookie while transitioning between form steps in a Laravel application

Imagine a scenario where a user is filling out a multi-step form, and we want to ensure that their progress is saved in case they lose connection. This way, the user's data will not be lost between different form steps. In addition to saving each ste ...

Accessing information from a JSON array

I am encountering difficulties in fetching data from a JSON file. Whenever I click the button, it triggers the call function which then retrieves data from the json.jsp file containing an array. However, I am unable to retrieve the data successfully. Below ...

Utilizing React Hook Form for Interactive Slider and User Input Controls

Whenever I move the Slider, I want to retrieve the same value as when I enter a new value in the Input field. However, the current setup is not functioning correctly. <StyledSlider {register(NAME ...

Tips on organizing columns in Vue when sorting is needed for computed values

I have come across various resources for sorting data that is contained within an array, but I am unable to locate any information on how to sort dynamically generated data. <table> <thead> <tr> <th>Program</th& ...

Searching in jquery not functioning as intended

Greetings! I'm in the process of creating a live search feature similar to what's demonstrated at this link. However, I've encountered a minor issue with this snippet of code: jQuery("#result").on("click",function(e){ var $clicked = $(e.ta ...

There was an issue parsing the JSON data from the server in CakePHP's jQuery datatable

Encountering a warning message while using cakephp and jquery (v 1.2.0): DataTables warning (table id = 'tblinv'): DataTables warning: JSON data from the server could not be parsed due to a JSON formatting error. Below is the script code in que ...

Can a background image flow into another div?

My goal is to use this specific image as the background image for this particular page. I want the background image to begin within the navbar navbar-default class. However, I'm facing an issue. I need the image to extend into the next div, which is d ...

turning off row rearrangement feature in jquery datatable

I am currently utilizing the DataTables Row Reordering Add-on (http://jquery-datatables-row-reordering.googlecode.com/svn/trunk/index.html ) and I am seeking a way to deactivate the reordering using JavaScript. I have attempted to use the following code sn ...

The length parameter for geometry.vertices in Three.js is not defined

Greetings, fellow members of the StackOverflow community. I have embarked on a journey to learn three.js, and for my learning project, I decided to recreate an 80's style retro hills scene reminiscent of this. Initially, everything was progressing smo ...

Monitoring multiple items in OPC UA with Node.js

Utilizing the node-opcua module, my goal is to efficiently monitor multiple opc ua nodes through subscriptions. The desired workflow involves a user selecting nodes in an HTML UI, clicking a Monitor button which then sends the corresponding nodeIds as para ...

Exploring the possibility of incorporating an alphaMap in Three.js

I've been experimenting with creating a cloud texture using two jpeg files - one for transparency and the other for color/visible texture. While the three.js documentation has been somewhat helpful, I'm struggling with the actual implementation. ...

Ways to determine if a dynamically generated script tag has been successfully executed

Recently, I've been experimenting with dynamically creating a script tag: var head = document.getElementsByTagName('head')[0]; var script = document.createElement('script'); script.type = 'text/javascript'; script.charse ...

Express.js encountering an `ERR_HTTP_HEADERS_SENT` issue with a fresh Mongoose Schema

My Objective Is If data is found using the findOne() function, update the current endpoint with new content. If no data is found, create a new element with the Schema. Issue If there is no data in the database, then the first if statement throws an ERR_H ...

Get a document from Angular.js utilizing Express.js

For my MEAN application, I have a requirement to securely provide a hidden link for users to download files. My solution involves storing the files on the server directory and using Angular.js to send an HTTP request to express.js with the file ID for down ...

Executing two fetch requests in Django using JavaScript will show the outcome within a single div

I am completely new to Javascript, so please bear with me! I am having trouble with the structure of my code. Despite attempting various solutions involving async functions, I cannot seem to get the order right or understand where I am going wrong. Curren ...

SolidJS createEffect will only trigger on changes after the initial rendering

When I was searching for a solution, I came across the need to only trigger a reaction after my component had been rendered for the first time. For instance: function InputName() { const [name, setName] = createSignal(""); const [nameError, ...

Javascript continues to execute even after the designated element has been eliminated or substituted

I'm currently working on a WordPress auction site using WooCommerce that needs a countdown timer to display when a specific product auction is ending. Below is the JavaScript code for the countdown timer: const getElem = elem => document.q ...

Tips on excluding an object dynamically from the chaining process in JavaScript

In my object structure, both utils and utils.not have the same prototype with an exist method. To keep it simple, here is a clearer version: var negative = true; if(negative){ //when negative===true, I want to run exist() through not object tests.util ...

Retrieve information following an Ajax call inside a pre-designed template

Upon rendering a page with data put together by EJS, the goal is to refresh a section (thirdRow) of the page whenever the user submits new data. The refreshed section should display both the newly submitted data and the existing data. Although I have obtai ...