Использование буфера трафарета (stencil buffer) в three.js

Пытаюсь создать сцену с применением буфера трафарета, но к сожалению, по его использованию слишком мало информации и примеров. Планирую по центру каждой из сторон тэтраэдра вырезать круг или квадрат, это не важно. Подскажите, как это возможно реализовать, если можно поподробнее?

Ожидаемый результат на картинке, где окружности это вырезанные отверстия.

С добавлением webGL stencil

    window.onload = function() {
    // Создаем переменную канвас
    var canvas = document.getElementById("canvas");
    var scene, camera, renderer;

    // -------------- Создание объекта - сцена ----------------
    // Создание элемента сцена
    scene = new THREE.Scene();

    // -------------- Создание объекта - источник света ----------------
    var light = new THREE.AmbientLight(0xffffff, 0.5);
    scene.add(light);
    var light1 = new THREE.PointLight(0xffffff, 0.5);
    scene.add(light1);

    // -------------- Создание объекта - камера ----------------
    // Создание элемента камера с углом обхора 65 градусов и пропорций и близкость и дальность отображения объекта
    camera = new THREE.PerspectiveCamera(35, window.innerWidth / window.innerHeight, 0.1, 3000);

    // -------------- Создание объекта - рендерер ----------------
    // Канва: канва - это настройка того, что функция будет передана в имеющийся элемент канвас, и не будет создаваться новый
    // antialias: true - это опция сглаживания углов у объектов
    renderer = new THREE.WebGLRenderer({canvas: canvas, antialias: true, alpha: true, stencil: true});
    // установка серого цвета на канвасе
    renderer.setClearColor(0x444444);
    // Устанавливаем соотношение пикселей устройства. Это обычно используется для устройства HiDPI, чтобы предотвратить размывание выходного холста.
    renderer.setPixelRatio(window.devicePixelRatio);
    // Установка сцены на всё окно 
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    // -------------- Создание объекта - тэтраэдр ----------------
    var tetrahedron = new THREE.TetrahedronGeometry( 100, 0 );
    var tetrahedronMaterial = new THREE.MeshStandardMaterial( {color: 0xF3FFE2, roughness: 0.5, metalness: 0.5} );
    var tetrahedronMesh = new THREE.Mesh( tetrahedron, tetrahedronMaterial );
    tetrahedronMesh.position.set(-150, 0, -1000);
    scene.add( tetrahedronMesh );
    // -------------- Создание объекта - сфера (трафарет буфер) ----------------
    var sphere = new THREE.SphereGeometry( 50, 32, 32 );
    var sphereMaterial = new THREE.MeshStandardMaterial( {color: 0x000000, roughness: 0.5, metalness: 0.5} );
    var sphereMesh = new THREE.Mesh( sphere, sphereMaterial );
    sphereMesh.position.set(-150, 0, -1000);
    scene.add( sphereMesh );

    // -------------- Создание объекта - цилиндр ----------------
    var cylinder = new THREE.CylinderGeometry( 25, 25, 75, 32 );
    var cylinderMaterial = new THREE.MeshStandardMaterial( {color: 0x228B22, roughness: 0.5, metalness: 0.5, opacity: 0.5, transparent: true} );
    var cylinderMesh = new THREE.Mesh( cylinder, cylinderMaterial );
    cylinderMesh.position.set( 100, 0, -1000);
    scene.add( cylinderMesh );

    // -------------- Создание объекта - тор ----------------
    var torus = new THREE.TorusGeometry( 31, 7, 16, 100 );
    var torusMaterial = new THREE.MeshStandardMaterial( {color: 0xADFF2F, roughness: 0.5, metalness: 0.5} );
    var torusMesh = new THREE.Mesh( torus, torusMaterial );
    torusMesh.position.set( 100, 0, -1000);
    torusMesh.rotation.x = 1.6;
    scene.add( torusMesh );
    // Установка позиции камера x, y, z
    camera.position.z = 300;

    // Создание функции анимация
    function animate() {
        requestAnimationFrame( animate );
        tetrahedronMesh.rotation.x += 0.01;
        tetrahedronMesh.rotation.y += 0.01;
        // cylinderMesh.rotation.z += 0.01;
        // cylinderMesh.rotation.y += 0.01;
        cylinderMesh.rotation.x += 0.01;
        torusMesh.rotation.x += 0.01;
        // torusMesh.rotation.y += 0.01;
        renderer.render( scene, camera );
    }
    animate();
}

Немного модернизировал свой код, добавив объект - сфера, который планируется использовать как трафарет.

