使用来自three.js的颜色选择器的十六进制值作为字符串

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

Answer 1

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>