complex hex color value in three.js

Question

I was just messing around with three.js and came across the following example HERE. I see the following init function(i am not posting the whole function , but just a part of it):

    function init() {

        renderer = new THREE.WebGLRenderer( { antialias: true } );
        renderer.setPixelRatio( window.devicePixelRatio );
        renderer.setSize( window.innerWidth, window.innerHeight );
        container.appendChild( renderer.domElement );

        scene = new THREE.Scene();

        camera = new THREE.PerspectiveCamera( fov, window.innerWidth / window.innerHeight, 1, 1000 );
        camera.position.z = 100;
        camera.target = new THREE.Vector3();

        controls = new THREE.OrbitControls( camera, renderer.domElement );
        controls.minDistance = 50;
        controls.maxDistance = 200;

        scene.add( new THREE.AmbientLight( 0x443333 ) );

        var light = new THREE.DirectionalLight( 0xffddcc, 1 );
        light.position.set( 1, 0.75, 0.5 );
        scene.add( light );

        var light = new THREE.DirectionalLight( 0xccccff, 1 );
        light.position.set( -1, 0.75, -0.5 );
        scene.add( light );
        //.....  more code
}

Now in a couple of places i see the following line of code used :

scene.add( new THREE.AmbientLight( 0x443333 ) );

When i surf the docs for the function AmbientLight i get the following:

AmbientLight docs,

AmbientLight( color, intensity )

color — Numeric value of the RGB component of the color. intensity -- Numeric value of the light's strength/intensity.

But what exactly is 0x443333 , I have never before come across something like this. Can somebody explain what exactly does 0x443333 mean ?

This: 0x443333 is the same as the hexidecimal #443333 (in CSS, for example, or Photoshop) - just expressed with a 0x to indicate that the number is written in base 16, so javascript parses these correctly. (this is also why you cannot write the number 01 in javascript, as it will be marked as incorrect) — somethinghere
– somethinghere, Commented Jul 4, 2016 at 14:27

Wilt · Accepted Answer · 2016-07-04 14:53:36Z

2

A hex color is a hex encoded string representing the RGB values of the color.
You can split this code in three separate hexadecimal parts; one for Red, Green and Blue (RGB);

Hex encoding works as follows:

0 : 0
1 : 1
2 : 2
3 : 3
4 : 4
5 : 5
6 : 6
7 : 7
8 : 8
9 : 9
a : 10
b : 11
c : 12
d : 13
e : 14
f : 15

So your RGB values are as follows:

Red   = 44 -> 4 x 16 + 4 -> 68
Green = 33 -> 3 x 16 + 3 -> 51
Blue  = 33 -> 3 x 16 + 3 -> 51

So this color represents the following RGB color: rgb(68,51,51).

This encoding allows representation of 256 x 256 x 256 = 16777216 different colors.

white : 0x000000 = rgb(0,0,0);
black : 0xffffff = rgb(255,255,255);
red   : 0xff0000 = rgb(255,0,0);
green : 0x00ff00 = rgb(0,255,0);
blue  : 0x0000ff = rgb(0,0,255);

Check this reference for all other colors of the rainbow...

edited Jul 4, 2016 at 14:53

answered Jul 4, 2016 at 14:44

Wilt

44.9k15 gold badges163 silver badges216 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Allie Over a year ago

Sorry to revive an old thread, but I'm just learning Three.JS and have seen this notation quite often in examples, etc. Do you know why 0xFFFFFF might be preferable to "#FFFFFF" at all? It looks like you're able to provide either, at least for things like the colour of a light source like above.

Wilt Over a year ago

@AllieHowe Not sure actually, it is like hexadecimal number vs hexadecimal string, so my guess would be that the string probably leads to more "work" under the hood. To derive the Red, Green and Blue values you would first need to convert from string to a number, where as the other value is already a number so you skip that type conversion step. Om the other hand, when using the string in css, you could use it immediately. So I guess "what is best" depends on the user case. I wouldn't worry too much about it, since both values are supported, you could just use what you personally prefer.

Collectives™ on Stack Overflow

complex hex color value in three.js

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related