Clipping human face in 3D world

Inspired by GANTZ from Japanese animation.

Background

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('https://threejs.org/examples/models/gltf/LeePerrySmith/LeePerrySmith.glb', function (gltf) {
mesh =…