'@react-three/fiber: RingGeomertry doesn't take the color & shadow

There is something bugging me when using ring geometry. When I attach meshStandardMaterial and specify a color, it always shows as black. I can't use meshBasicMaterial because it's not affected by light. Ring geometry does not react like 3D geometries like sphere.

What i want to do is to show the color of the ring and it receive the shadow from the sphere.

I'm using @react-three/fiber as libray to render, you can see the example: https://codesandbox.io/s/zealous-hawking-llp33w?file=/src/App.js:0-811

I don't know if I'm missing something to understand which material to use, i'm new in @react-three/fiber or Three.js.

Thanks



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source