设定颜色的一些坑
现象描述
主要问题出现在写 three.js 的时候，正在为一些直线设定 rgb 值。代码如下：
const lines: Line[] = [];
const gapX = 20;
const gapY = 20;
const gapZ = 20;
const range = 10;
for (let i = range; i > -range; i--) {
for (let j = range; j > -range; j--) {
const l = new Line(
new THREE.Vector3(0, 0, 0),
new THREE.Vector3(0, 0, -1),
300,
// new THREE.Color(`rgb(0, 0.1, 0.1)`)
new THREE.Color(`rgb(0, ${(i + range) / (range * 2) * 255}, ${(j + range) / (range * 2) * 255})`)
);
l.mesh.position.set(i * gapX, j * gapY, 150);
lines.push(l);
scene.add(l.mesh);
}
}（没错这就是主页的代码）
这一行公式并没有问题，没有超出 rgb 规定的 0-255 的数值范围。但是很诡异的是，所有直线都显示为白色（rgb(0, 0, 0)。这是为何？
解决
实际上，rgb 所规定的数值范围并非 0-255，而是 [0, 255] 范围内所有的整数。。。
所以上面的代码只需要把高亮行改为：
new THREE.Color(
`rgb(0, ${Math.round((i + range) / (range * 2) * 255)}, ${Math.round((j + range) / (range * 2) * 255)})`
)这样子，程序就可以正常运行了。
警示
注意函数的定义域（bushi
处理 rgb 值相关内容时把数值四舍五入为整数。