如何将-1至1的Y位置值转换为Lerp函数所需的Alpha参数？

需求说明 #

• 已完成文本Y轴位置从1到-1的动画
• 需同步实现颜色从白色(255,255,255)过渡到绿色(149,184,6)的动画
• 当前用lerp库计算RGB值，但lerp要求alpha参数为0-1的小数，而动态参数是范围-1到1的Y轴位置，要求输入-0.5时输出0.75

转换函数实现 #

编写translate函数，把-1到1的positionY映射为0到1的alpha值，公式逻辑是反转Y轴范围后缩放到0-1区间：

const translate = (positionY) => {
  return (1 - positionY) / 2;
};

验证几个关键值：

• 输入1 → (1-1)/2 = 0（对应初始白色）
• 输入-0.5 → (1 - (-0.5))/2 = 0.75（符合要求）
• 输入-1 → (1 - (-1))/2 = 1（对应目标绿色）

完整代码示例 #

将转换函数整合到RGB计算和颜色设置中：

// 定义转换函数
const translate = (positionY) => (1 - positionY) / 2;

// 计算各RGB通道值
const r = Math.floor(lerp(255, 149, translate(positionY)));
const g = Math.floor(lerp(255, 184, translate(positionY)));
const b = Math.floor(lerp(255, 6, translate(positionY)));

// 应用颜色到react-three-fiber文本
ref.current.color = `rgb(${r}, ${g}, ${b})`;

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