Question

我的相机有点问题。单击标记并确定时，相机会更改位置，但是当我的相机更改位置时，我需要制作动画。

点击标记时的部分代码：

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

}

现在就这样：

now

我想要的样子：

want

有没有人能帮助我而又不会过度破坏我的榜样？

Answer 1

添加Tween.js

更改渲染功能并添加动画功能后，如下所示：

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

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

下一个

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

现在的动画：

Yep!

在Three.js上具有position.set的相机动画

1 个答案: