Using a HEX value from a color picker for three.js as a string

Question

So I have a color picker, which outputs colors in this format: FFA6A6. It is a plugin from jscolor.com. I am using three.js to change the color of something live when I change it with the color picker. However, three.js takes 0xFFA6A6, not just that. On top of that, I can not concatenate 0x to FFA6A6, which would make it a string. Also, it outputs colors as a string, and I cannot seem to remove it from being a string

ex:"FFA6A6" to FFA6A6

How would I change FFA6A6 to something that can be recognized as a three.js color? This is what I have:

function updateNoseColor(){
    scene.remove(nose);
    var geometry = new THREE.ConeGeometry( .4, 1, 32 );

    var material = new THREE.MeshBasicMaterial( {color: document.getElementById("nosecolor").value} );
    //three.js cannot take a string as a value, so im not sure what to do
    var nose = new THREE.Mesh( geometry, material );
    scene.add(nose);
}

Thank you for your time, there is probably an extremely simple solution that I do not know of. Again, the problem is removing the quotes, and adding it to 0x Thanks!

EDIT: I have tried converting to a decimal with ParseInt, it is not accepted by three.js

You can use parseInt, just make sure you include the 0x in front. 0xFFF === parseInt('0xFFF') will evaluate to true. — Drew Snow
– Drew Snow, Commented Dec 15, 2019 at 2:45
It returns this when I find it in console: Color {r: 0.4196078431372549, g: 1, b: 0.7529411764705882} — randomcoder
– randomcoder, Commented Dec 15, 2019 at 2:52
@UnityDude You added the JavaScript code in a pastebin. Could you add your HTML code too? Maybe using jsfiddle.net? — IamAshKS
– IamAshKS, Commented Dec 15, 2019 at 3:22

IamAshKS · Accepted Answer · 2019-12-15 03:27:31Z

5

You can use the Color class (reference) from three.js. For example:

var color = new THREE.Color("#FFA6A6"); // "FFA6A6" won't work!
color.getHex(); // 0xFFA6A6

That said, replace your following code with the given code:

var material = new THREE.MeshBasicMaterial( {color: document.getElementById("nosecolor").value} );

with

var material = new THREE.MeshBasicMaterial( {color: new Color(document.getElementById("nosecolor").value)} );

if document.getElementById("nosecolor").value = "#FFA6A6"

else with

var material = new THREE.MeshBasicMaterial( {color: new Color("#" + document.getElementById("nosecolor").value)} );

if document.getElementById("nosecolor").value = "FFA6A6" (no # in the start)

For example, run the below snippet (inspired from a three.js example).

function createSquare() {
    var scene = new THREE.Scene();
    var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    var geometry = new THREE.BoxGeometry(1, 1, 1);
    
    /* START - EXACT ANS */
    var a = "#"+document.getElementById("nosecolor").value;
    var material = new THREE.MeshBasicMaterial({
        color: (new THREE.Color(a))
    });
    /* STOP - EXACT ANS */
    
    var cube = new THREE.Mesh(geometry, material);
    scene.add(cube);

    camera.position.z = 5;

    function animate() {
        requestAnimationFrame(animate);
        renderer.render(scene, camera);
    }
    animate();
}

createSquare();

<input type="text" id="nosecolor" value="FFA6A6">

<script src="http://threejs.org/build/three.min.js"></script>

edited Dec 15, 2019 at 3:27

answered Dec 15, 2019 at 2:40

IamAshKS

8336 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

12 Comments

randomcoder Over a year ago

This does not work. I need to put it in a material.

IamAshKS Over a year ago

@UnityDude Please check my updated answer - it works! Try printing out document.getElementById("nosecolor").value, I think it's just "FFA6A6". If it is, you must use "#" + document.getElementById("nosecolor").value to initialize Color.

IamAshKS Over a year ago

@UnityDude Check the updated answer. If it still doesn't work, print out the value of document.getElementById("nosecolor").value and add the output here.

randomcoder Over a year ago

I'm so sorry, still doesn't work for me.

var a = "#"+document.getElementById("nosecolor").value; 	material = new THREE.MeshBasicMaterial( { 		color: (new THREE.Color(a)).getHex() 	});

IamAshKS Over a year ago

@UnityDude What's document.getElementById("nosecolor").value (print it)?

|

Collectives™ on Stack Overflow

Using a HEX value from a color picker for three.js as a string

1 Answer 1

12 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

12 Comments

Your Answer

Sign up or log in

Post as a guest

Related