I have already added some mesh to the scene. I am attempting to change the color of the material. The color change is done via a color palette in the menu. I am utilizing a jQuery plugin for this:
I am aware that the color palette can provide me with HSB values, but I am using the following function from the plugin:
$.colpick.hsbToHex(hsb)
It returns a string, not an integer value:
$.colpick.hsbToHex(hsb) receives an object like {h:0, s:100, b:100} and returns the corresponding HEX string (without the #).
Here is where I call a function to change the mesh color:
var buttonColorPicker = document.getElementById( 'color-palette-button' );
buttonColorPicker.onclick = function( sender ) {
this.changeColorForActiveMesh( this.temporary.colorPicker )
}.bind( this );
This is the function that changes the material:
// Note: colorHex is a string, not an integer in this case
// I am converting the string to the RGB object
// by using bit shifting to get an actual integer representation
GC3D.Utils.prototype.changeColorForActiveMesh = function( colorHex ) {
this.scene.children.forEach(function( item ) {
if ( item instanceof THREE.Mesh ) {
var rgbObject = this.convertHexToRgb( colorHex );
var rgbInt = ( ( rgbObject.red & 0x0ff ) << 16 )
| ( ( rgbObject.green & 0x0ff ) << 8 )
| ( rgbObject.blue & 0x0ff );
item.material.color.setHex( rgbInt );
}
}.bind( this ));
};
I have also prepared a function to convert from hex to RGB object:
GC3D.Utils.prototype.convertHexToRgb = function( hex ) {
var rgbObject = /^0x?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
return rgbObject ? {
red: parseInt( rgbObject[1], 16 ),
green: parseInt( rgbObject[2], 16 ),
blue: parseInt( rgbObject[3], 16 )
} : undefined;
};
There is a /^0x? part in Regex because I save the converted hex value from the jQuery plugin as temporary values.
Proof:
I also conducted a test here:
To verify the accuracy of the final integer count in my function, and it seems to be working fine. So what could be wrong? Is there another way to change the color in THREE.JS?
UPDATE #1:
I have switched the material type from MeshLambert to MeshBasic, and now the palette is correctly changing the color! However, this is not a solution to the issue, as I am still curious why MeshLambert is not functioning well in my code... I have attempted to set different ambient/color values, but it behaves strangely...
For example:
new THREE.MeshLambertMaterial({
color: 0xff00ff,
ambient: 0x167aff,
wireframe: false
});
It displays as red:
But 0xff00ff is: And 0x167aff is:
How can it be red?