When using react-three-fiber and @react-spring/three, React.jsx: type is valid

[eamon-sun]

I want to make a customed material animated, but here is a warning.

import * as THREE from 'three'
import { extend } from '@react-three/fiber'
import { a, useSpring } from '@react-spring/three'

class AreaBorderMaterial extends THREE.ShaderMaterial
{
    constructor()
    {
        super({
            uniforms: {
                uColor: { value: new THREE.Color() },
                uAlpha: { value: null },
                uLoadProgress: { value: null },
                uProgress: { value: null }
            },
            vertexShader: `
                varying vec3 vPosition;

                void main()
                {
                    vec4 modelPosition = modelMatrix * vec4(position, 1.0);
                    gl_Position = projectionMatrix * viewMatrix * modelPosition;
                
                    vPosition = position;
                }
            `,
            fragmentShader: `
                #define M_PI 3.1415926535897932384626433832795

                uniform vec3 uColor;
                uniform float uAlpha;
                uniform float uLoadProgress;
                uniform float uProgress;
                
                varying vec3 vPosition;
                
                void main()
                {
                    float angle = atan(vPosition.x, vPosition.y);
                    float loadProgress = step(abs(angle / M_PI), uLoadProgress);
                    float progress = step(1.0 - abs(angle / M_PI), uProgress);
                
                    float alpha = uAlpha;
                    alpha -= uAlpha * 0.5 * (1.0 - loadProgress);
                    alpha *= progress;
                
                    gl_FragColor = vec4(uColor, alpha);
                }
            `,
            wireframe: false,
            transparent: true,
            depthTest: true,
            depthWrite: false
        })

    }

    get uColor()
    {
        return this.uniforms.uColor.value
    }

    set uAlpha(v)
    {
        this.uniforms.uAlpha.value = v
    }

    set uLoadProgress(v)
    {
        this.uniforms.uLoadProgress.value = v
    }

    set uProgress(v)
    {
        this.uniforms.uProgress.value = v
    }
}


extend({ AreaBorderMaterial })
export { AreaBorderMaterial }

function AreaBorder({ _width, _height, _thickness, starter }) {
    const { uP } = useSpring({ to: {uP: starter ? 0 : 1}})
    return (
        <mesh>
            <areaBorderBufferGeometry args={[_width, _height, _thickness]}/>
            <a.areaBorderMaterial uColor={0xffffff} uAlpha={0.25} uLoadProgress={1} uProgress={uP}/>
        </mesh>
    )
}

[joshuaellis]

I don't think the animated short hand works with extended components... might need to wrap it in 'animated()'

[eamon-sun]

I also tried it, but it did not work.

[joshuaellis]

If you can provide a sandbox I can take a look da