javascript, three.js - 如何补间相机的 FOV答案

【问题标题】：javascript, three.js - how to tween the camera's FOVjavascript, three.js - 如何补间相机的 FOV
【发布时间】：2012-10-12 05:59:14
【问题描述】：

我正在尝试学习本教程：

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();

}

【问题讨论】：

标签： javascript webgl three.js

【解决方案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();

}

【讨论】：

【解决方案2】：

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

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

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

【讨论】：