HEX 到 Threejs rgb 转换与 THREE.MeshPhongMaterial 不起作用

Question

I am using below js code to change color of a part in 3D model

document.getElementById("custom_color").onchange = function() {
    var custom_color = $("#custom_color").val().split('#').join("0x");
    console.log(custom_color);
    const color = new THREE.MeshPhongMaterial({ color: custom_color, shininess: 10 });
    console.log(color);
    var name = $(".--is-active").data("option");
    initColor(speaker,name,color);
  }

First console.log(custom_color) giving result

0xd04343

Second console.log(color) giving as

color object as 
b: 1
g: 1
r: 1

I am unable to understand why THREE.MeshPhongMaterial not converting it.

Answer 1

This happens because you pass string "0xd04343" instead of a real hex 0xd04343 . If you want to pass a string, then leave it as is with # and pass it into color parameter: "#d04343". That format of string in CSS-style is valid for color.

The docs say:

It can be a CSS-style string. For example:

'rgb(250, 0,0)'

'rgb(100%,0%,0%)'

'hsl(0, 100%, 50%)'

'#ff0000'

'#f00'

'red'