Three.js相机飞行动画，鼠标点击设备，相机靠近预览

在Three.js中，可以通过监听鼠标点击事件，并更新相机的位置来实现点击设备后相机靠近预览的效果。以下是一个简单的示例代码：

// 假设你已经有了一个Three.js场景(scene)和相机(camera)
// 以及渲染器(renderer)和一些3D对象
 
// 监听鼠标点击事件
function onMouseClick(event) {
    // 将鼠标点击位置映射到三维坐标系中
    var vector = new THREE.Vector3((event.clientX / window.innerWidth) * 2 - 1, 
                                    1 - (event.clientY / window.innerHeight) * 2, 
                                    0.5);
    // 将屏幕坐标转换为raycaster需要的坐标系
    vector.unproject(camera);
 
    // 创建射线对象
    var raycaster = new THREE.Raycaster(camera.position, vector.sub(camera.position).normalize());
 
    // 计算物体和射线的交点
    var intersects = raycaster.intersectObjects(scene.children);
 
    // 假设我们预览最近的物体
    if (intersects.length > 0) {
        // 计算新的相机位置
        var target = intersects[0].point; // 选择交点作为我们的目标位置
        var cameraOffset = new THREE.Vector3(0, 0, 50); // 设置一个偏移量，使得相机不会立即与物体相交
        var newCameraPosition = new THREE.Vector3().addVectors(target, cameraOffset);
 
        // 平滑移动相机
        new TWEEN.Tween(camera.position).to(newCameraPosition, 500).start();
    }
}
 
// 添加事件监听
document.addEventListener('click', onMouseClick, false);

在这个例子中，我们定义了一个onMouseClick函数来处理鼠标点击事件。我们首先将鼠标点击坐标转换为raycaster需要的坐标系，然后使用raycaster来检测鼠标点击位置和场景中的物体之间的交叉。如果有物体交叉，我们就计算出新的相机位置，并使用TWEEN.js库来平滑地移动相机到预览位置。

确保在你的Three.js场景初始化代码中包含了TWEEN.js库，以及相应的CSS和JS引用。这个例子假设你已经有了一个基本的Three.js场景设置，并且你的页面已经有了一个用于渲染Three.js场景的canvas元素。