Question

我正在尝试按照本教程进行操作：

http://learningthreejs.com/blog/2011/08/17/tweenjs-for-smooth-animation/

在three.js中补间摄像机的视野，但该值似乎没有更新。知道我做错了什么吗？这是我的代码：

    var fov = 70;
    var zoomFov = 100;

    function onDocumentMouseUp( event ) {
        castRay(); 
    }

    function castRay(){
        var vector = new THREE.Vector3( ( event.clientX / window.innerWidth ) * 2 - 1, - ( event.clientY / window.innerHeight ) * 2 + 1, 0.5 );
        projector.unprojectVector( vector, camera );
        var ray = new THREE.Ray( camera.position, vector.subSelf( camera.position ).normalize() );
        var intersects = ray.intersectObjects( objects );
        if ( intersects.length > 0 ) {
            var camObj = intersects[0].object;
            camTween = new TWEEN.Tween( fov ).to( zoomFov,500 ).easing( camEase );
            camTween.start();
            camTween.onUpdate(function(){
                updateCam(fov);
            });
        }
    }

    function updateCam(fov){
       console.log(fov); //MH - outputs 70 every time
    }

function animate() {

    requestAnimationFrame( animate );
    render();
    TWEEN.update();

}

Answer 1

我用以下代码修复了这个问题。似乎补间类需要对象的属性才能正确更新（？）

var fov = 70, zoomFov = 10, currentFov, camTween;

function castRay(){
    var vector = new THREE.Vector3( ( event.clientX / window.innerWidth ) * 2 - 1, - ( event.clientY / window.innerHeight ) * 2 + 1, 0.5 );
    projector.unprojectVector( vector, camera );
    var ray = new THREE.Ray( camera.position, vector.subSelf( camera.position ).normalize() );
    var intersects = ray.intersectObjects( objects );
    if ( intersects.length > 0 ) {
        setupTween();
    }
}

function setupTween(){
    var update = function(){=
        camera.projectionMatrix.makePerspective( currentFov.fov, window.innerWidth / window.innerHeight, 1, 1100 );
        render();
    }

    currentFov = { fov: 70};
    TWEEN.removeAll();
    camTween = new TWEEN.Tween( currentFov ).to( {fov: zoomFov},500 ).easing( camEase ).onUpdate(update);
    camTween.start();
}

function animate() {

    requestAnimationFrame( animate );
    render();
    TWEEN.update();

}

Answer 2

我认为问题在于你永远不会打电话给camTween.update()。如果您的代码中某处没有渲染循环，则可能会修复以下内容：

setInterval(function(){ 
    camTween.update(); 
}, 50);

否则我会在你的渲染循环中调用camTween.update()。

javascript，three.js - 如何补间相机的FOV

2 个答案: