Как отобразить значения карты из 2D в 3D в Javascript с помощью алгоритма распознавания лиц?

Question

Что я пытаюсь сделать:

ДЕМО-1: https://www.youtube.com/watch?v=w0P4DgQCbnI&lc=z23oxtz4exfyx5g0cacdp43atxdtnjnhlcciqcmvaaxw03c010c.1548853564292370

Мой пример:

Я использую tracking.js. Это вернет данные обнаруженных лиц, как показано ниже:

tracker.on('track', function(event) {

    if (event.data.length === 0) {
        // No targets were detected in this frame.
        console.log("*NO FACE DETECTED");
    } 
    else {
        event.data.forEach(function(data) {
           //data = [posX, posY, sizeX, sizeY, count_Faces]; 
           console.log("*FACE DETECTED : ["+ count_Faces +"]");
           updateFaceData(data); //IMPORTANT PART: PREPARE ROTATION VALUES
    }
}

Что я имею:

Я работал в Three.js, и я подготовил всю математику, необходимую для вращения

ДЕМО 2: https://ibb.co/YWZ9NYy

//Slider radius values range (350, 1000)
//Slider theta values range  (-88, 88)
//Slider Phi values range    (  0, 350)
var radius, theta, phi;

animate{
    //Prepare Theta
    radius = slider_getRadius();
    theta = slider_getTheta() * (Math.PI / 180);
    phi = slider_getPhi() * (Math.PI / 180);

    var sphericalPos = new THREE.Spherical(radius, theta, phi);

    cube_Mesh.position.setFromSpherical(sphericalPos);
    cube_Mesh.lookAt(selectedModel.position);
}

Соображения:

Мне нужно как-то передать номиналы в трехмерном пространстве и вращаться вокруг модели (файл.gltf). Учитывая вышеизложенное, это положение лица [posX, posY] соответствует холсту, на котором установлено распознавание лица (например, [379, 50] или [422, 63]). Если эти значения переданы, по сути, это не будет работать, потому что требуемые значения для поворотов находятся в диапазоне от -360 до 360 (в моем примере 0-360).

Q1: Как отобразить значения из 2D в 3D, чтобы иметь аналогичное вращение с Demo 2?

Q2: Как избежать получения значений от нескольких лиц, а также не путая, какая грань была первой-второй... и т. Д.?