跳转至

三种模式的空间导览与交互演示

历史记录 / Historical record：本文保留当时的计划、研究或验收证据，不代表 0.11 当前能力全集。现行说明见 文档入口；英文入口见 English overview。

2026-10-20 · exp · 起点 98eb32f0

目标与设计

将说明卡片改为空间演示。遵循用户给出的产品广告参考：真实手机和卡片的实体质感、连续运镜、自然扭转与展开。采用延迟加载的 Three.js 实体几何与 PBR 材质：边框、玻璃、镜头、倒角及纸张厚度由模型表现，柔和环境光塑造反射。文字与真实按钮保持 OneGUI 的稳定界面；此前 CSS 模型仅作图形不可用时的功能降级。

  • 极简模式：今天、五个入口，共两课。
  • 实用模式：今天、更多功能、调整四个入口，共三课。
  • 完整模式：白板、暂存箱、口令、碰一碰、组织，共五课；其他六个主题在结束页按需探索。
  • 模式选择保留原有准确描述，切换只改变展示，不重置已有数据与设置。
  • 演示仅改变本地演示状态；真实功能按钮直达对应页面。结束页扫码连接仍可跳过，OH MCP 仍仅在完整模式显示。
  • 按后续反馈，舞台进入后自动播放，无需点击模拟，仅保留暂停控制；系统与应用减少动态效果时显示静态结果。具体节奏与退场修正见自动播放计划。

实施顺序

  1. 抽出课程数据与导航，修正过时说明，保留全部旧落点。
  2. 用 TourStudioScene 与 tourStudioModels 实现真实几何、材质、运镜和可反向的演示动作；TourIllustration 维持语义控制，tour-scenes.css 提供图形降级。
  3. 重整 OnboardingTour、ExperienceModePicker 与独立 tour.css：稳定页脚、可返回步骤、可选探索、真实体验返回条和方向过渡。
  4. 删除旧图示样式，接入 OneGUI 配方，检查短屏、窄屏和减少动态效果。
  5. 更新并执行真实浏览器用例，实际查看桌面/手机截图，修正发现的问题后提交。

分工与验证

  • 主 agent：导览壳、模式选择、样式整合与最终验收。
  • gui_mobile：真实三维舞台、相机与渲染生命周期。
  • audit_org_shares：课程内容、导航、真实模型与材质。
  • audit_latest：浏览器流程、动效与布局验收、前后截图。

检查 guard、桌面类型检查与构建；运行 onboarding-browser、experience-browser 和新的 onboarding-motion-browser 用例。覆盖 1280 桌面、390/320 手机和短横屏，三种模式、十一处真实落点、跳过/返回/快速切课、键盘焦点、模式数据保留、减少动态效果、深色与玻璃。截图必须人工查看，不能仅凭测试通过评价视觉质量。

性能采样只作本机 Chromium 参考，不宣称实体手机性能；本轮不把 NFC 演示等同于真实设备联调，不把组织演示等同于双账号验证。

视觉取舍与最终技术方向

用户在查看粒子版本后明确反馈光效过于花哨；查看 CSS 3D 版本后进一步指出太扁平、不够流畅，明确参照苹果手机与类似 App 广告的实体感。最终使用真正的 3D 几何、相机与材质反射，撤去装饰粒子、光轨、霓虹舞台和多重光圈：

  • 白板卡片分层展开、对齐和收回。
  • 暂存箱打开箱盖，内容卡片有序滑入，源内容保留。
  • 口令卡片翻转，接收卡片展开。
  • NFC 双手机模型从侧背面翻到正面、靠近，再归位。
  • 组织名片展开成员卡，再平滑收拢。
  • 一个持久的三维舞台负责模型进出和连续运镜；动作随时可反向，快速切课从当前姿态跟随最新目标，不排队播放旧章节。常规动作约 1.4–2 秒；完整转身重播分为拉远、转身、回到近景，按整周包络取景，避免中段出画。
  • 暂停、离屏、隐藏与减少动态效果均有稳定终态。减少动态效果下交互照常工作。
  • 不引入外部模型或图片请求；圆角几何和屏幕文字纹理在本地生成。仅使用所需物理材质特性，DPR 有上限，运动结束停止逐帧渲染；图形上下文丢失可恢复，卸载释放几何、材质、纹理和渲染资源。
  • 3D 代码单独延迟加载，界面控制与模式选择继续使用现有 OneGUI。媒体材质有独立语义角色，应用主题和自动对比引擎保留。

实现参考：Three.js 物理材质、圆角几何、环境照明。

最终验收以此版本的真实运动帧、录像、四种尺寸和功能用例为准；之前的粒子与 CSS 版本验证仅为迭代过程，不代表交付版本。

最终实现与交付记录

本批已实现上述三维舞台、三模式课程、真实功能练习和 OneGUI 配方。实际画面验收修复了屏幕高光白化、离屏静止状态与模型矩阵不同步、接收前错误显示已收到，以及完整转身中段出画的问题；手机首次进入时的静态初始化也不再消耗开场运镜。

完整验证、限制与七段实际录像见 验收记录。所有演示都保持本地隔离；真实 NFC、实体手机性能和组织双账号联调不属于本次浏览器验证结论。