Warning/Error: THREE.Color is reporting an unidentified color code: #002dff

After getting the value from dat.GUI, I have to update the color. However,

var colored = new THREE.Color(value.replace("#","0x"));

This results in the warning "THREE.Color: Unknown color 0x002dff" and the 'colored' remains unchanged.

The value is #002dff (which changes constantly due to user input).

Edit: While I'm aware that I can use "THREE.Color( #002dff )", the color dynamically changes at runtime based on user input from controls created using dat.GUI, so I won't know the exact value to add to the code.

PS: The issue was caused by replace(), now it's fixed.

javascriptthree.js

Answer №1

Make sure to provide a hexadecimal value, not a string, when using the Color constructor. It is recommended to utilize the parseInt function for this purpose:

var hexValue = parseInt(value.replace("#", "0x"), 16);
var newColor = new THREE.Color(hexValue);

Answer №2

For a unique approach, consider using the code ((new THREE.color("#FF00FF")),. If you're looking to pick a favorite color for your program, take a look at this helpful link: . You could also check out Photoshop and select a color there to see its corresponding color code.

Answer №3

THREE.Color() has a method called .setStyle().

var obj;
var gui = new dat.GUI();
var props = {
    color: '#002dff'
};
var colorController = gui.addColor(props, 'color');
colorController.onChange(
    function(value){
    // uncomment this to see it's working
    //var colored = new THREE.Color(value);
    //console.log(colored);
    obj.material.color.setStyle(value);
  }
);

var sphere = new THREE.Mesh(new THREE.SphereGeometry(2, 32, 24), new THREE.MeshStandardMaterial());
sphere.material.color.setStyle("#002dff");
scene.add(sphere);
obj = sphere;

Example on jsfiddle showcasing three.js r85 and dat.GUI 0.6.5.

PS Avoid using new THREE.Color() for modifying an existing material color; instead, utilize the setXXXXX() methods of THREE.Color().

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

Sending a parameter to the window.onload callback function

Is there a way to pass parameters from ModelAndView to a window.onload function in JavaScript within an HTML file? Here is an example of how it can be done: @RequestMapping(value = "/admin/printtext") public ModelAndView printtext() { ModelAndView mo ...

javascripthtmlspringspring-boot

Unable to cache new entry at the specified location (/Users/android/.gradle/7.5.1/checksums/sha1-checksums.bin) due to a java.io.IOException with the message "Bad file descriptor"

I encountered two errors when trying to run my React Native project. Issue 1: Failed to add entry '/Users/saadafridi/.gradle/.tmp/gradle_download14928641310389655157bin' to cache sha1-checksums.bin (/Users/saadafridi/Desktop/mobileapp/android/.g ...

javascripttypescriptreact-nativeruntime-error

The issue arises when using IE8/9 with $.get and .html() functions, as the retrieved data

Below is a snippet of JavaScript code that I am currently working with: $(".refresh").on("click touch", function () { $.get($("a.suggest-date").attr('href') + '#suggestedDate', null, function (result) { console.log(result); ...

javascriptajaxjquery

Puppeteer: Locating elements using HTML attributes

I'm currently working on getting Puppeteer to locate an element on this webpage using its attribute data-form-field-value, which needs to match 244103310504090. Here is the HTML code for the button in question: <section class="fl-accordion-tab--c ...

javascriptnode.jspuppeteer

The Vue.js input for checkboxes and radios fails to toggle when both :checked and @input or @click are used simultaneously

Check out this example on JSFiddle! <script src="https://unpkg.com/vue"></script> <div id="app"> <label> <input type="checkbox" name="demo" :checked="isChecked" @input=" ...

javascriptvue.jsfrontend

The containerElement is not compatible for routing when using a menuItem in React JS

Greetings, I am fairly new to working with React.js and I am currently exploring how to implement routing using material-ui MenuItem. However, I seem to be encountering some difficulties when trying to utilize the ContainerElement feature upon clicking on ...

javascriptreactjsroutesmaterial-uimenu-items

Issue with Discord.js (14.1) - Message Handling Unresponsive

After developing a sizable Discord Bot in Python, I decided to expand my skills and start learning JS. Despite thoroughly studying the documentation and comparing with my original Python Bot regarding intents, I am facing difficulties getting the message ...

javascripttypescriptdiscord.js

Find the ID of the clicked table row using HTML and JavaScript

Currently, I am trying to implement this code snippet: <td align="center"> <div class="dropdown"> <button onclick="DropdownShow(this)" class="btn btn-default glyphicon glyphicon-picture"></button> <div id="@TableR ...

javascripthtml

What is the best way to transform a ReadonlyArray<any> into an array of any type?

There are certain native angular functions that return a ReadonlyArray, while some native angular callbacks pass ReadonlyArrays as well. Given that my typescript code may be utilized in various scenarios, I prefer not to mandate that all arrays passed to m ...

javascripttypescripttype-conversion

Obtain specific element from a list using attribute in JavaScript

Imagine having a collection like this: navigation: [ { title: "Overview", icon: "mdi-view-dashboard", active: false, id: 0, }, { title: "Personal Information ...

javascript

Guide on converting JSON to CSV in React by utilizing the map function

When I convert JSON data to CSV by clicking a button, it currently stores the data in the CSV file separated by commas. However, I want each piece of data to be on its own line. How can I achieve this? For example: Minor,Minor What I Want: Each item on a ...

javascriptnode.jsarraysreactjsmern

"Enhancing User Experience with Multiple Conditional Checkboxes in jQuery

Having difficulty making a checkbox change some HTML content using JQuery. There is a standard html checkbox with the following attributes <input type="checkbox" name="AQN1" class="checkbox Q1" value="AQN10" id="3mcq"> <input type="checkbox" nam ...

javascriptjqueryhtml

Struggling to create a BMI Calculator using JS, the result is consistently displaying as 'NaN'

Having trouble creating a BMI Calculator using JavaScript. The issue I'm facing is that the calculation always returns 'NaN'. I've tried using parseInt(), parseFloat(), and Number() but couldn't solve the problem. It seems that the ...

javascripthtml

What methods does node.js use to distinguish between server-side and client-side scripts?

One interesting aspect of PHP is the ability to combine both PHP and JavaScript code within a single file. However, it raises the question: How can we incorporate both server-side and client-side JavaScript code in an HTML file? ...

javascriptnode.js

Why does the React input value keep its value when the modal is re-rendered, despite the state being updated correctly?

Take a look at this sandbox link for the code snippet: Sandbox Showcased below is a table structure: https://i.sstatic.net/3F3Mc.png By clicking on the 'edit' button, a modal window opens up as shown below allowing you to edit input fields (onC ...

javascriptreactjsreact-hooksmodal-dialogbootstrap-5

Is it possible to improve the cleanliness of a dynamic button in Jquery?

I've just finished creating a dynamic button on the screen as per my boss's request. When this button is clicked, it triggers an email window for feedback submission. My aim is to streamline this script so that I can avoid digging into ASP marku ...

javascriptjquery

What could be the reason for the inability to install Angular JS 2?

Setting up Angular 2 for experimentation on my VPS has been quite a challenge. The initial steps can be found here. Upon trying the first command: $ npm install -g tsd@^0.6.0 I encountered success. However, the second step led to an error: tsd install ...

javascriptangularjsnode.js

Angular-dc bar graph failing to display properly

I'm having some trouble creating a bar chart using crossfilter, dc.js, and angular-dc. The rowchart is working properly, but the barchart is not displaying the bars. When I inspect the element in Chrome, I can see the values, and when I force focus, t ...

javascriptcssangularjsdc.js

Generate a dynamic HTML table using an array of objects

I have a dataset that I need to transform into an HTML table like the one shown in this image: https://i.sstatic.net/gRxJz.png Despite my attempts to write the code below, it seems that the rows are being appended in different positions. Is there another ...

javascriptjqueryarraysjson

Enhancing Image Quality with jspdf and Html2Canvas

We are currently utilizing jsPDF and HTML2canvas to create PDFs, however, we have noticed that the image resolution is quite high. Is there a method available to obtain low-resolution images using jquery, javascript, jsPDF, and html2canvas? function addE ...

javascriptjqueryjspdfhtml2canvas