Clipping human face in 3D world

by user


In my previous post, I mention to create stencil seal on the object. In that, invisible planes crop the object off. You can see the example in this site quickly as I referred to the code. This means something inside the content come out by slashing it. While learning Three.js from the example, I figured out that the resulting image looked like Japanese animation called GANTZ. You can see my inspired vision in the following official tweet.

In the above scene, a guy’s body is being cut off and it is gradually fading out. The astonishing effect got me a significant impact. Therefore I determined to demonstrate such an effect using Three.js.

Load Human 3D model

First of all, I loaded a 3D model and textures that are in the examples in Three.js repository. Thanks to the repository, I can get a realistic human model.

var textureLoader = new THREE.TextureLoader();
var loader = new GLTFLoader();
loader.load('', function (gltf) {
mesh = gltf.scene.children[0];
mesh.material = new THREE.MeshPhongMaterial({
     specular: 0x111111,
     map: textureLoader.load(''),
     specularMap: textureLoader.load(''),
     normalMap: textureLoader.load(''),
     shininess: 25,


Prepare Clipping planes

After the 3D model has loaded, I created invisible planes so that they can clip the 3D model overlapped in. The meat of the creation is in Material. That procedure to create is like the following a couple code:

// Set up clip plane rendering
    planeObjects = [];
    var planeGeom = new THREE.PlaneBufferGeometry(100, 100);
    for (var i = 0; i < 3; i++) {
var poGroup = new THREE.Group();
     var plane = planes[i];
     var stencilGroup = createPlaneStencilGroup(mesh.geometry, plane, i + 1);
// plane is clipped by the other clipping planes
     var planeMat =
      new THREE.MeshStandardMaterial({
       color: 0xE91E63,
       clippingPlanes: planes.filter(p => p !== plane),
       stencilWrite: true,
       stencilRef: 0,
       stencilFunc: THREE.NotEqualStencilFunc,
       stencilFail: THREE.ReplaceStencilOp,
       stencilZFail: THREE.ReplaceStencilOp,
       stencilZPass: THREE.ReplaceStencilOp,
     var po = new THREE.Mesh(planeGeom, planeMat);
     po.onAfterRender = function (renderer) {
po.renderOrder = i + 1.1;
var material = new THREE.MeshStandardMaterial({
     map: textureLoader.load(''),
     specularMap: textureLoader.load(''),
     normalMap: textureLoader.load(''),
     clippingPlanes: planes,

To meet requisition for clipping object, I have to turn on the property, localClippingEnabled supported by WEBGLRenderer otherwise clipping would fail.

renderer.localClippingEnabled = true;

You can see how the invisible planes cut the 3D human model off.

sample sample sample


As the invisible planes is likewise composed of Material, a shader material would be fine, too. Using them, the cutting face can colour more cool effects such as GANTZ animation.

Auto Draft

You may also like

Leave a Comment

* By using this form you agree with the storage and handling of your data by this website.

Close Bitnami banner