Code Reading of Clipping Object in Three.js Example

Generative Coding Drill

Example

I have been learning of Three.js, and I would like to put forth my code with a great idea someday. Therefore I have started to read and understand by Thee.js Examples. Through this challenge, I would make progress for a creative coder.

First of all, I picked up the following example.

Sample image

three.js

In this example, the originating object is cropped by invisible planes in surrounding. Besides, the cut mouth is coloured with specific colour material, magenta. They call this technic that applying materials to the cut face a stencil because the behaviour is similar to seal the content on the object. Once you remove the invisible plane, you will see the logic in visual.

Left: invisible planes / Right: original object

Clipping

The most highlighted code in the example is to enable localClippingEnable that is the…