Issue in Coloring mesh in Three,js

1
votes

I have a mesh which i create and color it as per user requirements. I m using HTML5 color picker. I am accessing color value from colorpicker as follows : var colorChosen = $("#colorAgent").val() // it gives value as : "#ff0080" ;

I m removing # making it as hex code as => colorChosen = "0xff0080" When I use following code to make mesh

var material new THREE.MeshBasicMaterial({ color:colorChosen , wireframe_linewidth: 80,vertexColors:THREE.FaceColors, wireframe: false,opacity: 0.8,transparent: true, side: THREE.DoubleSide, visible: true });

it doesn't apply color but if I remove quotes from colorChosen variable (ie colorChosen = 0xff00) it applies color.

Plz tell how to remove quotes so as to color my mesh as per color chosen .

Thanks

3
javascriptthree.js

3 Answers

1
votes

Look at Color.js. There are a number of utilities you can use.

For example, after you create your material you can reset the color like so:

material.color.setStyle( "#ff0080" );

You can alternatively set the color correctly the first time using this pattern:

var color = new THREE.Color( "#ff0080" );
var hex = color.getHex();
var material = new THREE.MeshBasicMaterial( { color: hex } );

three.js r.58

0
votes

The reason it works without quotes is that color attribute should be an integer, not a string. After you make it to hex code, you can pass it to parseInt() which returns the equivalent integer:

colorChosen = 0xff0080;
var material new THREE.MeshBasicMaterial({ color: parseInt(colorChosen) , wireframe_linewidth: 80,vertexColors:THREE.FaceColors, wireframe: false,opacity: 0.8,transparent: true, side: THREE.DoubleSide, visible: true });
0
votes

you can also give the color of the mesh like this,

var material = new THREE.MeshLambertMaterial({color: 0xffffff, vertexColors: THREE.FaceColors, shading: THREE.FlatShading});