2

我正在尝试遵循本教程：

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

}
4

2 回答 2

2

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

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

}
于 2012-10-11T21:59:14.650 回答
0

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

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

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

于 2012-10-11T20:02:30.573 回答