Web 3D 交互原型 / 手势控制可视化应用
科普展示、互动展陈、3D 可视化、手势交互实验
系统以浏览器渲染 3D 太阳系,展示太阳、八大行星、椭圆轨道、轨道倾角、小行星带、柯伊伯带、卫星、环系统、轨道刻度、城市光点和磁层线。用户可通过鼠标或摄像头手势控制视角、缩放、选择行星、暂停或调整模拟速度。
点击空白处退出提示
语言技术
Docker、React、TypeScript系统类型
Web行业分类
人工智能
Web 3D 交互原型 / 手势控制可视化应用
科普展示、互动展陈、3D 可视化、手势交互实验
系统以浏览器渲染 3D 太阳系,展示太阳、八大行星、椭圆轨道、轨道倾角、小行星带、柯伊伯带、卫星、环系统、轨道刻度、城市光点和磁层线。用户可通过鼠标或摄像头手势控制视角、缩放、选择行星、暂停或调整模拟速度。
系统以浏览器渲染 3D 太阳系,展示太阳、八大行星、椭圆轨道、轨道倾角、小行星带、柯伊伯带、卫星、环系统、轨道刻度、城市光点和磁层线。用户可通过鼠标或摄像头手势控制视角、缩放、选择行星、暂停或调整模拟速度。
核心场景使用 Three.js 构建程序化太阳系模型和材质纹理,React 负责状态面板、行星选择器、模拟控制和手势状态展示。MediaPipe 手势识别运行在 Web Worker 中,并通过自适应采样、帧尺寸降级、命令队列和软重锚机制降低低 FPS 场景下的卡顿。项目将手势映射为缩放、平移、旋转和暂停指令,场景动画循环消费控制命令并平滑更新相机。测试侧提供多轮 Cycle 评估和 Playwright E2E,用于验证 3D 场景、模型细节、导航和手势过滤逻辑。






评论