Mesh transition Material Free version - Smooths the color transition

MeshTransitionMaterialFree.jsx

// Created by Anderson Mancini @2024
// Check documentation on how to use it at https://codesandbox.io/p/sandbox/meshtransitionmaterialfree-l7pzn7

import React, { useRef, useMemo } from 'react'
import { useFrame, useThree } from '@react-three/fiber'
import { easing } from 'maath'

export default function TransitionMaterialFree(props) {
  const materialRef = useRef()

  useFrame((_, delta) =>
    easing.dampC(
      materialRef.current.color,
      props.transitionColor,
      props.transitionTime ? props.transitionTime : 0.25,
      delta
    )
  )

  return <meshPhysicalMaterial ref={materialRef} {...props} />
}

Don't worry. You were direct but not rude, hehe. Indeed, making a smooth color transition is that simple. I just created a material that encapsulates the logic to make it simpler to use for beginners. But it wouldn't work for complex color transitions such as the ones that I'm using on the paid version with GLSL. That one requires storing both colors during the transition, controlling the shader, and injecting a custom shader inside default Three.js materials. It is a bit more complex :).

Anyway, thanks for your visit.

👍