现象描述

主要问题出现在写 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 值相关内容时把数值四舍五入为整数。

更新日志

2025/10/12 14:46

查看所有更新日志

• 0b9c9-breaking change 项目更新迁移，顺道修改很多文件于 2025/10/12
• 080d9-docs: update于 2025/7/31
• fb8a0-feat(home): add title lines于 2025/7/26
• 816a9-feat(home): bg docs:(frontend): new blog于 2025/7/26