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} />
}

To be honest that's quite disappointing (or brilliant), I still haven't figured it out! 🤔
Not sure if worth the paid version, but thanks for sharing

Thanks for your feedback mate. The free version is really simple. The paid version is a completely different code implementation using GLSL shaders. But I understand. No problem if you think the paid version isn't good enough for a purchase. I'm just trying my best to help. God bless you🙏🏻.

Reading now my previous comment I realise how rude I've been and I feel bad for that, but imagine my surprise when I looked up at the code and found just a bunch of lines and an easing function. 😂

Not having brought the paid version yet I cannot say anything, but the result I see in the demo is really good looking, great work man!

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.

👍