Поворот камеры в интерактивной 3D-графике?(Three.js) - PullRequest
Новая
       43

Поворот камеры в интерактивной 3D-графике?(Three.js)

0 голосов
/ 29 января 2019

Я работаю с простым алгоритмом обнаружения лица (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);                
    });
}

Попытка вращаться вокруг куба в трехмерном пространстве:

/* 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

Это работает, но плохо себя ведет из-за огромных значений, которые я вношу. Есть ли способ сопоставитьзначения положения лица (ширина: 0-500px, высота: 0-350px), чтобы я мог плавно вращаться, как демонстрация в видео?

...