Hi,
I have a problem where I’m trying to do a radial reveal of a torus.
I’m using clipping planes, and as they’re infinite in 2 dimensions, they are clipping off the geometry in reverse.
What would be a solution where I could hack or fudge it to show a complete 360 reveal?
Here’s a demo of it.
My goal is to have the bottom gui controller named (double) be used to reveal symmetrically.
Any ideas?
Possibly moving/negating in a certain order?
Intersection/Boolean between 2?
I have a vertical plane that can be moved in when certain values are reached etc.
Any help would be great.
Thanks!
There are several options of what you could do, from my point of view:
- Patch the torus material to change clipping logics.
- Rebuild the torus geometry, rotate it and use its
arc parameter.
- Distort/bend a cylinder with shaders.
Thanks for the response.
Started with bending a cylinder a year ago to get a prototype example demo.
However creating an object and doing the bending each time wasn’t gonna cut it because this all had to be dynamic. (Revealed shapes are generated via svg loader then lathe geometry).
(Could animate the lathe extrusion, but then, you don’t get caps at the end)
CSG library is great, but slow animating high poly curved objects.
Possibly ill go the shader route we recently discussed here
I’ll share my results as a resource since it’s been a year long pursuit in trying to achieve something as seemingly simple as a smooth live interactive radial reveal. (From dynamically generated objects)
Just had a thought, that you can use uv.x coordinate to discard pixels 
Example: https://jsfiddle.net/prisoner849/3b1enkyr/
2 Likes
wow that’s awesome.
is there any way to get the ends to have caps using this technique?
or have the shader receive any material supplied by a variable?
I would create a custom shader that clips the wedge you want based on uniforms rather than using built in clip planes. This is similar to @prisoner849’s UV approach but it would not require that that UVs be set up radially which can be difficult with some models.
If you really want to use the three.js clip planes you can draw the model twice if you want to display > 180 degrees of the model. Once to draw the first 180 degrees and again to draw the remainder greater than 180. You might wind up with a seam at the joined edge but you can probably fix this by ensuring the two draws overlap a little bit.
Both approaches should still work with the stencil approach for the caps.
1 Like
I tried the 180 double approach earlier.
Serious artifacts with the caps disappearing and reappearing over the opposite side model.
I’m interested in the wedge shader idea, however I’m not a shader pro.
Don’t understand it, have only gotten shader things to work by cobbling together copy pasta.
Probably need to do some render order fixing.
Btw the result of the sides joining was seamless re the 180 idea
For me, it was easier to bend a cylinder with shaders 
Example: Edit fiddle - JSFiddle - Code Playground
1 Like
The torus is a common element in my work though used as an example here however the shapes in the final work would be dependent on dynamic 2d shapes extruded
Would your technique be able to sync with what I described my process as?
Ie: radial shape be derived from dynamic source?
(My original objects are all dynamically generated via svg loader to lathe geometry)
Not to be pushy.
I sincerely appreciate the efforts
If you could provide an example with different shape for lathegeometry, then we’ll see if my method works as a common solution 
An outward facing crescent moon shape?
Inner and outer would the be the same
Thanks!
Any reference or explanatory picture?
(half a crescent actually) like this.
If you provide an svg of such moon, I could try to make an example.
here you go.
the half circle on the left is meant to make a center sphere in the 3D world as an anchor for the center vertical axis.
(Should be just a quarter as the x axis cuts through the middle of it but that’s not of immediate concern)
in a post in Feb where i had an issue of one band of missing polys on each object that was lathe extruded from SVGs.
In that instance, in the prior “bent cylinder” attempt, I found using a cylindrical extrusion caused serious artifacts with getting all the points at the central axis to merge.
Thus the use of lathe geometry, which produced a solid sphere… However I had issues with normals being corrected etc… seams.
ideally the resulting object(s) (individual separate shapes in the overall svg file) would be able to receive their own materials from different sources, as well as have the option to have unique materials for the ‘cut’ surfaces (end caps)
so say for example the sphere would be a silver material
the crescent gold,
and as the reveal occurs, the flat cut area material could be another unique material.
as always i sincerely appreciate the help.
I’ve been trying so many methods so solve this, hopefully one will fit the best for what’s needed.
I’ve made an example, based on Shape (SVGLoader uses them) and ExtrudeGeometry, with different materials for sides and lids.
Example: https://jsfiddle.net/prisoner849/L5qj920a/
Picture:
2 Likes
Awesome, man!
That’s a fantastic setup.
Thanks so much for helping out.
I spent yesterday getting a solution worked out using Manthrax’s fork of EwanW’s csg library.
However, the method takes a good 15 seconds to cache “frames” as individual objects of the reveal. see demo here… (js hangs browser, you just have to wait) What we made using that technique will be useful for different things though.
Pursuing different solutions is great in that i learn a lot from different people.
I’m going to go ahead and make an implementation of your version and we’ll see how it ends up.
Thanks!!
1 Like
Got my svg loaded, extracted the shape, plugged it in and bingo.
Works like a charm!
Muchas Gracias!
Looks like everythings been figured out but here’s an example of a shader that lets you specify angles to clip outside of starting from the demo that @prisoner849 provided above. Maybe it’ll be useful for someone else!
https://jsfiddle.net/s47wfj3m/
1 Like
