Анимация камеры с помощью position.set на Three.js - PullRequest
Новая
       36

Анимация камеры с помощью position.set на Three.js

0 голосов
/ 25 ноября 2018

У меня небольшая проблема с моей камерой. Положение камеры меняется при щелчке маркера, и все в порядке, но мне нужно сделать анимацию, когда положение камеры меняется.

Часть кода при щелчке маркера: 

var radius1 = 1.030;

var city = {
    "name": "city1",
    "lat": 43+2,
    "lng": 11-15
};

var label = new InfoBox(city, radius1, document.body);

var map66 = new THREE.TextureLoader().load( "images/marker.png" );
var material66 = new THREE.SpriteMaterial( { map: map66, color: 0xffffff } 
);

var marker1 = new THREE.Sprite( material66 );
marker1.scale.set(0.1,0.1,1);
marker1.position.copy(label.position);
scene.add(marker1);

var markerarry = [];
markerarry.push(marker1);

 window.onmousedown = function(event) {

    const intersects = raycaster.intersectObjects(markerarry, false);
    for (var i = 0; i < intersects.length; i++) {

        controls.autoRotate = false;
        controls.enableRotate = false;
        controls.enableZoom = false;
        var zInMin = 15;
        for (camera.fov; camera.fov > zInMin; camera.fov -= 0.01) {

            camera.updateProjectionMatrix();

            //camera position set
            camera.position.set(3.5, 3.5, 0.4);

            //need make animation!!


        }

    }

renderer.render(scene, camera);

}

теперь это так:

сейчас

как я хочу, чтобы это было:

хочу

Кто-нибудь может мне помочь, не слишком расстраивая мой пример?

1 Ответ

0 голосов
/ 25 ноября 2018

Добавьте Tween.js

после изменения функции рендеринга и добавьте функцию анимации, например: 

function animate() {
    camera.updateProjectionMatrix();
    requestAnimationFrame(animate);
    TWEEN.update();
    render();
}

function render() {
    controls.update();
    //requestAnimationFrame(render);
    renderer.render(scene, camera);
}

next 

    const intersects = raycaster.intersectObjects(markerarry, false);
    for (var i = 0; i < intersects.length; i++) {

        /////////////////////////////////////
        //it help to find coordinate after set camera and click on marker
        //console.log(camera.position);
        ////////////////////////////////////

        controls.enabled = false;
        var duration = 2500;
        var position = new THREE.Vector3().copy(camera.position);
        var targetPosition = new THREE.Vector3(2.4, 2.2, -0.6);

        var tween = new TWEEN.Tween(position)
            .to(targetPosition, duration)
            .easing( TWEEN.Easing.Back.InOut )
            .onUpdate(function () {
                camera.position.copy(position);
                camera.lookAt( controls.target );
            })
            .onComplete(function () {
                camera.position.copy( targetPosition );
                camera.lookAt( controls.target );
                controls.enabled = true;
            })
            .start();
    }

Анимация теперь:

Оп!

...