In the Orb (Shaders)

geometry
shader-material
clipping

#1

Hi, community!

Here is a picture of a scene:

And there is a working demo:
https://jsfiddle.net/prisoner849/4s2ch5vg/show

I had the idea about such scene for about two years. But I couldn’t start it as I had not enough knowledge of Three.js and had no idea where to start from at all. Years passed, I’ve opened this forum with cool people, whose posts and replies here helped me to get more experience and knowledge. Special thanks to @pailhead, because his posts gave me at least the direction where I should move to. (Cheers! :beers:)
So, I’ve spent about a day, as usual with trials end errors, reading all the stuff I could find about how to change default materials.
This scene shows how to re-create a default material (Lambert in my case) with THREE.ShaderMaterial() and add some custom functionality (for example, kind of a clipping sphere) to it. I can’t say that the approach I used here is right or correct, but, at least, it gave the result I’ve expected :slight_smile:

Have joy and relax with this scene :wink:

PS In Firefox music starts automatically. In Chrome, click the round button at the top-left corner and hit “play”.


Clipping Box (shaders)
Some small questions, but I can't figure it out
#2

Cool! Nice job with the clipping sphere, I had no idea it would be so simple. Also interesting material generator, I always like seeing people picking apart three.js in different ways. Thanks for sharing!


#3

@bitsofcode
Thanks :beers: :
I like to share what I’ve learned and to do it with interesting and easily readable examples. I think of them as of tutorials :slight_smile: Thus, people will spend less time for solving the same question/problem which I’ve bumped into :slight_smile:


#4

Related SO answer:


#5

That’s a great solution.:+1:

I had to try it out right away.
It also works great with other geometries: