I need to update the color after receiving the value from dat.GUI . But, this
var colored = new THREE.Color(value.replace("#","0x"));
is throwing this warning "THREE.Color: Unknown color 0x002dff" and the 'colored' isn't updating.
value = #002dff (at that time, it keeps on changing, user input)
Edit: I know I can use this as "THREE.Color( #002dff )", but the color is changing at run time according to the user input from controls I've created using dat.GUI, so I won't be knowing the actual value that can be added to the code.
PS: It was replace()
which was causing the problem. It's solved.
I need to update the color after receiving the value from dat.GUI . But, this
var colored = new THREE.Color(value.replace("#","0x"));
is throwing this warning "THREE.Color: Unknown color 0x002dff" and the 'colored' isn't updating.
value = #002dff (at that time, it keeps on changing, user input)
Edit: I know I can use this as "THREE.Color( #002dff )", but the color is changing at run time according to the user input from controls I've created using dat.GUI, so I won't be knowing the actual value that can be added to the code.
PS: It was replace()
which was causing the problem. It's solved.
-
wow just pass it like
new THREE.Color("#fff000")
or etc – Maciej Kozieja Commented Jun 7, 2017 at 11:11 - Only if I could. I mentioned that the value is generating from dat.GUI . – Utkarsh Zaveri Commented Jun 7, 2017 at 11:19
- What revision of Three.js do you use? In the latest revision (r85) it works totally fine. – prisoner849 Commented Jun 7, 2017 at 12:53
- r84. And I doubt it'll work as dat.GUI returns string value and the color constructor requires Hex value. @Hellium just mentioned this in his ment. – Utkarsh Zaveri Commented Jun 7, 2017 at 13:01
- Take a look at my answer and check its example, please. – prisoner849 Commented Jun 7, 2017 at 13:04
3 Answers
Reset to default 14You have to give a hexadecimal number, not a string to the Color
constructor. Try to call the parseInt
function:
var colorValue = parseInt ( value.replace("#","0x"), 16 );
var colored = new THREE.Color( colorValue );
try this ((new THREE.color("#FF00FF")),.if you want to choose a favortie color for your program .check this link out http://www.rapidtables./web/color/RGB_Color.htm ,are got to the photoshop and their you can select the color and it shows the color code .
THREE.Color()
has the .setStyle()
method.
var obj;
var gui = new dat.GUI();
var props = {
color: '#002dff'
};
var colorController = gui.addColor(props, 'color');
colorController.onChange(
function(value){
// unment this to see it's working
//var colored = new THREE.Color(value);
//console.log(colored);
obj.material.color.setStyle(value);
}
);
var sphere = new THREE.Mesh(new THREE.SphereGeometry(2, 32, 24), new THREE.MeshStandardMaterial());
sphere.material.color.setStyle("#002dff");
scene.add(sphere);
obj = sphere;
jsfiddle example. three.js r85, dat.GUI 0.6.5
PS Don't use new THREE.Color()
to change an exisiting colour of a material, use setXXXXX()
methods of THREE.Color()