Clipping human face in 3D world

Inspired by GANTZ from Japanese animation.

Background

Load Human 3D model

var textureLoader = new THREE.TextureLoader();
var loader = new GLTFLoader();
loader.load('https://threejs.org/examples/models/gltf/LeePerrySmith/LeePerrySmith.glb', function (gltf) {mesh = gltf.scene.children[0];mesh.material = new THREE.MeshPhongMaterial({
specular: 0x111111,
map: textureLoader.load('https://threejs.org/examples/models/gltf/LeePerrySmith/Map-COL.jpg'),
specularMap: textureLoader.load('https://threejs.org/examples/models/gltf/LeePerrySmith/Map-SPEC.jpg'),
normalMap: textureLoader.load('https://threejs.org/examples/models/gltf/LeePerrySmith/Infinite-Level_02_Tangent_SmoothUV.jpg'),
shininess: 25,
});
})
Load a human model

Prepare Clipping planes

// 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) {
renderer.clearStencil();};po.renderOrder = i + 1.1;
object.add(stencilGroup);
poGroup.add(po);
planeObjects.push(po);
scene.add(poGroup);
}
var material = new THREE.MeshStandardMaterial({
map: textureLoader.load('https://threejs.org/examples/models/gltf/LeePerrySmith/Map-COL.jpg'),
specularMap: textureLoader.load('https://threejs.org/examples/models/gltf/LeePerrySmith/Map-SPEC.jpg'),
normalMap: textureLoader.load('https://threejs.org/examples/models/gltf/LeePerrySmith/Infinite-Level_02_Tangent_SmoothUV.jpg'),
clippingPlanes: planes,
});You can see how the invisible plane cut the human model off.
renderer.localClippingEnabled = true;
Left: x-axis / Middle: y-axis / Right: z-axis

Conclusion

Final result.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store