Question

我只是搞乱了three.js，并遇到了以下示例 HERE 。我看到以下init函数（我没有发布整个函数，只是它的一部分）：

    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
}

现在我在几个地方看到了以下代码行：

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

当我浏览函数AmbientLight的文档时，我得到以下内容：

AmbientLight docs，

AmbientLight（颜色，强度）

color - 颜色的RGB分量的数值。强度 -   光的强度/强度的数值。

但到底是什么0x443333，我从来没有遇到过这样的事情。有人可以解释0x443333究竟是什么意思吗？

Answer 1

十六进制颜色是十六进制编码的字符串，表示颜色的RGB值您可以将此代码拆分为三个单独的hexadecimal部分;一个用于红色，绿色和蓝色（RGB）;

十六进制编码的工作原理如下：

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

因此您的RGB值如下：

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

因此，此颜色代表以下RGB颜色：rgb(68,51,51)。

此编码允许表示256 x 256 x 256 = 16777216种不同的颜色。

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);

检查this reference彩虹的所有其他颜色......

three.js中的复杂十六进制颜色值

1 个答案: