I'm trying to write a large number of objects at once and I want the color to fade. However, after making a string using .toString(16), it doesn't read in the code where it says, new THREE.MeshBasicMaterial({ color: '0x' + color, wireframe: false, opacity: 0.5 });

Here's the code currently:

    for (var i = 0; i < 10; i++) {
        for (var j = 0; j < 10; j++) {
            for (var k = 0; k < 10; k++) {
                geometry = new THREE.CubeGeometry(50, 50, 50);
                colorr = 254 / 10 * k;
                colorr = Math.round(colorr);
                colorr = colorr.toString(16);
                colorg = 254 / 10 * k;
                colorg = Math.round(colorg);
                colorg = colorg.toString(16);
                colorb = 254 / 10 * k;
                colorb = Math.round(colorb);
                colorb = colorb.toString(16);
                color = '0x' + colorr + colorg + colorb;
                material[i] = new THREE.MeshBasicMaterial({ color: color, wireframe: false, opacity: 0.5 });


                mesh[i] = new THREE.Mesh(geometry, material[i]);
                mesh[i].position.x = -500 + (k * 100);
                mesh[i].position.y = -500 + (j * 100);
                mesh[i].position.z = -500 + (i * 100);
                scene.add(mesh[i]);
                objects.push(mesh[i]);

            }
        }
    }

However, it just results in a grayish black color.

I'm trying to write a large number of objects at once and I want the color to fade. However, after making a string using .toString(16), it doesn't read in the code where it says, new THREE.MeshBasicMaterial({ color: '0x' + color, wireframe: false, opacity: 0.5 });

Here's the code currently:

    for (var i = 0; i < 10; i++) {
        for (var j = 0; j < 10; j++) {
            for (var k = 0; k < 10; k++) {
                geometry = new THREE.CubeGeometry(50, 50, 50);
                colorr = 254 / 10 * k;
                colorr = Math.round(colorr);
                colorr = colorr.toString(16);
                colorg = 254 / 10 * k;
                colorg = Math.round(colorg);
                colorg = colorg.toString(16);
                colorb = 254 / 10 * k;
                colorb = Math.round(colorb);
                colorb = colorb.toString(16);
                color = '0x' + colorr + colorg + colorb;
                material[i] = new THREE.MeshBasicMaterial({ color: color, wireframe: false, opacity: 0.5 });


                mesh[i] = new THREE.Mesh(geometry, material[i]);
                mesh[i].position.x = -500 + (k * 100);
                mesh[i].position.y = -500 + (j * 100);
                mesh[i].position.z = -500 + (i * 100);
                scene.add(mesh[i]);
                objects.push(mesh[i]);

            }
        }
    }

However, it just results in a grayish black color.

• javascript
• three.js
• webgl

• Did you look at the color string to see what you actually produced? – Floris Commented Aug 20, 2013 at 3:32
• yeah, it was 0xe5e5e5 in the end. i even tried writing it in quotes '0x0099ff' and it turned out that didn't work. so, it has something to do with strings – JVE999 Commented Aug 20, 2013 at 3:49
• If you want to use strings, you need to use '#', not '0x': material.color.setStyle( "#0099ff" ); three.js r.60 – WestLangley Commented Aug 20, 2013 at 5:10
• Are you sure? I think I tried that, but it didn't work. Or do you mean with both the '#' and the setStyle function? – JVE999 Commented Aug 20, 2013 at 22:14

2 Answers 2

> 0xe5e5e5

15066597

> parseInt('0xe5e5e5', 16)

15066597

Long story short, "0x" is just a convenient way to write numbers in hex so that they look like CSS colors, but JavaScript treats numbers written this way as normal (decimal) numbers, and so does Three.js. The parseInt() function will correctly convert a string from hex to decimal given the appropriate radix, so you can construct your color as a hex string and convert it to a number.

It would be much easier to make the ponents from 0 to 1 and use...

var color = new THREE.Color().setRGB(r, g, b);