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

Question

所以我有一个颜色选择器，它以这种格式输出颜色：FFA6A6。它是来自 jscolor.com 的插件。当我使用颜色选择器更改某些东西的颜色时，我正在使用 Three.js 来更改它的颜色。然而，two.js 需要 0xFFA6A6，不仅如此。最重要的是，我无法将 0x 连接到 FFA6A6，这将使其成为一个字符串。另外，它以字符串形式输出颜色，我似乎无法将其从字符串中删除

例如：“FFA6A6”至 FFA6A6

如何将FFA6A6更改为可以识别为 Three.js 颜色的颜色？这就是我所拥有的：

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);
}

感谢您的宝贵时间，可能有一个我不知道的非常简单的解决方案。同样，问题在于删除引号并将其添加到0x “谢谢”中！

编辑：我尝试使用 ParseInt 转换为十进制，它不被 Three.js 接受

Answer 1

您可以使用Three.js 中的Color类（参考）。例如：

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

也就是说，将以下代码替换为给定的代码：

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

和

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

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

否则与

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

if document.getElementById("nosecolor").value = "FFA6A6" （开头没有#）

例如，运行下面的代码片段（受 Three.js示例启发）。

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>