Three.js Object appears Hollow after Clipping?

Question

I am trying to clip off portions of a box in three.js , but each time the box crosses the ClipPath it's insides appear hollow.

As seen below (box is brown)

Is there a way to render the box so it looks solid after it is clipped?

Or is there an easier way to clip the ends of the box that stick outside the bounds of this triangle?

Box sticking out of Triangle

I'm still learning so any help is greatly appreciated. Thank you!

Duplicate: http://stackoverflow.com/questions/37090942/how-to-render-clipped-surfaces-as-solid-objects — WestLangley, Apr 28 '17 at 14:53

score 0 · Accepted Answer · answered Apr 27 '17 at 11:07

0

You would have to insert a triangle yourself to make the new face resulting from the corner being cut off.

It's a simple example of a powerful general technique called Constructive Solid Geometry.

answered Apr 27 '17 at 11:07

Rob Agar

I think I see what your saying, but I'm not sure how you implement it in three.js . I've tried working with Intersection Clipping [like here in the examples](https://threejs.org/examples/?q=plane#webgl_clipping_intersection) but unfortunately I still get a hollow effect. – Nolakat Apr 27 '17 at 16:55
@Nolakat have a look at http://learningthreejs.com/blog/2011/12/10/constructive-solid-geometry-with-csg-js/ – Rob Agar Apr 28 '17 at 12:46
Ah this is really useful. Thanks!! – Nolakat Apr 28 '17 at 21:20

1 Answers1