window.onload = function() {
    // Создаем переменную канвас
    var canvas = document.getElementById("canvas");
    var scene, camera, renderer, backStencilScene;
    var gl = renderer;

    // -------------- Создание объекта - сцена ----------------
    // Создание элемента сцена
    scene = new THREE.Scene();
    backStencilScene  = new THREE.Scene();

    // -------------- Создание объекта - источник света ----------------
    var light = new THREE.AmbientLight(0xffffff, 0.5);
    scene.add(light);
    var light1 = new THREE.PointLight(0xffffff, 0.5);
    scene.add(light1);

    // -------------- Создание объекта - камера ----------------
    // Создание элемента камера с углом обхора 65 градусов и пропорций и близкость и дальность отображения объекта
    camera = new THREE.PerspectiveCamera(35, window.innerWidth / window.innerHeight, 0.1, 3000);

    // -------------- Создание объекта - рендерер ----------------
    // Канва: канва - это настройка того, что функция будет передана в имеющийся элемент канвас, и не будет создаваться новый
    // antialias: true - это опция сглаживания углов у объектов
    renderer = new THREE.WebGLRenderer({canvas: canvas, antialias: true, alpha: true, stencil: true});
    // установка серого цвета на канвасе
    renderer.setClearColor(0x444444);
    // Устанавливаем соотношение пикселей устройства. Это обычно используется для устройства HiDPI, чтобы предотвратить размывание выходного холста.
    renderer.setPixelRatio(window.devicePixelRatio);
    // Установка сцены на всё окно 
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    // -------------- Создание объекта - тэтраэдр ----------------
    var tetrahedron = new THREE.TetrahedronGeometry( 100, 0 );
    var tetrahedronMaterial = new THREE.MeshStandardMaterial( {color: 0xF3FFE2, roughness: 0.5, metalness: 0.5} );
    var tetrahedronMesh = new THREE.Mesh( tetrahedron, tetrahedronMaterial );
    tetrahedronMesh.position.set(-150, 0, -1000);
    scene.add( tetrahedronMesh );
    // -------------- Создание объекта - сфера (трафарет буфер) ----------------
    var sphere = new THREE.SphereGeometry( 50, 32, 32 );
    var sphereMaterial = new THREE.MeshStandardMaterial( {color: 0x000000, roughness: 0.5, metalness: 0.5} );
    var sphereMesh = new THREE.Mesh( sphere, sphereMaterial );
    sphereMesh.position.set(-150, 0, -1000);
    // -------------- Создание объекта - цилиндр ----------------
    var cylinder = new THREE.CylinderGeometry( 25, 25, 75, 32 );
    var cylinderMaterial = new THREE.MeshStandardMaterial( {color: 0x228B22, roughness: 0.5, metalness: 0.5, opacity: 0.5, transparent: true} );
    var cylinderMesh = new THREE.Mesh( cylinder, cylinderMaterial );
    cylinderMesh.position.set( 100, 0, -1000);
    backStencilScene.add( cylinderMesh );

    // -------------- Создание объекта - тор ----------------
    var torus = new THREE.TorusGeometry( 31, 7, 16, 100 );
    var torusMaterial = new THREE.MeshStandardMaterial( {color: 0xADFF2F, roughness: 0.5, metalness: 0.5} );
    var torusMesh = new THREE.Mesh( torus, torusMaterial );
    torusMesh.position.set( 100, 0, -1000);
    torusMesh.rotation.x = 1.6;
    scene.add( torusMesh );
    // Установка позиции камера x, y, z
    camera.position.z = 300;

    // Создание функции анимация
    function animate() {
        renderer.clear();
        requestAnimationFrame( animate );
        // Включение буфера трафарета
        gl.enable(gl.STENCIL_TEST);
        // Настройка теста
        gl.stencilFunc(
            gl.ALWAYS,    // the test
            1,            // reference value
            0xFF          // mask
        );
        // Установление трафарета на эталонное значение, когда пройдут тесты трафарета и глубины
        gl.stencilOp(
            gl.KEEP,     // что делать если тест трафарета не пройден
            gl.KEEP,     // что делать если тест глубины не пройден
            gl.REPLACE   // что делать если оба теста не пройдены
        );
        scene.add( sphereMesh );
        // Тест пройдёт только если он равен нулю
        gl.stencilFunc(
            gl.EQUAL,     // Тест
            0,            // Исходная величина
            0xFF         // Маска
        );
        gl.stencilOp(
            gl.KEEP,     // что делать если тест трафарета не пройден
            gl.KEEP,     // что делать если тест глубины не пройден
            gl.KEEP      // что делать если оба теста не пройдены
        );


        tetrahedronMesh.rotation.x += 0.01;
        tetrahedronMesh.rotation.y += 0.01;
        // cylinderMesh.rotation.z += 0.01;
        // cylinderMesh.rotation.y += 0.01;
        cylinderMesh.rotation.x += 0.01;
        torusMesh.rotation.x += 0.01;
        // torusMesh.rotation.y += 0.01;
        renderer.render( scene, camera );
    }
    animate();
}