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

Question

所以我有一个颜色选择器，它以这种格式输出颜色:FFA6A6。它是来自 jscolor.com 的插件。当我用颜色选择器改变它时，我正在使用 three.js 来改变它的颜色。然而，three.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 类 ( reference )。例如:

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 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>