如何调整RGB参数使遍历dbIds的每次迭代生成不同红色调

实现方案 #

你可以通过遍历的索引值计算不同的红色参数，保证所有颜色都属于红色系的前提下，调整深浅/饱和度产生差异。这里提供两种常用实现方式：

1. 有序渐变红色调（按顺序从深到浅/浅到深） #

利用遍历索引和元素总数的比值生成渐变参数，视觉上更规整：

var count = dbIds.length;
let baseOpacity = 0.5;
dbIds.forEach(function (dbId, index) {
    // 用索引计算0~1的渐变比例
    let ratio = index / count;
    // 红色系规则：R通道始终保持高位，G、B通道同步低比例调整，不会偏出红色范围
    let r = 0.6 + 0.4 * ratio; // R值范围0.6~1，保证底色是红色
    let g = 0.1 * ratio; // G/B值最高只有0.1，避免偏色
    let b = 0.1 * ratio;
    let currentRed = new THREE.Vector4(r, g, b, baseOpacity);
    viewer.setThemingColor(dbId, currentRed);  
})

如果要反过来从浅到深，把ratio改成1 - index / count即可。

2. 随机红色调（差异更明显） #

如果不需要有序渐变，可以用随机数生成不同红色调：

var count = dbIds.length;
let baseOpacity = 0.5;
dbIds.forEach(function (dbId) {
    // 随机生成红色系参数
    let r = 0.6 + Math.random() * 0.4; // R值0.6~1
    let gbVal = Math.random() * 0.2; // G/B值0~0.2
    let currentRed = new THREE.Vector4(r, gbVal, gbVal, baseOpacity);
    viewer.setThemingColor(dbId, currentRed);  
})

效果参考 #

内容的提问来源于stack exchange，提问作者Deepali Srivastava