Reverting changes in three.js colors do not retroactively affect the instanceColor setting

I am currently working on a complex ifc model that includes custom properties. My objective is to allow users of my application to enter a specific designator in a search field and have the corresponding element blink for easy identification on the screen.

I successfully implemented the search field and element identification functionality. Here is the key code snippet for the search function:


function performSearchIfc() {
    let searchInput = document.getElementById("uuidsearchinput").value;
    let expressId = designatorToExpressId.get(searchInput);
    let arrayOfParts = loadedFragmentsGroup.data.get(expressId)[0];

    console.log(arrayOfParts);

    for (let i = 0; i < arrayOfParts.length; i++) {
        let partId = arrayOfParts[i];

        let children = loadedFragmentsGroup.children;
        let item = children.find(item => item.id === partId);

        if (!item) {
            console.log("Skipping item: " + partId);
            continue;
        }

        console.log(item);

        (async () => { //There seems to be an issue with coloring as scale works fine
            try {
                let r = item.instanceColor.array[0] + 1 - 1;
                let g = item.instanceColor.array[1] + 1 - 1;
                let b = item.instanceColor.array[2] + 1 - 1;
                let copyOfOrigColor =  new Float32Array([r, g, b]);

                let intenseGreen = new Float32Array([0, 1, 0]);

                while (true) {
                    console.log("Setting color to " + intenseGreen);
                    item.instanceColor.set(intenseGreen);
                    item.scale.set(2.2, 2.2, 2.2);
                    await sleep(1000);
                    console.log("Setting color to " + copyOfOrigColor);
                    item.instanceColor.set(copyOfOrigColor);
                    item.scale.set(1, 1, 1);
                    await sleep(1000);
                }
            } catch (error) {
                console.error(error);
            }
        })();

    }
}

The interesting aspect lies in the blinking behavior. The mechanism functions correctly in terms of identifying the elements linked to the specified identifier. The scaling and color change to bright green work seamlessly as intended. The console outputs exhibit the expected results:

https://i.sstatic.net/6HlxNliB.png

However, there seems to be an issue with reverting the color back to its original state after the blink effect. The elements remain green without returning to their initial color.

Could anyone shed some light on this matter?

EDIT:

Shortly after posting, I observed that only certain parts are being colored at times, resulting in the following scenario:

https://i.sstatic.net/657X0i5B.png

This indicates that the coloring method may be unreliable overall.

Answer №1

The instanceColor attribute represents the color of the instance and should not be directly modified. https://i.sstatic.net/E421yj3Z.jpg

For more information, refer to the documentation.

In order to change the color, you will need to use the method item.setColorAt(index, color), followed by calling

item.instanceColor.needsUpdate = true;

The index refers to the index of the instanced mesh (likely represented by i in your scenario), while color should be a variable of type THREE.Color(). You can define the color as follows:

// Example if using three.js from CDN or importing
const color = new THREE.Color('#00ff00');

// Importing Color directly from three.js
import { Color } from 'three';
const color = new Color('#00ff00');

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

parent triggers resolution when sending a signal to child

