技术笔记N-173
网页搭建
- 更新
- 内容块
- 48
- 阅读
- 约 2 分钟
- 路径
- 技术笔记 / 3DGS
一下所有内容基于基于SuperSplat 页面实现
首页的交互效果：用户点击 3D 场景区域后，镜头依次切换到下一个预设视角。
使用Model_camera_debug.html记录多个摄像机:
{
position: [x, y, z],
target: [x, y, z],
fov: 50
}把第一个视角设置为初始相机:
importedSettings.cameraTour = XCU_CAMERA_TOUR;
importedSettings.cameras[0].initial = XCU_CAMERA_TOUR[0];
importedSettings.hasStartPose = true;鼠标事件处理:
- 1.只接受鼠标左键。
- 2.只接受主指针。
- 3.拖动超过约 8 像素时不触发切换。
- 4.长按不触发切换。
- 5.双击有延迟保护，避免和聚焦操作冲突。
实现相机间流畅的轨道动画切换:
1.使用几个预设好的摄像机的射线的交点,估计被围绕的主体的中心(单主体围绕实现)
如果未来不是围绕一个主体拍摄，而是多区域漫游，则当前“估算单一主体中心”的算法需要调整为多段 anchor 或路径节点算法
2.为每个镜头计算一个真实主体注视点：从相机沿原始朝向射线投影到主体中心附近。
3.radius / yaw / pitch
4.用相机在轨道参数空间中的插值来作为参考
tourCamera.look(animatedPosition, animatedFocusPoint);5.动画
t * t * t * (t * (t * 6 - 15) + 10)6.动画时长根据以下因素动态计算：
- •两个镜头之间的 yaw 角度差。
- •半径差。
- •高度差。
- •空间距离。
最终时长限制在约 1.8s - 4.0s，避免太快或太慢。
7.避免动画结束后相机轻微回弹或二次漂移
动画结束时，把 Orbit 控制器同步到最终镜头
controllers.orbit.snap(tourTo);