MeshBasicMaterial color gradient @react-three/fiber

Question

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>

With plain three.js you would normally create a color gradient with a raw canvas, use it to create an instance of THREE.CanvasTexture and then apply it to the map property of your material. — Mugen87
– Mugen87, Commented Aug 24, 2021 at 15:18

silencedogood · Accepted Answer · 2022-07-21 13:35:38Z

5

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>

edited Jul 21, 2022 at 13:35

answered Jul 21, 2022 at 13:30

silencedogood

3,3291 gold badge16 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

MeshBasicMaterial color gradient @react-three/fiber

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related