CODEWITHSUNDEEP
three.jsreact-three-fiber
VincenzoDelre
VincenzoDelre

Reputation: 71

MeshBasicMaterial color gradient @react-three/fiber

someone knows how to assign a gradient to a MeshBasicMaterials that in my case is a Sphere? At the moment I have an orange #ff8300 sphere that I would like to have a gradient from #ffff00 to #ff0000.

🙏

<mesh>
 <sphereBufferGeometry args={[0.8, 30, 30]} attach="geometry" />
 <meshBasicMaterial color={0xff8300} attach="material" />
            
</mesh>

Upvotes: 1

Views: 3896

Answers (1)

silencedogood
silencedogood

Reputation: 3299

I found that the easiest way to accomplish a gradient material with @react-three/fiber is using the GradientTexture helper component included with @react-three/drei.

Here's a simple example that's mostly straight from the docs:

<mesh ref={sphereRef}>
  <sphereGeometry args={[2.5, 30, 30]} attach="geometry" />
     <meshBasicMaterial>
        <GradientTexture
          stops={[0, 1]} // As many stops as you want
          colors={['aquamarine', 'hotpink']} // Colors need to match the number of stops
          size={1024} // Size is optional, default = 1024
         />
    </meshBasicMaterial>
</mesh>

Upvotes: 5

Related Questions