最近在学three.js,关于颜色的设置,比较困扰,索性学习了下。
首先我们来看两种设置颜色的方法:
- webgl、three.js中给物体设置一个颜色,使用
color: 0x00ff00
- css中设置一个颜色,可以使用
color: #00ff00
或rgba(0, 255, 0, 1)
以上三种方法有什么区别呢?
rgba(0, 255, 0, 1)
很好理解,就是一个RGB的色彩值;#00ff00
:css中经常使用,比较常见,是颜色的十六进制表示法,可以在浏览器调试工具等多个工具中,将rgba(0, 255, 0, 1)
转换为这种表示法;- 比较难懂的
0x00ff00
,它也是颜色的十六进制表示法,与#00ff00
的却别就是:把#00ff00
前面的#
,换成0x
(这里是重点哦,重点!!!)。
所以,看懂了吗?遇到0x00ff00
这种颜色的表示再不用纠结了,通过工具,获取到想要的颜色的#00ff00
表示,再把#
换成0x
,在webgl、three.js中使用就可以了。
最后,关于色彩值的转换工具:
- 浏览器调试工具
- 菜鸟教程的工具RGB转16进制
有这两个就够了。大家学习愉快!