Trouble with applying colors to mesh in Three.js

I have a mesh that I create and color according to user specifications using an HTML5 color picker. To retrieve the color value from the color picker, I use the following code: var colorChosen = $("#colorAgent").val() // it returns the value as: "#ff0080" ;

After removing the "#" symbol, I convert it to hex code like this: colorChosen = "0xff0080" However, when I try to use the code below to apply the color to the mesh

var material = new THREE.MeshBasicMaterial({ color: colorChosen , wireframe_linewidth: 80, vertexColors: THREE.FaceColors, wireframe: false, opacity: 0.8, transparent: true, side: THREE.DoubleSide, visible: true });

It doesn't correctly apply the color, but if I remove the quotes from the colorChosen variable (i.e. colorChosen = 0xff00) it does apply the color.

Please advise on how to remove the quotes in order to properly color my mesh based on the selected color.

Thank you

javascriptthree.js

Answer №1

Take a look at the file Color.js. It contains numerous utility functions that can be helpful.

One way to adjust the color of your material is by using the following code:

material.color.setStyle( "#ff0080" );

Alternatively, you can set the color correctly from the start using this method:

var color = new THREE.Color( "#ff0080" );
var hex = color.getHex();
var material = new THREE.MeshBasicMaterial( { color: hex } );

This code snippet is compatible with three.js version r.58

Answer №2

The rationale behind not using quotes is because the color attribute should be in integer format rather than a string. Once you convert it to hexadecimal code, you can utilize parseInt() function to convert it back into an integer:

selectedColor = 0xff0080;
let material = new THREE.MeshBasicMaterial({ color: parseInt(selectedColor), wireframe_linewidth: 80,vertexColors:THREE.FaceColors, wireframe: false,opacity: 0.8,transparent: true, side: THREE.DoubleSide, visible: true });

Answer №3

Here's a way to specify the color of the mesh:

let material = new THREE.MeshLambertMaterial({color: 0xff0000, vertexColors: THREE.FaceColors, shading: THREE.SmoothShading});

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

The error code 13:5 indicates that the "Home" component has been registered in the Vue application but is not being used, leading to the error message "vue/no-unused-components"

I encountered this issue while working with Vue for the first time. I was attempting to construct a website using Vue/CLI by reorganizing and building from the inside out. However, I am unfamiliar with Vue and unsure how to resolve this error. The changes ...

javascripthtmlcssvue.js