My routes using ui-router are structured like this: $stateProvider .state('studies', { url: '/studies?all&field&term&page&sort&sort_dir', templateUrl: 'scripts/studies/studie ...

Attempting to iterate through a Query each loop for the Raphael object

I'm currently facing a challenge with creating a jQuery .each() function to iterate through an array that I've constructed from a Raphael object. While I am able to achieve this using a traditional JavaScript for-loop: for (var i = 0; i < reg ...

Generate a distinct identifier for the select element ID whenever a new row of data is inserted into a table

Although my title accurately describes my issue, I believe the solutions I have been attempting may not be on the right track. I am relatively new to javascript and web development in general, so please forgive me for any lack of technical terminology. Th ...

Issues with the functionality of AngularJS router implementation

I have searched through various resources like Stack Overflow and other blogs, but unfortunately, I haven't been able to fix the routing issue in my AngularJS code. Although there are no error messages, the routing functionality doesn't seem to b ...

Using npm properties reader to access a key with multiple suite values from a properties file in Protractor

Recently, I had to find a way to store some data outside of the standard conf.js file. To tackle this requirement, I decided to use the properties-reader node module. However, I encountered some issues when trying to access certain key values. Below are e ...

What is the most efficient method for sending a flag to Node.js based on the version of Node being used

If Node.js version is greater than 6.3, I must include the flag --preserve-symlinks. I have over 50 modules with a package.json structured like this: "scripts": { "gulp": "./node_modules/gulp/bin/gulp.js", "start": "node main/server.js" }, What woul ...

Error when sending Angular 4 GET request with multiple Headers results in a 400 bad request code

I've been attempting to perform a POST request with headers in order to receive a response. The Angular code snippet I'm currently using for this request is shown below: const headers = new HttpHeaders({ 'Content-Type': 't ...

Enhancing many-to-many relationships with additional fields in Objection.js

I have a question that I haven't been able to find a clear answer to in the objection.js documentation. In my scenario, I have two Models: export class Language extends BaseId { name: string; static tableName = 'Languages'; st ...

What is the best way to confirm that my TypeScript string contains exactly two words?

Can you provide guidance on how to validate that a string contains exactly two words using TypeScript? I'm looking to implement this validation in order to ensure that I only call the server if the name is in "first last" format. ...

Creating a full-page scrollbar in React when a component goes beyond the viewport

I'm currently working on an app that has a layout like this: https://i.sstatic.net/w3fty.png The middle component extends beyond the page, which is why I need a scrollbar to navigate down to it. However, I'm struggling to implement a regular wh ...

Avoiding the parsing of JSON strings in JavaScript

var data = Sheet : [ {"Cell_Address":"A1","Cell_Type":"1","Cell_Value":"Name"}, {"Cell_Address":"B1","Cell_Type":"1","Cell_Value":"Phone no."}, {"Cell_Address":"C1","Cell_Type":"1","Cell_Value":"Currency"}, {"Cell_Address":"D1","Cell_Type":"1","Cell_Value ...

Adjust the mouse position upon page loading

I'm looking for a way to manipulate the mouse pointer on my webpage displaying a full-screen slider. I want the slider to stop when the mouse pointer is over it, but I also want the mouse pointer to be displayed at the top of the page when it's n ...

Adaptive Website displayed within an iframe

Currently, I have a responsive website that can be viewed here. The main objective is to embed this site into an iframe while maintaining its responsiveness. I attempted embedding my site in JSFiddle for testing purposes, which you can see here. However ...

How can I simulate the response of a VueX action using Vue-test-utils?

I am currently developing a test for a Vue component that interacts with a module store to execute an action and utilize the result from it. Since the action involves making requests to our API, I prefer not to run the test using the actual action. Instea ...

Why does Res.send return an empty object when console.log indicates it is not empty?

I am currently facing a challenge while using the Google Sheets API with Express, as I have limited experience with JavaScript. My goal is to pass a JSON object from Express to React, but for some reason, when I send the object, it appears empty on the fro ...

Discover every user receiving a database object instead of individual records with mLab

While using my express application with the mLab database, I encountered an issue. When trying to find only one record, everything works fine. However, when attempting to retrieve a list of users from the database, I receive the following response. Query ...

Creating a monorepo project in JavaScript that mimics the structure of Visual Studio projects

When working on a typical .NET Core project (with Visual Studio 2019), the structure typically looks like this: Example/ |-- Example.Common/ | |-- FileExample1.cs | |-- FileExample2.cs | `-- Example.Common.csproj |-- Example.WebAPI/ | |-- Control ...

Looking for a discreet JavaScript-based text editor with advanced features?

Our CMS has been using the now-unsupported RichTextBox control for a while, and we want to find a lighter-weight alternative with better cross-browser support. Initially, we were considering different ASP.NET components, but I am starting to think that an ...

componentWillReceiveProps with excessive conditional statements

Having recently ventured into React development, I've already worked on 3 major projects utilizing React+Redux. However, I've noticed a recurring pattern that I find quite displeasing: componentWillReceiveProps(nextProps) { if (nextProps.par ...

Carousel Owl 2: The Perplexing Challenge of Caption Animation

I'm encountering difficulties with animating my captions in owl carousel 2. Here is the current code I have: $(document).ready(function() { $("#slider").owlCarousel({ margin:0, autoplay : true, lazyLoad : true, items : 1, au ...