Issue with Three.js: The mouse hover effect does not revert back to the previous color

Currently, I am working on creating a pattern using Three.js. The goal is to change the color of a face to gray when the user hovers over it with the mouse, and then revert it back to its original light blue color when the mouse moves away. Unfortunately, this functionality is not working as expected. Below is the snippet of code that I suspect is causing the issue:

if (intersects.length > 0) {
    if (intersects[0].object != INTERSECTED) {
        if (INTERSECTED) {
            INTERSECTED.face.color.setRGB(INTERSECTED.currentRGB);
        }
        INTERSECTED = intersects[0];
        INTERSECTED.object.currentHex = INTERSECTED.object.material.color.getHex();
        INTERSECTED.face.color.setHex(0x777777);
        INTERSECTED.object.geometry.colorsNeedUpdate = true;
    }
} else {
    if (INTERSECTED) {
        INTERSECTED.material.color.setRGB( INTERSECTED.currentRGB );
    }
    INTERSECTED = null;
}

My suspicion is that the issue lies within the targetList = [] part of the code, as I noticed that nothing seems to be stored inside it when I log it using console.log(). You can view the full code in this Fiddle. Can you spot where I may be going wrong?

Thank you in advance for any insights you may have!

javascriptthree.js

Answer №1

Several issues have been identified in your code:

  1. It seems that you are attempting to use INTERSECTED.currentRGB to revert to the previous color. However, you have not stored the previous color in it (perhaps object.currentHex should have done this instead?)

  2. THREE.Color.setRGB requires 3 arguments: (r, g, b). Therefore, even if you were able to save [r, g, b] to currentRGB, which is not possible since THREE.Color.getRGB does not exist, your code would not function correctly. In this scenario, it would be better to utilize Hex values (THREE.Color.getHex and THREE.Color.setHex).

Below is the corrected section of the code, with the lines modified by me clearly indicated:

if (intersects.length > 0) {

    if (intersects[0].object != INTERSECTED) {

        if (INTERSECTED) {
            // Utilize hex values instead of RGB (setRGB requires 3 arguments, while hex requires only one)
            INTERSECTED.face.color.setHex(INTERSECTED.currentHex);
        }

        INTERSECTED = intersects[0];
        // Save the current color for future restoration
        INTERSECTED.currentHex = INTERSECTED.face.color.getHex();
        INTERSECTED.face.color.setHex(0x777777);
        INTERSECTED.object.geometry.colorsNeedUpdate = true;

    }

} else {

    if (INTERSECTED) {
        // Utilize hex values rather than RGB (setRGB requires 3 arguments, while hex requires only one)
        INTERSECTED.face.color.setHex(INTERSECTED.currentHex);
    }

    INTERSECTED = null;
}

You can view the corrected implementation in action here: https://jsfiddle.net/ord2rjw5/3/

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

Are there any downsides to utilizing the jQuery Load function?

I am in the process of creating a website that displays sensor data. I plan to incorporate a HighChart line chart to showcase this data. Since my website is relatively simple in terms of content, I have decided to consolidate all elements onto one page inc ...

javascriptjqueryload

Searching through a JSON object for nested objects within objects

