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 に答える