Question

我正在尝试使用three.js

我正在使用补间移动相机，效果非常好。但是，在动画结束时，相机会跳回到初始位置。

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

我根据this example构建了我的three.js;

在渲染功能中声明了Mousemove

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传递给补间，它可以正常工作。

修改

我没有看到示例的链接。现在，我知道使用了哪种导航（实际上在很多三个例子中都使用了这种导航）。这不是导致问题的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的所有功能都会丢失。直到现在我才意识到这一点。

three.js，补间相机和mousemove事件

1 个答案: