Adding gradient color to a sphere

Question

I want to add gradient color to the sphere, currently I am setting the color:

<a-sphere position="1 1 0" color="#ef2d5e">
    <a-animation attribute="rotation" to="0 360 0" dur="10000" easing="linear" repeat="indefinite">
    </a-animation>
</a-sphere>

Demo

How do I add gradient to the sphere? Is there any way.

could anybody help me with this: https://stackoverflow.com/questions/52812334/a-frame-gradient-on-transparent-png-image — , Oct 15 '18 at 08:14

ngokevin · Accepted Answer · 2017-04-17T18:27:03.130

3

Try https://github.com/zcanter/aframe-gradient-sky

<script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>

<script src="https://rawgit.com/zcanter/aframe-gradient-sky/master/dist/gradientsky.min.js"></script>

<a-scene>

        <!-- A Sphere -->
        <a-entity geometry="primitive: sphere" material="shader: gradient; topColor: 255 100 100; bottomColor: 100 100 200; offset: 0.0001"  position="0 0 -5"></a-entity>

    </a-scene>

edited Apr 17 '17 at 18:27

answered Apr 16 '17 at 17:59

ngokevin

12,980
2
38
84

thanks for your answer, how can I do the same with just the sphere not the whole scene ? – bhansa Apr 16 '17 at 18:02
`` – ngokevin Apr 16 '17 at 18:02
couldn't work it out, can you update my fiddle and paste it here. I tried but didn't work. – bhansa Apr 16 '17 at 18:07

Adding gradient color to a sphere

1 Answers1