There seems to be an issue with the bootstrap datepicker as it is throwing an error stating that $(

Currently in the process of developing a web application using AngularJS with MVC, I have integrated Bootstrap's datepicker into my project, Here is the code snippet: <div class="container"> <div class="row"> <div class=& ...

javascriptjqueryangularjstwitter-bootstrap

Internal styles are effective, while external styles seem to be less efficient

For some reason, internal CSS is working fine, but external CSS just won't cooperate. I even tried using the code !important, but it's like it doesn't understand. I'm trying to incorporate a gallery into my website, but I've hit a ...

javascripthtmlcssbootstrap-4styles

Retrieving information within a Vue component

I am struggling to access some data I have bound to a component without success. How can I achieve this? Below is my component: export default { name: 'component-vallingby', data() { return { } }, created() {}, methods: {} } And h ...

javascriptvue.js

Use jQuery to dynamically add a button to a table row

I have an array of JSON objects in JavaScript that I'm parsing from a JSON formatted string. My current approach involves looping through the array and adding the data to a table on the page. jQuery Code: $.each(objArr, function(key, value) { var ...

javascriptjqueryjson

Error: Discord bot encountered a TypeError while attempting to access the property 'id' of an undefined value

After revisiting a previous Discord bot package designed to track website updates, I encountered an issue. The code was originally scraped and last edited about 8 months ago with success. However, upon running node index.js, the following error occurred. ...

javascriptnode.jsdiscord

I receive a notification when I interact with a form in React on the internet

Encountering an error when a user fills out the form I'm constructing: react_devtools_backend.js:4026 Warning: A component is changing an uncontrolled input to be controlled. This is likely caused by the value changing from undefined to a defined val ...

javascriptreactjs

Displaying success and failure messages on a modal window using Ajax in PHP form

Unable to display error messages or success messages in the same modal window. I have set up Wordpress and using the following code: Form <form id="formcotizador" method="post" action="<?php echo get_template_directory_uri(); ?>/cotizador/procc ...

javascriptphpajaxwordpressforms

What could be the reason for the Unknown term error I am now encountering in Nuxt?

Today, I encountered an issue with my Nuxt project that was previously running smoothly. The problem seems to be related to Vue Flickity, which includes a CSS file from the node_modules directory. This setup has been functioning correctly until now. Upon ...

javascriptvue.jswebpacknuxt.js

Use the Facebook API to easily access any user's profile picture by providing their unique Facebook user ID

For my JavaScript function, I am taking the input "user_id" and expecting it to provide me with the profile photo data. Everything works fine when a logged in user's profile picture is being displayed. However, when I pass a logged out user_id, an err ...

javascriptfacebookfacebook-graph-api

Module for React Native that enables users to select and copy text within a specified view

Is there a feature that enables users to highlight and copy text from within a view? If not, is there a method to identify all "Text" type elements and extract the text they contain? <View> <Text>Text1</Text> <Text>Text2</Text& ...

javascriptandroidreact-nativenpmmodule

Enhance Your Website with a jQuery Plugin for Dynamic Updates to ElementsgetPost

Is there a way to update the content inside an element by passing a new value to the public method updateText? Currently, when I try to pass a new string to the updateText method and click the button, only the method name is received as an argument instea ...

javascriptjqueryhtml

Discovering instructions on locating Material UI component documentation

I'm having trouble locating proper documentation for MUI components. Whenever I attempt to replicate an example from the site, I struggle to customize it to fit my requirements. There are numerous props used in these examples that I can't seem to ...

javascriptreactjsmaterial-ui

Hiding a column in JQuery datatable without losing access to its value

I need to conceal the first column in the datatable labeled IID, while still being able to retrieve its value for database updates. Take a look at the code snippet below: var details = []; for (var m = 0; m < retrievedParsedValue.Table3.len ...

javascriptjqueryjsondatatable

"JavaScript issue: receiving 'undefined' when trying to retrieve input

This code snippet is for a web app that tracks the number of losses in a game. The problem arises when trying to retrieve the value, which returns undefined. Every time I reference the username variable, it returns undefined. document.addEventListener(&a ...

javascripthtmlcss

Javascript code not running as expected

Check out this code snippet: function generateRandomTeams() { const prom = new Promise(() => { // ... console.log('teams', props.state.teams) // logs }) .then(() => { console.log('here') // doesn't log }) ...

javascript

Enable users to handle the version of a dependency in an npm package

As I develop a module that relies on THREE.js, I am exploring the most effective method to include THREE as a dependency and ensure accessibility for both the module and its users. My goal is to provide users with access to the THREE library within their p ...

javascriptnode.jsnpmthree.jsnode-modules

Navigating through websites using Firefox is a breeze with the convenience

In my attempt to create an iPad-like interface, I have encountered a problem specifically with Firefox (since IE is not functioning as expected at the moment). The mouse fallback for non-touch screens seems to struggle when handling more than one drag even ...

javascriptfirefoxmousemouseevent

"Troubleshooting issue: jQuery AJAX encountering problems with parsing JSON

I recently came across a Uncaught SyntaxError: Unexpected end of input error in my code. var dataURL = "LineChartController?tp=" + tpAtt + "&dept=" + dept + "&date=" + dateMY; alert(dataURL); var JSONdata = jQuery.aja ...

javascriptajaxjquery

Determine the difference between dates using Angular 2's array filtering function

Here's a way to get the current time in seconds: let currentTimeInSeconds = new Date().getTime() / 1000; I have an array containing objects with an expirationDate property that returns expiration time in seconds. I can find the bills that have expir ...

javascriptangulartypescript