Selecting a HEX code from a color picker to configure three.js as a string

Question

Selecting a HEX code from a color picker to configure three.js as a string

Recently, I've been using a color picker from jscolor.com that outputs colors in the format of FFA6A6. The challenge I'm facing is integrating this color output with three.js, which requires the color to be in the format of 0xFFA6A6. As much as I try, I can't seem to figure out how to make this conversion without turning it into a string.

For example, I need to change "FFA6A6" to FFA6A6 in order for three.js to recognize it properly. Below is the code snippet showing my attempts:

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

    var material = new THREE.MeshBasicMaterial( {color: document.getElementById("nosecolor").value} );
    //I'm struggling with converting the color value to meet three.js requirements
    var nose = new THREE.Mesh( geometry, material );
    scene.add(nose);
}

I appreciate your time and expertise in helping me find a solution to this issue. If there's a simple way to remove quotes and add '0x', please let me know. Thank you!

EDIT: I attempted using ParseInt to convert to decimal, but unfortunately, it was not accepted by three.js.

javascript colors three.js

Answer 1

Answer №1

You have the option to utilize the Color class from three.js, which can be found in this reference. Here is an example:

var color = new THREE.Color("#FFA6A6"); // Note: "FFA6A6" alone won't work!
color.getHex(); // Result will be 0xFFA6A6

Instead of:

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

Use:

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

If the value of document.getElementById("nosecolor").value is "#FFA6A6", then:

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

If the value of document.getElementById("nosecolor").value is "FFA6A6" (without # at the beginning), then:

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

To illustrate: you can test the snippet below (based on 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);
    
    /* BEGIN - CORRECT ANSWER */
    var a = "#" + document.getElementById("nosecolor").value;
    var material = new THREE.MeshBasicMaterial({
        color: (new THREE.Color(a))
    });
    /* END - CORRECT ANSWER */
    
    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>

Answer 2

You have the option to utilize the Color class from three.js, which can be found in this reference. Here is an example:

var color = new THREE.Color("#FFA6A6"); // Note: "FFA6A6" alone won't work!
color.getHex(); // Result will be 0xFFA6A6

Instead of:

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

Use:

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

If the value of document.getElementById("nosecolor").value is "#FFA6A6", then:

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

If the value of document.getElementById("nosecolor").value is "FFA6A6" (without # at the beginning), then:

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

To illustrate: you can test the snippet below (based on 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);
    
    /* BEGIN - CORRECT ANSWER */
    var a = "#" + document.getElementById("nosecolor").value;
    var material = new THREE.MeshBasicMaterial({
        color: (new THREE.Color(a))
    });
    /* END - CORRECT ANSWER */
    
    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>

Selecting a HEX code from a color picker to configure three.js as a string

Answer №1

Similar questions

Remove Angular.js entirely from your system

What is the best way to ensure that the radius of the circle adjusts according to the canvas element in

Having trouble converting binary data to base64 using GridFS-stream

Is there a Node template engine similar to EJS that seamlessly integrates with HTML templates?

What is the best way to create interactive canvases that respond to multiple clicks using JavaScript?

Enhance Your Jekyll Site with the Minimal Mistakes Theme Plugin

Manipulate Angular tabs by utilizing dropdown selection

Trouble with controlling the speed of ajax requests while using vue-multiselect and lodash

What sets defineProps<{({})}>() apart from defineProps({ }) syntax?

The scatterplot dots in d3 do not appear to be displaying

Sending data from an AJAX POST request to a Grails Controller

The tooltip feature in jQuery is experiencing some stuttering issues

Sending SQL data to a Node.js module upon receiving a client request

Create an Angular 2 webpack production project and ensure that the dist folder does not contain any source code

How can I make the Box div bigger or smaller?

What is the method for setting a function as the initial value of a state variable?

Tips for adding new items to a Masonry Image List using React MUI

"Implement a feature to recognize and handle various file extensions within an npm

Utilizing Javascript for a Stopwatch/Countdown in the Format: 00:00:00

The Chrome developer tools are unable to locate the HttpRequest