Three.js: new THREE.Color(0, 0, 255).getHexString() produces unexpected output

Created on 23 Oct 2020  路  2Comments  路  Source: mrdoob/three.js

Describe the bug

Using the getHexString() function of the threejs Color objects yields unexpected (wrong?) results.

To Reproduce

Steps to reproduce the behavior:
Code

    const blue = new THREE.Color(0, 0, 255); //blue
    console.log("Blue as object: ", blue); // still blue
    console.log("Blue as hex string: ", blue.getHexString()); // yields 00fe01, which represents a bright green

Live example

Expected behavior

In this example I would expect the resulting string to be "0000ff".

Screenshots

Capture

Platform:

  • Device: [Desktop]
  • OS: [Windows]
  • Browser: [Chrome]
  • Three.js version: [r119]

Most helpful comment

const blue = new THREE.Color(0, 0, 255); //blue

If you're passing R, G, and B arguments to Color they must be in the range [ 0, 1 ]. Alternatively you can pass a full hex number representing RGB to Color directly:

blue = new THREE.Color( 0, 0, 1 );
blue = new THREE.Color( 0x0000ff );

All 2 comments

const blue = new THREE.Color(0, 0, 255); //blue

If you're passing R, G, and B arguments to Color they must be in the range [ 0, 1 ]. Alternatively you can pass a full hex number representing RGB to Color directly:

blue = new THREE.Color( 0, 0, 1 );
blue = new THREE.Color( 0x0000ff );

In my case, printing the object did not help me find the cause of the problem. It seemed so obvious that 255 is a valid value.
Thanks a lot for the clarification! I think this is still quite unusual but I can see that changing this is not sensible and that there are plenty of alternative formattings available.

Was this page helpful?
0 / 5 - 0 ratings