Q2: 如何实现第一人称视角的相机控制？需要注意哪些细节？

// 在 App.vue 中创建透视相机
const camera = new THREE.PerspectiveCamera(
    75, // 75度视野角，接近人眼视角
    window.innerWidth / window.innerHeight, // 屏幕宽高比
    0.1, // 近裁剪面，设置较小值避免近距离物体被裁剪
    1000 // 远裁剪面，足够大以包含所有房间
);

// 关键：将相机位置设置在几何体内部
camera.position.set(0, 0, 0.01);

// 鼠标状态跟踪
let mouseDown = false;

// 鼠标按下事件
container.value.addEventListener(
    "mousedown",
    () => {
        mouseDown = true;
    },
    false
);

// 鼠标释放事件
container.value.addEventListener(
    "mouseup",
    () => {
        mouseDown = false;
    },
    false
);

// 鼠标移出容器事件 - 防止鼠标移出后仍然响应
container.value.addEventListener("mouseout", () => {
    mouseDown = false;
});

// 鼠标移动事件处理
container.value.addEventListener("mousemove", (e) => {
    if (mouseDown) {
        // 水平旋转：鼠标左右移动控制Y轴旋转
        camera.rotation.y += e.movementX * 0.002;

        // 垂直旋转：鼠标上下移动控制X轴旋转
        camera.rotation.x += e.movementY * 0.002;

        // 关键：设置旋转顺序为YXZ，符合第一人称视角直觉
        camera.rotation.order = "YXZ";
    }
});

// 使用GSAP实现平滑的房间切换动画
// 客厅到阳台
balconySprite.onClick(() => {
    gsap.to(camera.position, {
        x: 0,
        y: 0,
        z: -10, // 移动到阳台房间的位置
        duration: 1, // 1秒的平滑过渡
    });
});

// 客厅到厨房
kitchenSprite.onClick(() => {
    gsap.to(camera.position, {
        x: 1.5,
        y: 0,
        z: 10, // 移动到厨房房间的位置
        duration: 1,
    });
});

// 窗口大小变化时更新相机参数
window.addEventListener("resize", () => {
    // 更新相机宽高比
    camera.aspect = window.innerWidth / window.innerHeight;

    // 更新投影矩阵 - 必须调用以应用新的宽高比
    camera.updateProjectionMatrix();

    // 更新渲染器尺寸
    renderer.setSize(window.innerWidth, window.innerHeight);

    // 设置像素比以适应高DPI屏幕
    renderer.setPixelRatio(window.devicePixelRatio);
});

// 为什么选择 "YXZ" 旋转顺序？
camera.rotation.order = "YXZ";

/*
 * YXZ 顺序的优势：
 * - Y轴旋转（水平转向）先执行，符合人类转头的自然习惯
 * - X轴旋转（垂直仰俯）后执行，避免了万向节锁问题
 * - Z轴旋转最后，在第一人称视角中通常不需要
 *
 * 如果使用默认的 "XYZ" 顺序，会出现：
 * - 仰视或俯视到极限角度时出现意外的滚转
 * - 旋转行为不符合人类直觉
 */

// 0.002 这个系数是如何确定的？
const sensitivity = 0.002;

/*
 * 灵敏度计算考虑因素：
 * - movementX/Y 的单位是像素
 * - 相机旋转的单位是弧度
 * - 需要将像素移动转换为合适的旋转角度
 *
 * 0.002 的选择基于：
 * - 鼠标移动500像素 = 1弧度旋转 ≈ 57.3度
 * - 这个比例让用户感觉控制自然，不会过于敏感或迟钝
 */
camera.rotation.y += e.movementX * sensitivity;
camera.rotation.x += e.movementY * sensitivity;

// 在实际项目中，可能需要添加垂直旋转的边界限制
container.value.addEventListener("mousemove", (e) => {
    if (mouseDown) {
        camera.rotation.y += e.movementX * 0.002;

        // 限制垂直旋转角度，防止过度仰视或俯视
        const newRotationX = camera.rotation.x + e.movementY * 0.002;
        camera.rotation.x = Math.max(
            -Math.PI / 2, // 最大俯视角度
            Math.min(Math.PI / 2, newRotationX) // 最大仰视角度
        );

        camera.rotation.order = "YXZ";
    }
});

// 使用 requestAnimationFrame 确保渲染与浏览器刷新率同步
const render = () => {
    renderer.render(scene, camera);
    requestAnimationFrame(render); // 通常是60FPS
};

// 避免在每次鼠标移动时都重新渲染
// Three.js 的渲染循环会自动处理相机变化

// 使用 GSAP 实现房间切换的平滑过渡
// 而不是瞬间跳转，提升用户体验
gsap.to(camera.position, {
    x: targetX,
    y: targetY,
    z: targetZ,
    duration: 1, // 1秒过渡时间
    ease: "power2.inOut", // 缓动函数
});

// 确保鼠标移出容器时停止旋转
// 防止用户意外操作
container.value.addEventListener("mouseout", () => {
    mouseDown = false;
});

// 在实际项目中，还需要考虑触摸事件
// 实现移动端的第一人称视角控制
container.value.addEventListener("touchstart", handleTouchStart);
container.value.addEventListener("touchmove", handleTouchMove);
container.value.addEventListener("touchend", handleTouchEnd);