光滑的點擊放大I/O爲三個JS在轉換

Question

Hy，我現在嘗試了很長一段時間來爲THREE js中的場景之間的轉換設置動畫，我設法清除場景。並重新下一個，但對對方的過渡確實painstacking，我已創建2個功能：

function zoomInTransition() { 
 
    var zInMin = 15; 
 
    for (camera.fov; camera.fov > zInMin; camera.fov-=3) { 
 
     camera.updateProjectionMatrix(); 
 
    } 
 
} 
 

 
function zoomOutTransition() { 
 
    var zOutMax = 70; 
 
    for (camera.fov; camera.fov < zOutMax; camera.fov+=3) { 
 
     camera.updateProjectionMatrix(); 
 
    } 
 
}

我運行的每個功能，如下所示：

function buttonReaction(){ 
 
    for (var i in objects) { 
 
     switch(objects[i].name) { 
 
      case "door_1": 
 
       zoomInTransition(); 
 
       Start(room2); 
 
       zoomOutTransition() 
 
       break; 
 
      case "door_2": 
 
       zoomInTransition(); 
 
       Start(room1); 
 
       zoomOutTransition() 
 
       break; 
 
      default: 
 
       console.log("default"); 
 
     }; 
 
    }; 
 
}

但是我從來沒有設法使變焦tranziti在平滑的情況下，對於投影矩陣更新顯示而言，迭代太快。我會用盡想法...任何建議，將不勝感激。 謝謝。

Answer 1

這有點遲，但... 您可以創建一個輔助函數「過渡」，它將調用少量的縮放，直到達到所需的縮放比例（水平）。例如，如果你想縮放（20），那麼你可以很快地一個接一個地調用將會調用10倍變焦（2）的轉換，這將產生平滑過渡的錯覺

//zoom function with transition 
function zoomIn() { 
    if(camera.fov > minZoom) { 
     dom.zoomOut.css('opacity',1); 
     transition(cameraZoomIn,20); 
    } 
    if(camera.fov-20 <= minZoom){ 
     dom.zoomIn.css('opacity',0.2); 
    } 
} 

//zoom function with transition 
function zoomOut(){ 
    if(camera.fov < maxZoom) { 
     dom.zoomIn.css('opacity',1); 
     transition(cameraZoomOut,20); 
    } 
    if(camera.fov+20 >= maxZoom){ 
     dom.zoomOut.css('opacity',0.2); 
    } 
} 

//small amount of zoom 
function cameraZoomIn(quantity){ 
    camera.fov -= quantity; 
    camera.updateProjectionMatrix(); 
} 

//small amount of zoom 
function cameraZoomOut(quantity){ 
    camera.fov += quantity; 
    camera.updateProjectionMatrix(); 
} 

//Create a transition for the movement func (go left, up, zoom,...) where func must move with amount quantity 
function transition(func, quantity) { 
    var intervalTime = 15; 
    //We make a small version of the same movement : move 1/10 of the original quantity every intervalTime 
    var interval = setInterval(function(){func(quantity/10)}, intervalTime); 
    //We stop doing the movement when we have done 10 times the small movement 
    setTimeout(function(){clearInterval(interval)}, intervalTime*10) 
}