交互式3D图形中的相机旋转？ （Three.js）

Question

我正在使用简单的面部检测算法（tracking.js），并且处于可以获取面部位置（x，y，sizeX，sizeY）值的状态。

我试图做的是实现与以下演示类似的内容： https://www.youtube.com/watch?v=w0P4DgQCbnI

我用于面部检测的内容

//Open Tracker from tracking.js library
myTracker = new tracking.ObjectTracker(['face']); 

/* SETUP TRACKER */
/*      ...      */

myTracker.on('track', function(event){
    event.data.forEach(function(data) {

          console.log("NUM OF FACE DETECTED : " + event.data.length);

          // Plots the detected targets here.
          rect(data.x, data.y, data.width, data.height);
          text('x: ' + data.x + 'px', data.x + data.width + 5, data.y + 11);
          text('y: ' + data.y + 'px', data.x + data.width + 5, data.y + 22);

          //Rotate 3D Canvas
          let canvas_3D = new Canvas3D();
          canvas_3D.updateRotationData(data);                
    });
}

尝试在3D空间中绕立方体旋转：

/* Setup canvas, scene, camera, lights, object - cube */
/*    .....      */

animate() {

    myRenderer.render(myCanvas, myCamera);

    if(check_updateRotation === true) {

        var faceCounter = face_counter();
        var rotateX = face_posX();
        var rotateY = face_posY();
        var zoomIn_Out = face_size();

        //Check if face exactly in the middle
        if(rotateX >= 250 && rotateX <=350){
            console.log("STATE: MIDDLE");                
        }
        else if(rotateX >= 150 && rotateX <=250){

            console.log("STATE: LEFT");       
            //Check Direction
            myCamera.position.set(rotateX,0,0); //Set camera position
        }
        else if(rotateX >= 350 && rotateX <=450){
            console.log("STATE: RIGHT");         
            myCamera.position.set(-rotateX,0,0); //Set camera position
        } 
    }
}

get_check_updateRotation(){
    return check_updateRotation;
}

set_check_updateRotation(thisBool){
    check_updateRotation = thisBool;
}

updateRotationData(thisData){

    face_counter = function() {
        return thisData.total;  
    };
    face_posX = function() {
        return thisData.x;
    };
    face_posY = function() {
        return thisData.y;
    };
    face_size = function(){
        return thisData.width; //width = height 
    };

    //Set boolean to true
    this.set_check_updateRotation(true);
}

我尝试移动相机但没有运气：

myCamera.position.set(rotateX,0,0); //Set camera position

这有效，但表现不佳，因为im输入了巨大的值。有没有办法映射脸部位置的值（宽度：0-500px，高度：0-350px），以便我可以平滑旋转喜欢视频中的演示吗？