Question

所以我有一个包含多个框和一个PerspectiveCamera的场景。

每当我点击特定的盒子时，我都想达到这个效果。

相机将平稳地从当前位置转换到盒子的位置
该框位于相机的视口中心
相机将平滑地放大并对焦于方框

此效果的灵感来自100,000 Stars。每当用户点击星形时，摄像机将放大星形并将其显示在中心。我试图复制那种效果。

我现在能够抓住盒子的位置然后看看它。但我想做更多的事情，我不确定如何继续。

Answer 1

我认为你需要的是动画，有许多动画库，如anime.js和tween.js。翻译后你已经抓住了这个位置，你可以制作一个动画来平滑你的翻译。这是一个包含tween.js的片段：

var tween2 = new TWEEN.Tween(camera.position)
                .to({
                    x : target.position.x,
                    y : target.position.y,
                    z : target.position.z
                } , 1000)
                .easing(TWEEN.Easing.Linear.None)
                .start();

如果要在相机中央找到该框。我们还需要改变相机旋转。这是一种使用矩阵计算目标旋转的方法。

    var rotation_matrix = new THREE.Matrix4();
    rotation_matrix.lookAt(target_position,target_box.position,camera.up);
    var target_rotation = new THREE.Euler(0,0,0,"XYZ");
    target_rotation.setFromRotationMatrix(rotation_matrix);
    //now, the target_rotation would be the rotation after translating.

然后，您可以使用相同的方式制作动画以更改旋转。

顺便说一句，看起来在10万颗星中它们最终会切换相机。

相机在鼠标单击时平滑地缩放到对象位置

1 个答案: