三.js，补间相机和鼠标移动事件

Question

我正在尝试三个.js

我正在使用补间移动相机，效果很好。 然而，在动画结束时，相机会跳回其初始位置。

我发现 mousemove 事件导致了这种行为。 如何解决此问题并同时保持补间移动和鼠标移动？

我已经基于this example构建了我的three.js；

在渲染函数中声明鼠标移动

function render() {

    camera.position.x += ( mouseX - camera.position.x ) * 0.04;
    camera.position.y += ( - mouseY - camera.position.y ) * 0.04;
    camera.lookAt( scene.position );

    TWEEN.update();

    renderer.render( scene, camera );
}

补间运动

    function setupTween (position, target, duration) {
    TWEEN.removeAll();

    new TWEEN.Tween (position)
            .to (target, duration)
            .easing (TWEEN.Easing.Quadratic.InOut)
            .onUpdate (
                    function() {
                        // copy incoming position into camera position
                        camera.position.copy (position);
                    })
            .start();
};

tween function source

更新

完整的工作代码：

<script>

    var container,
            i,
            camera,
            scene,
            renderer,
            particles,
            geometry,
            materials = [],
            color,
            sprite,
            size,
            mouseX = 0,
            mouseY = 0,
            isTweening,
            windowHalfX = window.innerWidth / 2,
            windowHalfY = window.innerHeight / 2;

    // +++++ three.js +++++
    // +++++ +++++ +++++ +++++ +++++
    function init() {
        container = document.createElement( 'div' );
        document.body.appendChild( container );
        camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.5, 2000 );
        camera.position.set (0,0,1900);

        scene = new THREE.Scene();
        scene.fog = new THREE.FogExp2( 0x000000, 0.0005 );
        geometry = new THREE.Geometry();
        var textureLoader = new THREE.TextureLoader();
        for ( i = 0; i < 1000; i ++ ) {
            var vertex = new THREE.Vector3();
            vertex.x = Math.random() * 2000 - 1000;
            vertex.y = Math.random() * 2000 - 1000;
            vertex.z = Math.random() * 2000 - 1000;
            geometry.vertices.push( vertex );
        }




        sprite = textureLoader.load( "circle.png" );
        color  = [0.90, 0.05, 0.8];
        size   = 8.5;
        materials = new THREE.PointsMaterial( { size: size, map: sprite, blending: THREE.AdditiveBlending, depthTest: false, transparent : false } );
        materials.color.setHSL( color[0], color[1], color[2] );
        particles = new THREE.Points( geometry, materials );
        scene.add( particles );


        renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
        renderer.setPixelRatio( window.devicePixelRatio );

        renderer.setSize( window.innerWidth, window.innerHeight );
        container.appendChild( renderer.domElement );

        document.addEventListener( 'mousemove', onDocumentMouseMove, false );
    }
    function onWindowResize() {
        windowHalfX = window.innerWidth / 2;
        windowHalfY = window.innerHeight / 2;
        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();

        renderer.setSize( window.innerWidth, window.innerHeight );

    }
    function onDocumentMouseMove( event ) {
        mouseX = event.clientX - windowHalfX;
        mouseY = event.clientY - windowHalfY;
    }

    function animate() {
        requestAnimationFrame( animate );
        render();
    }

    function startTween() {

        isTweening = false;

        var target = new THREE.Vector3(getRandomNumber(), getRandomNumber(), getRandomNumber());

        new TWEEN.Tween (camera.position.clone())
                .to (target, 1000)
                .easing (TWEEN.Easing.Quadratic.InOut)
                .onUpdate( function() {
                    camera.position.copy(this);
                })
                .onStart ( function() {
                    isTweening = true;
                })
                .onComplete ( function() {
                    isTweening = false;
                })
                .start();
    }

    function getRandomNumber() {
        // get a number between -1000 and -500 and 500 and 1000
        return ( Math.random() * 500 + 500 ) * ( Math.random() < 0.5 ? -1 : 1 );
    }

    function render() {

        if(!isTweening && (mouseX || mouseY)) {
            // more a generic approach, not just transforming x and y (maybe it needs to be improved a bit)
            var upVector = camera.up.clone().transformDirection(camera.matrix);
            var forwardVector = new THREE.Vector3().subVectors(scene.position, camera.position).normalize();
            var rightVector = new THREE.Vector3().crossVectors(forwardVector, upVector);

            camera.translateOnAxis(rightVector, mouseX);
            camera.translateOnAxis(upVector, -mouseY);
            mouseX = mouseY = 0;
        }
        camera.lookAt( scene.position );

        TWEEN.update();

        renderer.render( scene, camera );
    }

    init();
    animate();


    setTimeout(function(){
        startTween();
    },2500);

</script>

Answer 1

我认为，你应该只通过 mousemove 事件更新位置，当它不是补间时。所以你需要检查它当前是否在补间。

var isTweening = false;

new TWEEN.Tween (camera.position)
    .to (target, duration)
    .easing (TWEEN.Easing.Quadratic.InOut)
    .onStart ( function() {
        isTweening = true;
    })
    .onComplete ( function() {
        isTweening = false;
    })
    .start();

// in your render loop
function render() {

    if (!isTweening) {
        camera.position.x += ( mouseX - camera.position.x ) * 0.04;
        camera.position.y += ( - mouseY - camera.position.y ) * 0.04;
    }
    camera.lookAt( scene.position );

    TWEEN.update();

    renderer.render( scene, camera );
}

您无需设置onUpdate 函数并将新位置复制到camera.position。您只需将 camera.position 传递给补间即可。

编辑：

我没有看到示例的链接。现在，我知道使用了哪种导航（实际上在很多 three.js 示例中都使用了这种导航）。导致您的问题的不是 mousemove 事件，而是这种计算新相机位置的方法 (camera.position.x += ( mouseX - camera.position.x ) * 0.04;)。因此，我稍微更改了示例的代码，尤其是导航。以下是重要部分：

document.addEventListener( 'mousemove', onDocumentMouseMove, false );

function onDocumentMouseMove( event ) {
    mouseX = (event.movementX * 0.5) || event.mozMovementX || event.webkitMovementX || 0;
    mouseY = (event.movementY * 0.5) || event.mozMovementY || event.webkitMovementY || 0;
}

function render() {

    if(!isTweening && (mouseX || mouseY)) {
        // more a generic approach, not just transforming x and y (maybe it needs to be improved a bit)
        var upVector = camera.up.clone().transformDirection(camera.matrix);
        var forwardVector = new THREE.Vector3().subVectors(scene.position, camera.position).normalize();
        var rightVector = new THREE.Vector3().crossVectors(forwardVector, upVector);

        camera.translateOnAxis(rightVector, mouseX);
        camera.translateOnAxis(upVector, -mouseY);
        mouseX = mouseY = 0;
    }
    camera.lookAt( scene.position );

    TWEEN.update();
}

function startTween() {

    isTweening = false;

    var target = new THREE.Vector3(getRandomNumber(), getRandomNumber(), getRandomNumber());

    new TWEEN.Tween (camera.position.clone())
        .to (target, 1000)
        .easing (TWEEN.Easing.Quadratic.InOut)
        .onUpdate( function() {
            camera.position.copy(this);
        })
        .onStart ( function() {
            isTweening = true;
        })
        .onComplete ( function() {
            isTweening = false;
        })
        .start();
}

function getRandomNumber() {
    // get a number between -1000 and -500 and 500 and 1000
    return ( Math.random() * 500 + 500 ) * ( Math.random() < 0.5 ? -1 : 1 );
}

你是对的TWEEN.onUpdate：你需要将新值复制到camera.position。我之前的方法也可以，但是THREE.Vector3 的所有功能都会丢失。直到现在我才意识到这一点。