相机在鼠标点击时平滑放大到对象位置答案

【问题标题】：Camera Smoothly Zoom Into Object Position On Mouse Click相机在鼠标点击时平滑放大到对象位置
【发布时间】：2017-04-08 12:24:08
【问题描述】：

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

我想在点击特定框时实现此效果。

相机将从当前位置平滑过渡到框位置
框位于相机视口的中心
相机将平滑放大并聚焦在框上

这个效果的灵感来自100,000 Stars。每当用户点击一颗星星时，相机就会放大该星星并将其显示在中心。我正在尝试复制这种效果。

我目前能够抓住盒子的位置并查看它。但我想做的不止于此，我不确定如何继续。

【问题讨论】：

标签： javascript three.js

【解决方案1】：

我认为你需要的是一个动画，有很多动画库，比如anime.js和tween.js。由于您在翻译后已经抓住了位置，您可以制作动画来平滑您的翻译。这是一个带有 tween.js 的 sn-p：

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.

然后，你可以用同样的方法制作动画来改变旋转。

顺便说一句，似乎在 100000 颗星中他们最终会切换相机。

【讨论】：