Question

Hy，我现在尝试了很长一段时间来制作三个js中场景之间的过渡动画，我已经设法清除了场景。并重新创建下一个，但是相互之间的过渡非常困难，我创造了两个功能：

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");
        };
    };
}

然而，我从未设法使变焦过渡平滑，它迭代太快，无法显示投影矩阵更新。我的想法已经用完......任何建议都会受到赞赏。谢谢。

Answer 1

有点晚了，但...... 您可以创建一个辅助功能“转换”，它将调用少量缩放，直到达到所需的缩放（级别）。例如，如果你想缩放（20），那么你会调用一个接一个地快速调用10 x zoom（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)
}

在转换时平滑点击三个JS的缩放I / O.

1 个答案: