A guide on altering vertex colors programmatically using Three JS

After successfully setting vertex colors for model elements added via STL loader, I am now facing an issue with changing these colors using the code below. Despite my efforts, the colors remain unchanged. Can anyone provide guidance on how to fix this?

let geometry = this.scene.getObjectByName("myFile.stl").geometry   
const color = new THREE.Color(0xFF0000);  
// @ts-ignore 
for(let idx = 0; idx < geometry.attributes.color.count; idx++) 
{ 
    // @ts-ignore 
    geometry.getAttribute("color").setXYZ( idx, color.r, color.g, color.b ) 
}
typescriptthree.js

Answer №1

Once you've made the necessary changes, be sure to update the needsUpdate flag in the buffer attribute by setting it to true. Here's an example:

let shapes = this.scene.getObjectByName("myShape.obj").shapes;
const hue = new THREE.Hue(0x00FF00);  
const hueAttribute = shapes.getAttribute("hue");
for(let index = 0; index < hueAttribute.total; index++) 
{ 
    // @ts-ignore 
    hueAttribute.setRGB( index, hue.red, hue.green, hue.blue ) 
}
hueAttribute.needsUpdate = true;

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

established timeframe for updating information

Is it possible to update my API (get) using the setInterval() function? This is my current get function: getServices(){ return this._http.get(this._url) .map(res => res.json()); } I want to refresh my data (get json data) ever ...

typescriptangular

the element <fabric> is not supported by this browser

I am facing an issue with the <mesh> tag not being recognized in the browser. The 3D model is not loading in my react and three.js project despite trying various methods and referring to documentation. Below is the code snippet: import { Suspense, us ...

reactjsbrowserthree.jsmeshuppercase

What about SVGRenderer in Three.js?

After exploring the source code of three.js, I noticed that there is no mention of any SVG-related files. I came across CanvasRenderer and WebGLRenderer, but nothing about SVG. I was under the impression that SVG was supported - can anyone clarify this ...

svgthree.js

angular http fails to verify authorization header

My backend is set up in Node.js with Express and Sequelize. When I make a request to retrieve all my product types using Postman, everything works fine as shown in this image: postman http request and header However, when I try to make the same request f ...

angulartypescripthttpsxmlhttprequesthttp-headers

What is the process for creating the cannon-es body of a torus in three.js?

I am trying to create a cannon body for a Torus in THREE.js, but I'm having trouble finding the correct shape. Unfortunately, there is no existing CANNON.Torus class available. If you need a reference, you can see what a THREE.js Torus looks like her ...

three.jswebglcannon.js

The THREE.MTLLoader fails to load the texture image

I have created a Three.js program that loads MTL and OBJ files and displays them on the scene. However, when I run the program, it shows no textures and the object appears black. I used MTL loader and OBJ loader and added the files to the root folder of m ...

javascriptthree.js

What is the best way to incorporate a TypeScript function within a JQuery function?

I'm facing an issue with installing the Angular Instascan library, so I am using it without installing and only importing the script. In order to make it work, I have to use JQuery in my TypeScript file within the component. Is there a way to call a T ...

jqueryangulartypescriptinstascan

What is the best way to configure eslint or implement tslint and prettier for typescript?

In my React/Redux project, I recently started integrating TypeScript into my workflow. The eslint configuration for the project is set up to extend the airbnb eslint configurations. Here's a snippet of my current eslint setup: module.exports = { // ...

typescriptvisual-studio-codeeslintprettier

Error: Unable to locate the type definition file for the '@babel' package

I am currently working on a new project and here is the content of my package.json file. { "name": "dapp-boilerplate", "version": "1.0.0", "main": "index.js", "license": "MI ...

typescriptnext.jsbabeljseslint

Error message: "Typescript is unable to locate offscreencanvas"

Currently, I am in the process of migrating a Three.js project to TypeScript. However, when attempting to compile it, I encountered an error which is documented in this particular issue on the Three.js repository: https://github.com/mrdoob/three.js/issues ...

javascriptnode.jstypescriptnpmthree.js

Choose an option using an input field in HTML and Angular 6

Is it possible in HTML/Angular 6 to create an input field with an arrow on the right that, when clicked, displays a dropdown list of options like a select tag? I tried using datalist but it doesn't give me the desired result. When I enter a value not ...

htmlangulartypescript

What is the reason why the return statement in a forEach loop of a Map does not cause

When iterating a map in Typescript, the forEach method behaves strangely where the key and value must be inverted. However, using a regular for loop works correctly as expected. const map = new Map<number, number>() const uniq = new Set<n ...

typescript

Incorporate bespoke characteristics into JSX

How can I add a custom attribute to JSX in React v16? According to Facebook, it is already implemented. However, when I try my-custom-attribute="foo", it doesn't work as intended. I actually need an attribute format like MyCustomAttribute="foo" Any ...

reactjstypescriptjsxtypescript-typings

How to attach an event listener to an HTML element with only an ID using Vue 3 and TypeScript (without directly accessing the element)

Currently, I am faced with a challenge while using a gantt chart Vue 3 component, which is a module that I have imported. Unfortunately, I do not have access to the underlying html of this component. Although I can view the ids and classes used through t ...

typescriptvue.jsvuejs3

Is there a way to toggle or collapse a table row with a unique identifier using Angular and Bootstrap?

Currently handling Angular and Bootstrap in my work, but facing challenges with table manipulation and collapsing rows. I fetch data from a database and showcase it in a dynamically generated table using *ngFor and two rows within an ng-container. My goal ...

htmlangulartypescriptdatatablesangular-ui-bootstrap

Debugger for Visual Code unable to locate URL in Microsoft Office Add-in

I recently installed the Microsoft Office Add-in Debugger VS code extension, but I'm having trouble getting it to work despite following the instructions. Every time I try, an error message pops up: https://i.sstatic.net/h2FYs.png Upon inspecting my ...

reactjstypescriptoffice-js

TS2604: The JSX element '...' lacks any construct or call signatures and is unable to be processed

As part of our company's initiative to streamline development, I am working on creating a package that includes common components used across all projects. We primarily work with TypeScript, and I have successfully moved the code to a new project that ...

reactjstypescript

Learn the process of adjusting the Time Zone in Angular2-HighCharts!

I've been struggling for a few days now trying to adjust the UTC time in an area chart using Angular2-HighCharts. The backend API is returning timestamps which I then inject into the chart, but each time it's being converted to "human time" with ...

angulartypescripthighchartsangular2-highcharts

Building a TypeScript project that contains several internal modules

My organization is currently considering using TypeScript for a new project we are working on. This project is quite complex, and I'm trying to figure out how to compile it if we decide to use internal modules. From what I understand, if we have an i ...

moduletypescripttypescript1.8

If the children prop is used to pass a server component to a client component, will it be displayed/rendered on the client side?

The documentation for NextJS explains in this section that all child components and modules imported into a client component are considered part of the client bundle. However, it also mentions the option to mix server and client components by passing a ser ...

javascriptreactjstypescriptnext.jsrendering