Three.js使用Tween动画库实现车漆渐变

一、HSV插值

• 使用 HSV 空间进行插值：

  • 在 HSV 空间中，色相（h）值控制颜色本身，饱和度（s）控制颜色的鲜艳程度，亮度（v）控制颜色的亮度。通过仅调整 h 值并保持 s 和 v，颜色过渡会更平滑和自然。

• 控制饱和度和亮度：

  • 在过渡过程中保持适当的饱和度和亮度，避免颜色看起来灰暗或不自然。

• 使用平滑的缓动函数：

  • TWEEN.Easing.Cubic.InOut 确保渐变的速度变化平滑，这样在过渡过程中不会出现跳跃或者突兀的效果。

const startColor = new THREE.Color(0x146c68); // 麟光綠
				const endColor = new THREE.Color(0x990007); // 熔岩紅

				// 定义 Tween 对象来存储 RGB 插值
				const colorTween = {
					r: startColor.r,
					g: startColor.g,
					b: startColor.b,
				};

				const colorTween2 = new TWEEN.Tween(colorTween)
					.to({ r: endColor.r, g: endColor.g, b: endColor.b }, 2000) // 2秒渐变
					.easing(TWEEN.Easing.Cubic.InOut) // 使用线性插值
					.onUpdate(() => {
						// 每次更新时将 RGB 值应用于材质
						mt.carBody_MT_AuroraGreen.color.setRGB(
							colorTween.r,
							colorTween.g,
							colorTween.b
						);
					})
					.onComplete(() => {
						console.log("Color transition complete!");
					});

				// 启动渐变
				setTimeout(() => {
					colorTween2.start();
				}, 3000);

一、RGB插值

通过直接对 RGB 空间的每个通道（红、绿、蓝）进行插值，可以直接从绿色过渡到红色，而不会经过黄色或其他颜色。

• 直接使用 RGB 空间的线性插值：

  • 在 TWEEN.Tween 中对 r、g、b 进行线性插值，可以从一个颜色直接过渡到另一个颜色，而不会跨越其他颜色。

• 线性插值 (Linear)：

  • 使用 TWEEN.Easing.Linear.None 进行线性插值，确保在渐变过程中每个通道的变化是线性的，不会加速或减速，效果会更加均匀和平滑。

• 直接设置 RGB 值：

  • 使用 mt.carBody_MT_AuroraGreen.color.setRGB() 方法来直接设置材质的颜色，避免任何色相转换带来的额外效果。

const startColor = new THREE.Color(0x146c68); // 麟光綠
const endColor = new THREE.Color(0x990007);   // 熔岩紅

// 定义 Tween 对象来存储 RGB 插值
const colorTween = {
  r: startColor.r,
  g: startColor.g,
  b: startColor.b
};

const colorTween2 = new TWEEN.Tween(colorTween)
  .to({ r: endColor.r, g: endColor.g, b: endColor.b }, 2000) // 2秒渐变
  .easing(TWEEN.Easing.Linear.None) // 使用线性插值
  .onUpdate(() => {
    // 每次更新时将 RGB 值应用于材质
    mt.carBody_MT_AuroraGreen.color.setRGB(
      colorTween.r,
      colorTween.g,
      colorTween.b
    );
  })
  .onComplete(() => {
    console.log("Color transition complete!");
  });

// 启动渐变
setTimeout(() => {
  colorTween2.start();
}, 3000);