Skip to content

Instantly share code, notes, and snippets.

@ektogamat

ektogamat/MeshTransitionMaterialFree.jsx

Last active October 30, 2024 14:10
Show Gist options
  • Save ektogamat/1f93fc5056abf56ac6b342fb50c5836c to your computer and use it in GitHub Desktop.
Save ektogamat/1f93fc5056abf56ac6b342fb50c5836c to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. ektogamat revised this gist Oct 28, 2024. 1 changed file with 3 additions and 0 deletions.
    3 changes: 3 additions & 0 deletions MeshTransitionMaterialFree.jsx
    View file
    Original file line number Diff line number Diff line change
    @@ -1,3 +1,6 @@
    // 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'
  2. ektogamat created this gist Oct 27, 2024.
    18 changes: 18 additions & 0 deletions MeshTransitionMaterialFree.jsx
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,18 @@
    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} />
    }