Error in converting HEX to RGB in Three.js using THREE.MeshPhongMaterial

Below is the JavaScript code I am using to change the color of a part in a 3D model:

document.getElementById("custom_color").onchange = function() {
    var custom_color = $("#custom_color").val().split('#').join("0x");
    console.log(custom_color);
    const color = new THREE.MeshPhongMaterial({ color: custom_color, shininess: 10 });
    console.log(color);
    var name = $(".--is-active").data("option");
    initColor(speaker,name,color);
  }

The first console.log(custom_color) produces this result:

0xd04343

The second console.log(color) shows the color object as:

color object as 
b: 1
g: 1
r: 1

I am puzzled as to why THREE.MeshPhongMaterial is not converting it properly.

Answer №1

The reason for this issue is that you are passing the string "0xd04343" instead of an actual hexadecimal value like 0xd04343. If you intend to pass a string, keep it as is with the hash symbol # and provide it to the color parameter in this format: "#d04343". This CSS-style string is valid for specifying colors.

According to the documentation:

You can use a CSS-style string such as:

'rgb(250, 0, 0)'

'rgb(100%, 0%, 0%)'

'hsl(0, 100%, 50%)'

'#ff0000'

'#f00'

'red'

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

Utilize ngx-filter-pipe to Streamline Filtering of Multiple Values

Need assistance with filtering an array using ngx-filter-pipe. I have managed to filter based on a single value condition, but I am unsure how to filter based on multiple values in an array. Any guidance would be appreciated. Angular <input type="text ...

Configuring Angular routes based on service method invocation

I have my routes configured in @NgModule. I also have a service that determines which parts of the application to display based on specific conditions. I need to call this service and adjust the routes according to its output. Issue: The route configurati ...

Implement a feature in NextJS where an MP3 file is played upon clicking

Just getting started with JS frameworks and having some trouble with the function syntax. Here's what I have so far: when the button is clicked, it should play a quick audio file specified below the button in the Audio tags. Any suggestions on how to ...

"Learn the correct method of passing JSON data through Ajax data parameters, even when including query

I've encountered a problem while working with JSON. Everything was going smoothly until I realized that passing JSON containing query-string URLs is causing an issue. Here's an example of the JSON: var json='{"nodeDataArray": [ {"info ...

Client cannot establish a connection to the database using the MongoDB driver

My node app crashes when I include the line of code: app.use('/api', routes). However, if I remove this line, the app runs without any issues. The error message displayed is: return db.collection(name) ^ TypeError: Cannot read properties of unde ...

Unraveling the enigmatic duality of self-closure with Bootstrap 4

In the small div element, I need to incorporate multiple tooltip functionalities. Furthermore, as this div has an "overflow: auto" attribute, Popper.js automatically ensures that the tooltips remain within the boundaries of the element. In such situation ...

In Nodejs, there is a way to determine the size of a document stored

I have a question: How can I determine the size of a cursor, in terms of kilobytes (KB), without actually fetching it? I've come across various sources, such as this post on Stack Overflow, but I don't want to retrieve the query result just to f ...

Exploring the concept of utilizing named arguments within Express.js routing

I've searched extensively, but can't seem to find any information on this topic. My goal is to create requests like the following: url/list/message=hello?id=1234 Despite my efforts, I have not come across any resources on how to achieve this us ...

Updating Array Values in AngularJS based on Input Text Box Modifications

In my application, there is a text box that looks like this - <input type="text" class="form-control" id="inputID" name="ItemId" ng-model="inputItemId" ng-required="true" ng-blur="addValueToArray(inputItemId)"/> The user has the ability to add or r ...

Is there a way to send the image's name as a parameter?

I am facing a challenge in achieving a specific task and need some guidance. My current approach involves passing the image name as a parameter to the cancelimage.php script, but it seems like I am not utilizing the variable 'image_file_name' cor ...

Storing the output value of a JavaScript function in robot framework selenium2library results in a returned value of

My main goal is to automatically click on all the links present on a web page and then close any tabs that open up as a result. The structure of these links is like this: <ul> <li> <a href=#>random text</a> </li> ...

Adding a class to an element within a React template using JS is not possible

I am currently using a Bootstrap template for my React app. Within the template, there is a JavaScript code that should make the header sticky when scrolling. It functions as expected in pure HTML, but once I move the header to a React template (necessary ...

Is it possible to assign functions to each keystroke that does not correspond to a specific keybinding in Angular?

In Angular, there are events tied to keybindings or actions like (focus), (blur), (keydown), and more. You can bind specific keybinds to certain keys as well, such as (keydown.enter), (keydown.alt), etc. Is there a method to trigger an event only when it ...

Validating parent in Classic ASP JavaScript

In my project, I am using a Classic ASP file coded in JavaScript to show HTML content. My goal is to detect whether the page is being displayed within a frame or not, and if it's not, redirect it to another page. Is there a way to achieve this in Clas ...

On a live server, the Bootstrap modal fails to function as intended

Trigger Button: while ($row = mysqli_fetch_array($result)) { $name = $row['name']; $id = $row['id']; echo '<a data-target="#exampleModal" class="wpmui-field-input button wpmui-submit button-primary" data ...

Dynamic autocomplete feature with AJAX integration for filtering in Flask

Looking for some guidance on creating an HTML form with two input fields. Check out the HTML template code below: <form role="form" action="/cities/" method="get" autocomplete="on"> <label for="#input1"><strong>Country:</strong&g ...

What are some strategies for testing a dynamically loaded component in Vue?

Here is the code snippet of the component I am currently testing: <template> <component :is="content" /> </template> <script setup> import { defineAsyncComponent } from 'vue' import { useRoute } from 'vue ...

Reloading issue with NextJs when utilizing next-i18next for translations on a specific

Having trouble with next-i18next in my app. Implemented everything correctly, but the layout keeps rerendering on pages with getStaticProps. Need to find a way to prevent this. Created a file named withStaticTranslations.ts for pages, but when trying to l ...

How can the communication be improved between a JSP page and a Java object?

In the midst of a project involving a java back-end and web page UI, my goal is to integrate the two seamlessly. The java system functions on the server, storing rules created within the web page's interface. To achieve this, I am seeking a way for te ...

how to ensure a consistent property value across all scopes in AngularJS

Here is my perspective <div ng-if="isMultiChoiceQuestion()"> <li class="displayAnswer" ng-repeat="choice in getMultiChoice() track by $index" ng-if="isNotEmpty(choice.text.length)"> <input type= ...