SuperAPI AI 工具集

3d-camera-interaction

前端与建站

查看项目

更新于 10-16 01:48

技能介绍

用途:在 Three.js 场景中实现 3D 模型的拖拽、缩放与边界检测,解决鼠标移动与模型移动不同步、放大后只能看到模型局部、拖动开始时位置跳变等问题。

问题与成因:一是使用固定 panSpeed(如 0.01)做平移。相机距离变化时,相同世界空间距离对应的屏幕像素不同,导致拖拽不同步;正确做法是根据相机距离、FOV 与画布尺寸动态换算像素到世界空间的映射。核心公式为 worldHeight = 2 × tan(fov/2) × cameraDistance,pixelToWorld = worldHeight / screenHeight;再以 right/up 向量乘以 deltaX/deltaY 与每像素世界距离。二是边界限制基于模型中心点 NDC 坐标,模型放大后中心点仍在屏幕内但身体大部分已出界;正确做法是用包围盒的 8 个顶点投影到屏幕,计算模型实际可见像素区域,仅在可见区域小于 MIN_VISIBLE_PIXELS(示例为 50)时校正拉回。

关键公式:世界坐标到屏幕坐标为 ndc = worldPos.clone().project(camera),screenX = (ndc.x * 0.5 + 0.5) * screenWidth,screenY = (-ndc.y * 0.5 + 0.5) * screenHeight(Y 轴反向)。

使用要点:所有像素与世界空间转换都要考虑相机距离;边界检测使用包围盒而非中心点;Live2D、VRM 等不同模型应使用相同交互逻辑与阈值。

限制:资料未提供完整可直接运行的工程示例、版本依赖、性能数据与兼容性说明,暂未提供。