Currently, I have some data structured as follows: var items = [ { "id" : 1, "title" : "this", "groups" : [ {"id" : 1, "name" : "groupA"}, {"id" : 2, "name" : "groupB"} ] }, { "id" : 2, "title" : "that", ...

javascriptjson

Angular2 - receiving an error message stating that this.router.navigate does not exist as a

Currently, I am delving into the world of Angular2 with Ionic and working on crafting a login page. However, upon loading the page, an error surfaces: 'router.initialNavigation is not a function' To address this issue, I inserted '{initialN ...

javascriptangulartypescriptrouter

Is it a bad idea to incorporate JavaScript functions into AngularJS directives?

I came across this snippet of code while working with ng-repeat: <div ng-show="parameter == 'MyTESTtext'">{{parameter}}</div> Here, parameter represents a string variable in the $scope... I started exploring if it was possible to c ...

javascriptangularjs

Ways to extract values from a javascript hash map by exclusively incorporating an array

So here's the issue I'm encountering. Let's consider the following scenario: let surfaces: Map<any, any> = new Map([{"83.1" => Object}, {"84.1" => Object}]) let arr1 = ["83.1"] This is the desired o ...

javascriptarraysangulartypescripthashmap

Tips for executing jsfiddle code within Joomla 3.2

I'm having trouble executing this code on my Joomla website. I have Joomla 3.2 installed with the JCK Editor, but the HTML tags are not functioning correctly. Can someone please assist me in running the following code: $("#text10").keyup(functio ...

javascriptjqueryjoomlajsfiddlejoomla3.2

Having trouble displaying Ad-Gallery Loader.gif?

Having trouble with an image gallery I found at . The loader.gif image isn't showing up in IE9, just a red X. Being new to JavaScript, I'm struggling to fix this issue located at the top of the JavaScript file. (function($) { $.fn.adGallery = ...

javascriptjquery

Updating the Ajax Url dynamically while scrolling

I am trying to update the Ajax URL dynamically, and here is my progress so far: var size=1; var from = 1; window.addEventListener('mousewheel', function(e){ if(e.wheelDelta<0 && from<5){ from++; } else if(e.whe ...

javascriptjqueryajax

Delay reading body until npm request completes

My current challenge involves using npm request and cheerio to extract webpages and analyze their HTML structure. Everything works smoothly in scenarios where the HTML is available upon request. However, I am facing a problem when a website initially displ ...

javascriptnpmnpm-request

Menu toggle vanishes suddenly

Whenever I click the toggle button, I notice that the menu (which I have set to appear on toggle) only shows for a brief moment before disappearing. As a beginner in bootstrap, I am sure I might have made some obvious mistakes. Any assistance would be gr ...

javascripthtmlcssbootstrap-4

Calculate the total of the temporary information entered into the input field

I'm totally new to all of this and definitely not an expert, but there's something that really bothers me. I found a website where you have to complete a captcha to log in. It goes like this: <input type="text" class="form-contr ...

javascripthtmltampermonkey

Issue with Jquery Crop: image not updating when using cropper

Here is the code I'm working with: <link rel="stylesheet" href="style.css"> <script src="/static/js/jquery/2.1.4/jquery.min.js"></script> <script src="http://fengyuanchen.github.io/cropper/js/cropper.min.js"></script> &l ...

javascriptjquerycropcropper

Javascript code generated by PHP is failing to run

When you select an option from the dropdown below: <select id='dropdown' name='dropdown' onchange='showChart(this.value)'> <option value="1">Foo</value> <option value="2">Bar</value> </select& ...

phpjavascriptajax

Is there a way to locate a parent class starting from a child class, and subsequently track down another child class from the parent?

I am facing a challenge with multiple tags structured like this: <div class="A"> <div class="B1">...</div> <div class="C1">Hello World!</div> <div class="C2">World Hell ...

javascriptcss

Urgent concern: the require function is being utilized in a manner that prevents the static extraction of dependencies [mysterious]

After implementing the magic-sdk version 8.0.1 on my project, I encountered the following warning message: warn - ./node_modules/magic-sdk/dist/es/index.js Critical dependency: require function is used in a way in which dependencies cannot be statically e ...

javascriptnext.jsmagic-sdk

What is the best way to organize React components/modules in order to effectively separate the UI?

Currently, I have developed three key components for a dashboard UI project in React. These components include a sidebar, top navigation bar, and a content container. As someone who is new to React after working with Angular, I am now seeking advice on how ...

javascriptreactjsreact-dom

What is the most effective method for organizing an object by its values using multiple keys?

I'm interested in utilizing the sort method mentioned in the link but I am facing { "CYLINDER": 2986, "HYDRAULIC": 1421, "JACKS": 84, "INSTALLATION": 119, "REAR": 61, "JACK": 334, "TUBE": 1, "FEED": 114, "ASSEMBLY": 326, "DCS": 2 ...

javascriptarrayssortingobject

Blogger Extension - Cross Domain Communication

As I work on creating a blogger plugin, my goal is to send information from the blog page for analytic purposes and then display the results on the visitor's page. Initially, I tried sending the page content using an ajax call but encountered an error ...

javascriptajaxjquerycross-domainblogger

Access the checkboxes that were previously selected and store them for future use when the page is

I am working on an HTML code where checkboxes are automatically checked and upon clicking a button, the values of checkboxes are passed through a function. Additionally, when a user checks a checkbox, the corresponding children checkboxes are also checked. ...

javascriptjquerycheckboxlocal-storage

What is the proper method for activating the lights in a traffic light sequence?

I've been working on creating a traffic light sequence where each time the "change lights" button is pressed, the light is supposed to change. However, I'm facing an issue where the code only displays the red light and doesn't switch to ambe ...

javascript